@pdg/react-form 1.0.20 → 1.0.22

package/dist/index.js

@@ -949,35 +949,25 @@ FormDivider.defaultProps = FormDividerDefaultProps;function useFirstSkipEffect$1
         return v1 === v2;
     }
     return true;
-};function useFirstSkipLayoutEffect(effect, deps) {
-    var firstRef = React.useRef(true);
-    React.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 = React.useState(0), setUpdateKey = _a[1];
     var _initState = React.useState(function () {
-        return finalStateCallback ? finalStateCallback(state, 0) : state;
+        return finalStateCallback ? finalStateCallback(state) : state;
     })[0];
     var _state = React.useRef(_initState);
     var forceUpdate = React.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["default"].forwardRef(func
     var labelShrink = React.useMemo(function () { return (initLabelShrink == null ? formLabelShrink : initLabelShrink); }, [initLabelShrink, formLabelShrink]);
     var fullWidth = React.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 = React.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(React.useCallback(function () {
+    var style = useAutoUpdateState$1(React.useCallback(function () {
         if (hidden) {
             return __assign$4(__assign$4({}, initStyle), { display: 'none' });
         }
@@ -2052,13 +2042,13 @@ styleInject(css_248z$j);var FormTextField = React__default["default"].forwardRef
     var _b;
     var initVariant = _a.variant, initSize = _a.size, initColor = _a.color, initFocused = _a.focused, initLabelShrink = _a.labelShrink, initFullWidth = _a.fullWidth, 
     //----------------------------------------------------------------------------------------------------------------
-    name = _a.name, required = _a.required, initValue = _a.value, icon = _a.icon, labelIcon = _a.labelIcon, initLabel = _a.label, initError = _a.error, initHelperText = _a.helperText, exceptValue = _a.exceptValue, readOnly = _a.readOnly, initDisabled = _a.disabled, placeholder = _a.placeholder, maxLength = _a.maxLength, clear = _a.clear, width = _a.width, initMuiInputProps = _a.InputProps, initMuiInputLabelProps = _a.InputLabelProps, initInputProps = _a.inputProps, initInputRef = _a.inputRef, select = _a.select, SelectProps = _a.SelectProps, multiline = _a.multiline, validPattern = _a.validPattern, invalidPattern = _a.invalidPattern, startAdornment = _a.startAdornment, endAdornment = _a.endAdornment, noFormValueItem = _a.noFormValueItem, 
+    name = _a.name, required = _a.required, initValue = _a.value, icon = _a.icon, labelIcon = _a.labelIcon, initLabel = _a.label, initError = _a.error, initHelperText = _a.helperText, exceptValue = _a.exceptValue, readOnly = _a.readOnly, initDisabled = _a.disabled, placeholder = _a.placeholder, maxLength = _a.maxLength, clear = _a.clear, width = _a.width, initMuiInputProps = _a.InputProps, initMuiInputLabelProps = _a.InputLabelProps, initInputProps = _a.inputProps, initInputRef = _a.inputRef, select = _a.select, SelectProps = _a.SelectProps, multiline = _a.multiline, validPattern = _a.validPattern, invalidPattern = _a.invalidPattern, startAdornment = _a.startAdornment, endAdornment = _a.endAdornment, noFormValueItem = _a.noFormValueItem, hidden = _a.hidden, 
     //----------------------------------------------------------------------------------------------------------------
     onChange = _a.onChange, onValue = _a.onValue, onValidate = _a.onValidate, onBlur = _a.onBlur, onKeyDown = _a.onKeyDown, 
     //----------------------------------------------------------------------------------------------------------------
     className = _a.className, initStyle = _a.style, 
     //----------------------------------------------------------------------------------------------------------------
-    props = __rest$2(_a, ["variant", "size", "color", "focused", "labelShrink", "fullWidth", "name", "required", "value", "icon", "labelIcon", "label", "error", "helperText", "exceptValue", "readOnly", "disabled", "placeholder", "maxLength", "clear", "width", "InputProps", "InputLabelProps", "inputProps", "inputRef", "select", "SelectProps", "multiline", "validPattern", "invalidPattern", "startAdornment", "endAdornment", "noFormValueItem", "onChange", "onValue", "onValidate", "onBlur", "onKeyDown", "className", "style"]);
+    props = __rest$2(_a, ["variant", "size", "color", "focused", "labelShrink", "fullWidth", "name", "required", "value", "icon", "labelIcon", "label", "error", "helperText", "exceptValue", "readOnly", "disabled", "placeholder", "maxLength", "clear", "width", "InputProps", "InputLabelProps", "inputProps", "inputRef", "select", "SelectProps", "multiline", "validPattern", "invalidPattern", "startAdornment", "endAdornment", "noFormValueItem", "hidden", "onChange", "onValue", "onValidate", "onBlur", "onKeyDown", "className", "style"]);
     var id = React.useId();
     // Ref -------------------------------------------------------------------------------------------------------------
     var inputRef = React.useRef(null);
@@ -2072,10 +2062,10 @@ styleInject(css_248z$j);var FormTextField = React__default["default"].forwardRef
     var labelShrink = React.useMemo(function () { return (initLabelShrink == null ? formLabelShrink : initLabelShrink); }, [initLabelShrink, formLabelShrink]);
     var fullWidth = React.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 = React.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 = React.useMemo(function () {
         if (labelShrink || placeholder) {
@@ -2100,13 +2090,15 @@ styleInject(css_248z$j);var FormTextField = React__default["default"].forwardRef
     }, [initInputProps, readOnly, maxLength]);
     // Memo - style ----------------------------------------------------------------------------------------------------
     var style = React.useMemo(function () {
+        var newStyle = __assign$4({}, initStyle);
         if (width != null) {
-            return __assign$4(__assign$4({}, initStyle), { width: width });
+            newStyle.width = width;
         }
-        else {
-            return initStyle;
+        if (hidden) {
+            newStyle.display = 'none';
         }
-    }, [initStyle, width]);
+        return newStyle;
+    }, [initStyle, width, hidden]);
     // Memo - label ----------------------------------------------------------------------------------------------------
     var label = React.useMemo(function () {
         return labelIcon ? (React__default["default"].createElement(React__default["default"].Fragment, null,
@@ -2118,7 +2110,7 @@ styleInject(css_248z$j);var FormTextField = React__default["default"].forwardRef
         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];
     React.useEffect(function () {
         setShowClear(clear ? notEmpty(value) : false);
         // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -2361,7 +2353,7 @@ styleInject(css_248z$h);var FormTag = React__default["default"].forwardRef(funct
     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 = React.useCallback(function (value) {
         var finalValue;
@@ -2379,7 +2371,7 @@ styleInject(css_248z$h);var FormTag = React__default["default"].forwardRef(funct
     var _c = React.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 +2381,8 @@ styleInject(css_248z$h);var FormTag = React__default["default"].forwardRef(funct
     }, [value]);
     //------------------------------------------------------------------------------------------------------------------
     var _e = React.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 ----------------------------------------------------------------------------------------------------------
     React.useEffect(function () {
         if (!isSame$2(value, initValue)) {
@@ -4132,7 +4124,7 @@ styleInject(css_248z$d);var FormSelect = React__default["default"].forwardRef(fu
         }
     }, [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];
     React.useEffect(function () {
         if (items) {
             setItemValueLabels(items.reduce(function (res, item) {
@@ -4163,7 +4155,7 @@ styleInject(css_248z$d);var FormSelect = React__default["default"].forwardRef(fu
         }
     }, [items]);
     // State - inputLabelProps -----------------------------------------------------------------------------------------
-    var inputLabelProps = useAutoUpdateLayoutState(React.useCallback(function () {
+    var inputLabelProps = useAutoUpdateState$1(React.useCallback(function () {
         if (hasEmptyValue || (!hasEmptyValue && placeholder)) {
             return __assign$4(__assign$4({}, initInputLabelProps), { shrink: true });
         }
@@ -4220,14 +4212,14 @@ styleInject(css_248z$d);var FormSelect = React__default["default"].forwardRef(fu
         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(React.useCallback(function () {
+    var isSelectedPlaceholder = useAutoUpdateState$1(React.useCallback(function () {
         return notEmpty(items) && empty$1(value) && !!placeholder && !hasEmptyValue;
     }, [items, value, placeholder, hasEmptyValue]))[0];
     // Effect ----------------------------------------------------------------------------------------------------------
@@ -4361,7 +4353,7 @@ styleInject(css_248z$c);var FormItemBase = React__default["default"].forwardRef(
     // FormState -------------------------------------------------------------------------------------------------------
     var initVariant = _a.variant, initSize = _a.size, initColor = _a.color, initFullWidth = _a.fullWidth, 
     //----------------------------------------------------------------------------------------------------------------
-    control = _a.control, controlHeight = _a.controlHeight, controlVerticalCenter = _a.controlVerticalCenter, required = _a.required, labelIcon = _a.labelIcon, label = _a.label, focused = _a.focused, helperText = _a.helperText, helperTextProps = _a.helperTextProps, error = _a.error, hideLabel = _a.hideLabel, 
+    control = _a.control, controlHeight = _a.controlHeight, controlVerticalCenter = _a.controlVerticalCenter, required = _a.required, labelIcon = _a.labelIcon, label = _a.label, focused = _a.focused, helperText = _a.helperText, helperTextProps = _a.helperTextProps, error = _a.error, hideLabel = _a.hideLabel, hidden = _a.hidden, 
     //----------------------------------------------------------------------------------------------------------------
     className = _a.className, style = _a.style, sx = _a.sx;
     var _b = useFormState(), formVariant = _b.variant, formSize = _b.size, formColor = _b.color, formFullWidth = _b.fullWidth, formColWithLabel = _b.formColWithLabel, formColWithHelperText = _b.formColWithHelperText;
@@ -4373,14 +4365,14 @@ styleInject(css_248z$c);var FormItemBase = React__default["default"].forwardRef(
     // Memo --------------------------------------------------------------------------------------------------------------
     var wrapStyle = React.useMemo(function () {
         var wrapStyle = {
-            display: fullWidth ? 'block' : 'inline-flex',
+            display: hidden ? 'none' : fullWidth ? 'block' : 'inline-flex',
             width: fullWidth ? '100%' : undefined,
         };
         if (formColWithLabel) {
             wrapStyle.marginTop = -20;
         }
         return wrapStyle;
-    }, [formColWithLabel, fullWidth]);
+    }, [formColWithLabel, fullWidth, hidden]);
     // State - inputHeight ---------------------------------------------------------------------------------------------
     var _c = React.useState(0), inputHeight = _c[0], setInputHeight = _c[1];
     var inputResizeDetectorRef = useResizeDetector({
@@ -4466,9 +4458,9 @@ FormItemBase.displayName = 'FormItemBase';var FormCheckbox = React__default["def
     // ID --------------------------------------------------------------------------------------------------------------
     var initVariant = _a.variant, initSize = _a.size, initColor = _a.color, initFocused = _a.focused, initFullWidth = _a.fullWidth, 
     //----------------------------------------------------------------------------------------------------------------
-    name = _a.name, labelIcon = _a.labelIcon, label = _a.label, initChecked = _a.checked, initInputRef = _a.inputRef, initAction = _a.action, readOnly = _a.readOnly, initDisabled = _a.disabled, text = _a.text, initError = _a.error, initHelperText = _a.helperText, initValue = _a.value, initUncheckedValue = _a.uncheckedValue, exceptValue = _a.exceptValue, onChange = _a.onChange, onValidate = _a.onValidate, 
+    name = _a.name, labelIcon = _a.labelIcon, label = _a.label, initChecked = _a.checked, initInputRef = _a.inputRef, initAction = _a.action, readOnly = _a.readOnly, initDisabled = _a.disabled, text = _a.text, initError = _a.error, initHelperText = _a.helperText, initValue = _a.value, initUncheckedValue = _a.uncheckedValue, exceptValue = _a.exceptValue, hidden = _a.hidden, onChange = _a.onChange, onValidate = _a.onValidate, 
     //----------------------------------------------------------------------------------------------------------------
-    className = _a.className, initStyle = _a.style, sx = _a.sx, props = __rest$2(_a, ["variant", "size", "color", "focused", "fullWidth", "name", "labelIcon", "label", "checked", "inputRef", "action", "readOnly", "disabled", "text", "error", "helperText", "value", "uncheckedValue", "exceptValue", "onChange", "onValidate", "className", "style", "sx"]);
+    className = _a.className, initStyle = _a.style, sx = _a.sx, props = __rest$2(_a, ["variant", "size", "color", "focused", "fullWidth", "name", "labelIcon", "label", "checked", "inputRef", "action", "readOnly", "disabled", "text", "error", "helperText", "value", "uncheckedValue", "exceptValue", "hidden", "onChange", "onValidate", "className", "style", "sx"]);
     var id = React.useId();
     // FormState -------------------------------------------------------------------------------------------------------
     var _b = useFormState(), formVariant = _b.variant, formSize = _b.size, formColor = _b.color, formFocused = _b.focused, formFullWidth = _b.fullWidth, onAddValueItem = _b.onAddValueItem, onRemoveValueItem = _b.onRemoveValueItem, onValueChange = _b.onValueChange, onValueChangeByUser = _b.onValueChangeByUser, onRequestSearchSubmit = _b.onRequestSearchSubmit;
@@ -4484,13 +4476,13 @@ FormItemBase.displayName = 'FormItemBase';var FormCheckbox = React__default["def
     // 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);
@@ -4630,7 +4622,7 @@ FormItemBase.displayName = 'FormItemBase';var FormCheckbox = React__default["def
         }
     }, [readOnly, setChecked, onValueChangeByUser, name, onRequestSearchSubmit]);
     // Render ----------------------------------------------------------------------------------------------------------
-    return (React__default["default"].createElement(FormItemBase, { variant: variant, size: size, color: color, focused: focused, className: classNames$1(className, 'FormValueItem', 'FormCheckbox'), labelIcon: labelIcon, label: label, error: error, fullWidth: fullWidth, helperText: helperText, helperTextProps: { style: { marginLeft: 2 } }, style: style, sx: sx, controlHeight: height || (size === 'small' ? 35 : 39), controlVerticalCenter: true, control: React__default["default"].createElement(material.FormControlLabel, { ref: resizeDetectorRef, control: React__default["default"].createElement(material.Checkbox, __assign$4({ name: name, color: color, size: size, inputRef: initInputRef ? initInputRef : inputRef, action: initAction ? initAction : actionRef, checked: !!checked, checkedIcon: React__default["default"].createElement(iconsMaterial.CheckBox, { color: error ? 'error' : undefined }), icon: React__default["default"].createElement(iconsMaterial.CheckBoxOutlineBlank, { color: error ? 'error' : undefined }), onChange: handleChange, disabled: disabled || readOnly }, props)), label: React__default["default"].createElement(material.Typography, { color: error ? 'error' : undefined, whiteSpace: 'nowrap' }, text) }) }));
+    return (React__default["default"].createElement(FormItemBase, { variant: variant, size: size, color: color, focused: focused, className: classNames$1(className, 'FormValueItem', 'FormCheckbox'), labelIcon: labelIcon, label: label, error: error, fullWidth: fullWidth, helperText: helperText, helperTextProps: { style: { marginLeft: 2 } }, style: style, sx: sx, hidden: hidden, controlHeight: height || (size === 'small' ? 35 : 39), controlVerticalCenter: true, control: React__default["default"].createElement(material.FormControlLabel, { ref: resizeDetectorRef, control: React__default["default"].createElement(material.Checkbox, __assign$4({ name: name, color: color, size: size, inputRef: initInputRef ? initInputRef : inputRef, action: initAction ? initAction : actionRef, checked: !!checked, checkedIcon: React__default["default"].createElement(iconsMaterial.CheckBox, { color: error ? 'error' : undefined }), icon: React__default["default"].createElement(iconsMaterial.CheckBoxOutlineBlank, { color: error ? 'error' : undefined }), onChange: handleChange, disabled: disabled || readOnly }, props)), label: React__default["default"].createElement(material.Typography, { color: error ? 'error' : undefined, whiteSpace: 'nowrap' }, text) }) }));
 });
 FormCheckbox.displayName = 'FormCheckbox';
 FormCheckbox.defaultProps = FormCheckboxDefaultProps;var FormRadioGroupDefaultProps = {
@@ -4638,13 +4630,13 @@ FormCheckbox.defaultProps = FormCheckboxDefaultProps;var FormRadioGroupDefaultPr
 };var PADDING_LEFT = 3;
 var FormRadioGroup = React__default["default"].forwardRef(function (_a, ref) {
     // ID --------------------------------------------------------------------------------------------------------------
-    var initVariant = _a.variant, initSize = _a.size, initColor = _a.color, initFocused = _a.focused, initFullWidth = _a.fullWidth, 
+    var initVariant = _a.variant, initSize = _a.size, initColor = _a.color, initFocused = _a.focused, initFullWidth = _a.fullWidth, hidden = _a.hidden, 
     //----------------------------------------------------------------------------------------------------------------
     name = _a.name, initWidth = _a.width, labelIcon = _a.labelIcon, label = _a.label, inline = _a.inline, initLoading = _a.loading, nowrap = _a.nowrap, initItems = _a.items, initValue = _a.value, initError = _a.error, initHelperText = _a.helperText, initDisabled = _a.disabled, readOnly = _a.readOnly, required = _a.required, exceptValue = _a.exceptValue, onLoadItems = _a.onLoadItems, onChange = _a.onChange, onValue = _a.onValue, onValidate = _a.onValidate, 
     //----------------------------------------------------------------------------------------------------------------
     className = _a.className, initStyle = _a.style, sx = _a.sx, 
     //----------------------------------------------------------------------------------------------------------------
-    props = __rest$2(_a, ["variant", "size", "color", "focused", "fullWidth", "name", "width", "labelIcon", "label", "inline", "loading", "nowrap", "items", "value", "error", "helperText", "disabled", "readOnly", "required", "exceptValue", "onLoadItems", "onChange", "onValue", "onValidate", "className", "style", "sx"]);
+    props = __rest$2(_a, ["variant", "size", "color", "focused", "fullWidth", "hidden", "name", "width", "labelIcon", "label", "inline", "loading", "nowrap", "items", "value", "error", "helperText", "disabled", "readOnly", "required", "exceptValue", "onLoadItems", "onChange", "onValue", "onValidate", "className", "style", "sx"]);
     var id = React.useId();
     // FormState -------------------------------------------------------------------------------------------------------
     var _b = useFormState(), formVariant = _b.variant, formSize = _b.size, formColor = _b.color, formFocused = _b.focused, formFullWidth = _b.fullWidth, onAddValueItem = _b.onAddValueItem, onRemoveValueItem = _b.onRemoveValueItem, onValueChange = _b.onValueChange, onValueChangeByUser = _b.onValueChangeByUser, onRequestSearchSubmit = _b.onRequestSearchSubmit;
@@ -4654,20 +4646,20 @@ var FormRadioGroup = React__default["default"].forwardRef(function (_a, ref) {
     var color = React.useMemo(function () { return (initColor == null ? formColor : initColor); }, [initColor, formColor]);
     var focused = React.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 = material.useTheme();
     // Ref -------------------------------------------------------------------------------------------------------------
     var baseRef = React.useRef(null);
     var firstInputRef = React.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 = React.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 = React.useState(), formColWrapRect = _l[0], setFormColWrapRect = _l[1];
     // State - radioGroupNoWrapRect (ResizeDetector) -------------------------------------------------------------------
     var _m = React.useState(), radioGroupNoWrapRect = _m[0], setRadioGroupNoWrapRect = _m[1];
@@ -4686,7 +4678,7 @@ var FormRadioGroup = React__default["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);
@@ -4909,7 +4901,7 @@ var FormRadioGroup = React__default["default"].forwardRef(function (_a, ref) {
         }
     }, [readOnly, items, getFinalValue, value, setValue, onValueChangeByUser, name, onRequestSearchSubmit]);
     // Render ----------------------------------------------------------------------------------------------------------
-    return (React__default["default"].createElement(FormItemBase, { focused: focused, ref: baseRef, className: classNames$1(className, 'FormValueItem', 'FormRadioGroup'), variant: variant, size: size, color: color, labelIcon: labelIcon, label: label, fullWidth: fullWidth, required: required, error: error, helperText: helperText, helperTextProps: { style: { marginLeft: 2 } }, style: style, sx: sx, controlHeight: height || (size === 'small' ? 35 : 39), controlVerticalCenter: true, control: React__default["default"].createElement(React__default["default"].Fragment, null,
+    return (React__default["default"].createElement(FormItemBase, { focused: focused, ref: baseRef, className: classNames$1(className, 'FormValueItem', 'FormRadioGroup'), variant: variant, size: size, color: color, labelIcon: labelIcon, label: label, fullWidth: fullWidth, required: required, error: error, helperText: helperText, helperTextProps: { style: { marginLeft: 2 } }, style: style, sx: sx, hidden: hidden, controlHeight: height || (size === 'small' ? 35 : 39), controlVerticalCenter: true, control: React__default["default"].createElement(React__default["default"].Fragment, null,
             !fullWidth && !isOnGetItemLoading && !loading && items && (React__default["default"].createElement("div", { ref: resizeWidthDetectorRef, style: {
                     display: 'grid',
                     position: 'absolute',
@@ -4945,7 +4937,7 @@ styleInject(css_248z$b);var FormToggleButtonGroup = React__default["default"].fo
     // ID --------------------------------------------------------------------------------------------------------------
     var initVariant = _a.variant, initSize = _a.size, initColor = _a.color, initFocused = _a.focused, initFullWidth = _a.fullWidth, 
     //----------------------------------------------------------------------------------------------------------------
-    name = _a.name, labelIcon = _a.labelIcon, label = _a.label, type = _a.type, initLoading = _a.loading, initItems = _a.items, initValue = _a.value, initError = _a.error, initHelperText = _a.helperText, initDisabled = _a.disabled, readOnly = _a.readOnly, required = _a.required, notAllowEmptyValue = _a.notAllowEmptyValue, exceptValue = _a.exceptValue, initWidth = _a.width, multiple = _a.multiple, formValueSeparator = _a.formValueSeparator, formValueSort = _a.formValueSort, onLoadItems = _a.onLoadItems, 
+    name = _a.name, labelIcon = _a.labelIcon, label = _a.label, type = _a.type, initLoading = _a.loading, initItems = _a.items, initValue = _a.value, initError = _a.error, initHelperText = _a.helperText, initDisabled = _a.disabled, readOnly = _a.readOnly, required = _a.required, notAllowEmptyValue = _a.notAllowEmptyValue, exceptValue = _a.exceptValue, initWidth = _a.width, multiple = _a.multiple, formValueSeparator = _a.formValueSeparator, formValueSort = _a.formValueSort, hidden = _a.hidden, onLoadItems = _a.onLoadItems, 
     //----------------------------------------------------------------------------------------------------------------
     onChange = _a.onChange, onValue = _a.onValue, onValidate = _a.onValidate, 
     //----------------------------------------------------------------------------------------------------------------
@@ -4960,7 +4952,7 @@ styleInject(css_248z$b);var FormToggleButtonGroup = React__default["default"].fo
     var color = React.useMemo(function () { return (initColor == null ? formColor : initColor); }, [initColor, formColor]);
     var fullWidth = React.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 = material.useTheme();
     // State - width (ResizeDetector) ----------------------------------------------------------------------------------
@@ -4981,11 +4973,11 @@ styleInject(css_248z$b);var FormToggleButtonGroup = React__default["default"].fo
     }).ref;
     // State -----------------------------------------------------------------------------------------------------------
     var _f = React.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 = React.useMemo(function () {
         if (items) {
@@ -5071,7 +5063,7 @@ styleInject(css_248z$b);var FormToggleButtonGroup = React__default["default"].fo
         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 ----------------------------------------------------------------------------------------------------------
     React.useEffect(function () {
         if (value !== initValue) {
@@ -5282,7 +5274,7 @@ styleInject(css_248z$b);var FormToggleButtonGroup = React__default["default"].fo
     if (focused) {
         formControlBaseProps.focused = true;
     }
-    return (React__default["default"].createElement(FormItemBase, __assign$4({}, formControlBaseProps, { className: classNames$1(className, 'FormValueItem', 'FormToggleButtonGroup', "variant-".concat(variant), "size-".concat(size), !!label && 'with-label', !!fullWidth && 'full-width', "type-".concat(type)), variant: variant, size: size, color: color, labelIcon: labelIcon, label: label, required: required, fullWidth: fullWidth, error: error, helperText: helperText, helperTextProps: { style: { marginLeft: 2 } }, style: style, sx: sx, controlHeight: height || 0, controlVerticalCenter: isOnGetItemLoading || loading, control: isOnGetItemLoading || loading ? (React__default["default"].createElement("div", { style: { opacity: 0.54 }, ref: resizeHeightDetectorRef },
+    return (React__default["default"].createElement(FormItemBase, __assign$4({}, formControlBaseProps, { className: classNames$1(className, 'FormValueItem', 'FormToggleButtonGroup', "variant-".concat(variant), "size-".concat(size), !!label && 'with-label', !!fullWidth && 'full-width', "type-".concat(type)), variant: variant, size: size, color: color, labelIcon: labelIcon, label: label, required: required, fullWidth: fullWidth, error: error, helperText: helperText, helperTextProps: { style: { marginLeft: 2 } }, style: style, sx: sx, hidden: hidden, controlHeight: height || 0, controlVerticalCenter: isOnGetItemLoading || loading, control: isOnGetItemLoading || loading ? (React__default["default"].createElement("div", { style: { opacity: 0.54 }, ref: resizeHeightDetectorRef },
             React__default["default"].createElement(material.CircularProgress, { size: 16, color: 'inherit' }))) : (React__default["default"].createElement(React__default["default"].Fragment, null,
             !fullWidth && !isOnGetItemLoading && !loading && items && (React__default["default"].createElement("div", { ref: resizeWidthDetectorRef, style: {
                     display: 'grid',
@@ -5324,7 +5316,7 @@ FormToggleButtonGroup.defaultProps = FormToggleButtonGroupDefaultProps;var FormR
     // ID --------------------------------------------------------------------------------------------------------------
     var initVariant = _a.variant, initSize = _a.size, initColor = _a.color, initFocused = _a.focused, 
     //----------------------------------------------------------------------------------------------------------------
-    precision = _a.precision, highlightSelectedOnly = _a.highlightSelectedOnly, icon = _a.icon, emptyIcon = _a.emptyIcon, max = _a.max, 
+    precision = _a.precision, highlightSelectedOnly = _a.highlightSelectedOnly, icon = _a.icon, emptyIcon = _a.emptyIcon, max = _a.max, hidden = _a.hidden, 
     //----------------------------------------------------------------------------------------------------------------
     name = _a.name, labelIcon = _a.labelIcon, label = _a.label, readOnly = _a.readOnly, required = _a.required, initDisabled = _a.disabled, initError = _a.error, initHelperText = _a.helperText, initValue = _a.value, exceptValue = _a.exceptValue, onChange = _a.onChange, onValidate = _a.onValidate, onValue = _a.onValue, 
     //----------------------------------------------------------------------------------------------------------------
@@ -5337,13 +5329,13 @@ FormToggleButtonGroup.defaultProps = FormToggleButtonGroupDefaultProps;var FormR
     var size = React.useMemo(function () { return (initSize == null ? formSize : initSize); }, [initSize, formSize]);
     var color = React.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 = React.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 +5343,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);
@@ -5484,7 +5476,7 @@ FormToggleButtonGroup.defaultProps = FormToggleButtonGroupDefaultProps;var FormR
         }
     }, [readOnly, getFinalValue, setValue, onValueChangeByUser, name, onRequestSearchSubmit]);
     // Render ----------------------------------------------------------------------------------------------------------
-    return (React__default["default"].createElement(FormItemBase, { variant: variant, size: size, color: color, focused: focused, className: classNames$1(className, 'FormValueItem', 'FormRating'), labelIcon: labelIcon, label: label, error: error, fullWidth: false, required: required, helperText: helperText, helperTextProps: { style: { marginLeft: 5 } }, style: style, sx: sx, controlHeight: height || (size === 'small' ? 21 : 26), controlVerticalCenter: true, control: React__default["default"].createElement(material.Rating, { ref: resizeDetectorRef, size: size === 'medium' ? 'large' : 'medium', name: name, precision: precision, highlightSelectedOnly: highlightSelectedOnly, value: value, disabled: disabled || readOnly, max: max, icon: React__default["default"].createElement(FormIcon, { color: color, fontSize: 'inherit' }, icon ? icon : 'Star'), emptyIcon: React__default["default"].createElement(FormIcon, { fontSize: 'inherit' }, emptyIcon ? emptyIcon : 'StarBorder'), onChange: handleChange, onFocus: function () { return setFocused(initFocused || true); }, onBlur: function () { return setFocused(initFocused || false); } }) }));
+    return (React__default["default"].createElement(FormItemBase, { variant: variant, size: size, color: color, focused: focused, className: classNames$1(className, 'FormValueItem', 'FormRating'), labelIcon: labelIcon, label: label, error: error, fullWidth: false, required: required, helperText: helperText, helperTextProps: { style: { marginLeft: 5 } }, style: style, sx: sx, hidden: hidden, controlHeight: height || (size === 'small' ? 21 : 26), controlVerticalCenter: true, control: React__default["default"].createElement(material.Rating, { ref: resizeDetectorRef, size: size === 'medium' ? 'large' : 'medium', name: name, precision: precision, highlightSelectedOnly: highlightSelectedOnly, value: value, disabled: disabled || readOnly, max: max, icon: React__default["default"].createElement(FormIcon, { color: color, fontSize: 'inherit' }, icon ? icon : 'Star'), emptyIcon: React__default["default"].createElement(FormIcon, { fontSize: 'inherit' }, emptyIcon ? emptyIcon : 'StarBorder'), onChange: handleChange, onFocus: function () { return setFocused(initFocused || true); }, onBlur: function () { return setFocused(initFocused || false); } }) }));
 });
 FormRating.displayName = 'FormRating';
 FormRating.defaultProps = FormRatingDefaultProps;var propTypes = {exports: {}};var reactIs = {exports: {}};var reactIs_production_min = {};/** @license React v16.13.1
@@ -7217,7 +7209,7 @@ styleInject(css_248z$a);var FormTextEditor = React__default["default"].forwardRe
     // ID --------------------------------------------------------------------------------------------------------------
     var initVariant = _a.variant, initSize = _a.size, initColor = _a.color, initFocused = _a.focused, 
     //----------------------------------------------------------------------------------------------------------------
-    menubar = _a.menubar, height = _a.height, onImageUpload = _a.onImageUpload, 
+    menubar = _a.menubar, height = _a.height, hidden = _a.hidden, onImageUpload = _a.onImageUpload, 
     //----------------------------------------------------------------------------------------------------------------
     name = _a.name, labelIcon = _a.labelIcon, label = _a.label, readOnly = _a.readOnly, required = _a.required, initDisabled = _a.disabled, initError = _a.error, initHelperText = _a.helperText, initValue = _a.value, exceptValue = _a.exceptValue, onChange = _a.onChange, onValidate = _a.onValidate, 
     //----------------------------------------------------------------------------------------------------------------
@@ -7230,12 +7222,12 @@ styleInject(css_248z$a);var FormTextEditor = React__default["default"].forwardRe
     var size = React.useMemo(function () { return (initSize == null ? formSize : initSize); }, [initSize, formSize]);
     var color = React.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 = React.useRef(null);
     var keyDownTime = React.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 +7236,10 @@ styleInject(css_248z$a);var FormTextEditor = React__default["default"].forwardRe
         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 = React.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 = React.useCallback(function () {
         var _a, _b;
@@ -7371,7 +7363,7 @@ styleInject(css_248z$a);var FormTextEditor = React__default["default"].forwardRe
             onImageUpload(blobInfo.blob(), success, failure, progress);
     }, [onImageUpload]);
     // Render ----------------------------------------------------------------------------------------------------------
-    return (React__default["default"].createElement(FormItemBase, { variant: variant, size: size, color: color, focused: focused, className: classNames$1(className, 'FormValueItem', 'FormTextEditor', !initialized && 'initializing'), labelIcon: labelIcon, label: label, error: error, required: required, fullWidth: true, helperText: helperText, helperTextProps: { style: { marginLeft: 5 } }, style: { width: '100%' }, controlHeight: height, control: React__default["default"].createElement(React__default["default"].Fragment, null,
+    return (React__default["default"].createElement(FormItemBase, { variant: variant, size: size, color: color, focused: focused, className: classNames$1(className, 'FormValueItem', 'FormTextEditor', !initialized && 'initializing'), labelIcon: labelIcon, label: label, error: error, required: required, fullWidth: true, helperText: helperText, helperTextProps: { style: { marginLeft: 5 } }, style: { width: '100%' }, hidden: hidden, controlHeight: height, control: React__default["default"].createElement(React__default["default"].Fragment, null,
             !initialized ? React__default["default"].createElement(material.Skeleton, { variant: 'rectangular', width: '100%', height: height }) : null,
             React__default["default"].createElement(Editor, { ref: editorRef, value: value, disabled: readOnly || disabled, init: {
                     height: height,
@@ -7404,7 +7396,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, onAsyncLoadValueItem = _a.onAsyncLoadValueItem, 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, hidden = _a.hidden, onLoadItems = _a.onLoadItems, onAsyncLoadValueItem = _a.onAsyncLoadValueItem, onRenderItem = _a.onRenderItem, onRenderTag = _a.onRenderTag, onAddItem = _a.onAddItem, 
     //----------------------------------------------------------------------------------------------------------------
     onChange = _a.onChange, onValue = _a.onValue, onValidate = _a.onValidate, 
     //----------------------------------------------------------------------------------------------------------------
@@ -7425,11 +7417,11 @@ FormTextEditor.defaultProps = FormTextEditorDefaultProps;var FormAutocompleteDef
     var fullWidth = React.useMemo(function () { return (initFullWidth == null ? formFullWidth : initFullWidth); }, [initFullWidth, formFullWidth]);
     // State -----------------------------------------------------------------------------------------------------------
     var _c = React.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 = React.useState(undefined), inputValue = _j[0], setInputValue = _j[1];
     // Memo --------------------------------------------------------------------------------------------------------------
     var itemsValues = React.useMemo(function () {
@@ -7446,11 +7438,14 @@ FormTextEditor.defaultProps = FormTextEditorDefaultProps;var FormAutocompleteDef
     }, [items]);
     var style = React.useMemo(function () {
         var style = __assign$4({ minWidth: 120 }, initStyle);
+        if (hidden) {
+            style.display = 'none';
+        }
         if (width != null) {
             style.width = width;
         }
         return style;
-    }, [initStyle, width]);
+    }, [initStyle, width, hidden]);
     // Function - getFinalValue ----------------------------------------------------------------------------------------
     var getFinalValue = React.useCallback(function (value) {
         var finalValue = value;
@@ -7500,7 +7495,7 @@ 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 = React.useState(null), valueItem = _l[0], setValueItem = _l[1];
     var componentValue = React.useMemo(function () {
         var finalValue = value;
@@ -14643,9 +14638,9 @@ styleInject(css_248z$5);var PrivateDatePicker = React__default["default"].forwar
     // ID --------------------------------------------------------------------------------------------------------------
     var initVariant = _a.variant, initSize = _a.size, initColor = _a.color, initFocused = _a.focused, initLabelShrink = _a.labelShrink, initFullWidth = _a.fullWidth, 
     //--------------------------------------------------------------------------------------------------------------------
-    name = _a.name, type = _a.type, time = _a.time, initValue = _a.value, initLabel = _a.label, labelIcon = _a.labelIcon, initFormat = _a.format, initFormValueFormat = _a.formValueFormat, required = _a.required, readOnly = _a.readOnly, initDisabled = _a.disabled, width = _a.width, initError = _a.error, initHelperText = _a.helperText, minDate = _a.minDate, maxDate = _a.maxDate, disableFuture = _a.disableFuture, disablePast = _a.disablePast, exceptValue = _a.exceptValue, icon = _a.icon, startAdornment = _a.startAdornment, endAdornment = _a.endAdornment, align = _a.align, hours = _a.hours, minutes = _a.minutes, seconds = _a.seconds, minuteInterval = _a.minuteInterval, secondInterval = _a.secondInterval, readOnlyInput = _a.readOnlyInput, onChange = _a.onChange, onValidate = _a.onValidate, 
+    name = _a.name, type = _a.type, time = _a.time, initValue = _a.value, initLabel = _a.label, labelIcon = _a.labelIcon, initFormat = _a.format, initFormValueFormat = _a.formValueFormat, required = _a.required, readOnly = _a.readOnly, initDisabled = _a.disabled, width = _a.width, initError = _a.error, initHelperText = _a.helperText, minDate = _a.minDate, maxDate = _a.maxDate, disableFuture = _a.disableFuture, disablePast = _a.disablePast, exceptValue = _a.exceptValue, icon = _a.icon, startAdornment = _a.startAdornment, endAdornment = _a.endAdornment, align = _a.align, hours = _a.hours, minutes = _a.minutes, seconds = _a.seconds, minuteInterval = _a.minuteInterval, secondInterval = _a.secondInterval, readOnlyInput = _a.readOnlyInput, hidden = _a.hidden, onChange = _a.onChange, onValidate = _a.onValidate, 
     //--------------------------------------------------------------------------------------------------------------------
-    className = _a.className, initStyle = _a.style, sx = _a.sx, otherProps = __rest$2(_a, ["variant", "size", "color", "focused", "labelShrink", "fullWidth", "name", "type", "time", "value", "label", "labelIcon", "format", "formValueFormat", "required", "readOnly", "disabled", "width", "error", "helperText", "minDate", "maxDate", "disableFuture", "disablePast", "exceptValue", "icon", "startAdornment", "endAdornment", "align", "hours", "minutes", "seconds", "minuteInterval", "secondInterval", "readOnlyInput", "onChange", "onValidate", "className", "style", "sx"]);
+    className = _a.className, initStyle = _a.style, sx = _a.sx, otherProps = __rest$2(_a, ["variant", "size", "color", "focused", "labelShrink", "fullWidth", "name", "type", "time", "value", "label", "labelIcon", "format", "formValueFormat", "required", "readOnly", "disabled", "width", "error", "helperText", "minDate", "maxDate", "disableFuture", "disablePast", "exceptValue", "icon", "startAdornment", "endAdornment", "align", "hours", "minutes", "seconds", "minuteInterval", "secondInterval", "readOnlyInput", "hidden", "onChange", "onValidate", "className", "style", "sx"]);
     var id = React.useId();
     // Ref -------------------------------------------------------------------------------------------------------------
     var privateStaticDatePickerRef = React.useRef(null);
@@ -14666,10 +14661,10 @@ styleInject(css_248z$5);var PrivateDatePicker = React__default["default"].forwar
     // State - open ----------------------------------------------------------------------------------------------------
     var _c = React.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 = React.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 = React.useMemo(function () {
         if (labelIcon) {
@@ -14697,7 +14692,7 @@ styleInject(css_248z$5);var PrivateDatePicker = React__default["default"].forwar
     }, [initFormValueFormat, time, type]);
     var availableDate = React.useMemo(function () { return makeAvailableDate(minDate, maxDate, !!disablePast, !!disableFuture); }, [disableFuture, disablePast, maxDate, minDate]);
     // State - style ---------------------------------------------------------------------------------------------------
-    var style = useAutoUpdateLayoutState(React.useCallback(function () {
+    var style = useAutoUpdateState$1(React.useCallback(function () {
         if (width != null) {
             return __assign$4(__assign$4({}, initStyle), { width: width });
         }
@@ -14710,7 +14705,7 @@ styleInject(css_248z$5);var PrivateDatePicker = React__default["default"].forwar
         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 = React.useState(null), inputValue = _j[0], setInputValue = _j[1];
     // Effect ----------------------------------------------------------------------------------------------------------
     React.useEffect(function () {
@@ -14772,6 +14767,11 @@ styleInject(css_248z$5);var PrivateDatePicker = React__default["default"].forwar
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [value]);
+    // Memo --------------------------------------------------------------------------------------------------------------
+    var wrapStyle = React.useMemo(function () { return ({
+        display: hidden ? 'none' : fullWidth ? 'block' : 'inline-block',
+        flex: fullWidth ? 1 : undefined,
+    }); }, [hidden, fullWidth]);
     // Function - focus ------------------------------------------------------------------------------------------------
     var focus = React.useCallback(function () {
         var _a;
@@ -14976,10 +14976,7 @@ styleInject(css_248z$5);var PrivateDatePicker = React__default["default"].forwar
     // Render ----------------------------------------------------------------------------------------------------------
     return (React__default["default"].createElement(xDatePickers.LocalizationProvider, { dateAdapter: AdapterDayjs.AdapterDayjs, adapterLocale: dayjsLocale__default["default"] },
         React__default["default"].createElement(material.ClickAwayListener, { mouseEvent: 'onMouseDown', touchEvent: 'onTouchStart', onClickAway: function () { return setOpen(false); } },
-            React__default["default"].createElement("div", { className: classNames$1(className, 'PrivateDatePicker'), style: {
-                    display: fullWidth ? 'block' : 'inline-block',
-                    flex: fullWidth ? 1 : undefined,
-                }, onMouseDown: handleContainerMouseDown, onFocus: handleContainerFocus, onBlur: handleContainerBlur },
+            React__default["default"].createElement("div", { className: classNames$1(className, 'PrivateDatePicker'), style: wrapStyle, onMouseDown: handleContainerMouseDown, onFocus: handleContainerFocus, onBlur: handleContainerBlur },
                 React__default["default"].createElement(PrivateStyledTooltip, { open: open, PopperProps: {
                         modifiers: [
                             {
@@ -15091,7 +15088,7 @@ FormTimePicker.defaultProps = FormTimePickerDefaultProps;var FormDateRangePicker
 styleInject(css_248z$4);var CustomDatePicker = React__default["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(React.useCallback(function () {
+    var value = useAutoUpdateState$1(React.useCallback(function () {
         return initValue ? initValue : [null, null];
     }, [initValue]))[0];
     var _b = React.useState(null), activeMonthValue = _b[0], setActiveMonthValue = _b[1];
@@ -15589,7 +15586,7 @@ var FormDateRangePicker = React__default["default"].forwardRef(function (_a, ref
     // ID --------------------------------------------------------------------------------------------------------------
     var initVariant = _a.variant, initSize = _a.size, initColor = _a.color, initFocused = _a.focused, initLabelShrink = _a.labelShrink, initFullWidth = _a.fullWidth, 
     //--------------------------------------------------------------------------------------------------------------------
-    name = _a.name, initValue = _a.value, startLabel = _a.startLabel, startLabelIcon = _a.startLabelIcon, endLabel = _a.endLabel, endLabelIcon = _a.endLabelIcon, initCalendarCount = _a.calendarCount, initFormat = _a.format, formValueFormat = _a.formValueFormat, allowSingleSelect = _a.allowSingleSelect, required = _a.required, requiredStart = _a.requiredStart, requiredEnd = _a.requiredEnd, readOnly = _a.readOnly, readOnlyStart = _a.readOnlyStart, readOnlyEnd = _a.readOnlyEnd, readOnlyInput = _a.readOnlyInput, initDisabled = _a.disabled, inputWidth = _a.inputWidth, exceptValue = _a.exceptValue, initError = _a.error, initHelperText = _a.helperText, formValueStartNameSuffix = _a.formValueStartNameSuffix, formValueEndNameSuffix = _a.formValueEndNameSuffix, icon = _a.icon, startIcon = _a.startIcon, endIcon = _a.endIcon, startAdornment = _a.startAdornment, startStartAdornment = _a.startStartAdornment, endStartAdornment = _a.endStartAdornment, endAdornment = _a.endAdornment, startEndAdornment = _a.startEndAdornment, endEndAdornment = _a.endEndAdornment, disablePast = _a.disablePast, disableFuture = _a.disableFuture, minDate = _a.minDate, maxDate = _a.maxDate, onChange = _a.onChange, onValidate = _a.onValidate, 
+    name = _a.name, initValue = _a.value, startLabel = _a.startLabel, startLabelIcon = _a.startLabelIcon, endLabel = _a.endLabel, endLabelIcon = _a.endLabelIcon, initCalendarCount = _a.calendarCount, initFormat = _a.format, formValueFormat = _a.formValueFormat, allowSingleSelect = _a.allowSingleSelect, required = _a.required, requiredStart = _a.requiredStart, requiredEnd = _a.requiredEnd, readOnly = _a.readOnly, readOnlyStart = _a.readOnlyStart, readOnlyEnd = _a.readOnlyEnd, readOnlyInput = _a.readOnlyInput, initDisabled = _a.disabled, inputWidth = _a.inputWidth, exceptValue = _a.exceptValue, initError = _a.error, initHelperText = _a.helperText, formValueStartNameSuffix = _a.formValueStartNameSuffix, formValueEndNameSuffix = _a.formValueEndNameSuffix, icon = _a.icon, startIcon = _a.startIcon, endIcon = _a.endIcon, startAdornment = _a.startAdornment, startStartAdornment = _a.startStartAdornment, endStartAdornment = _a.endStartAdornment, endAdornment = _a.endAdornment, startEndAdornment = _a.startEndAdornment, endEndAdornment = _a.endEndAdornment, disablePast = _a.disablePast, disableFuture = _a.disableFuture, minDate = _a.minDate, maxDate = _a.maxDate, hidden = _a.hidden, onChange = _a.onChange, onValidate = _a.onValidate, 
     // -------------------------------------------------------------------------------------------------------------------
     className = _a.className;
     var id = React.useId();
@@ -15612,11 +15609,11 @@ var FormDateRangePicker = React__default["default"].forwardRef(function (_a, ref
     var endInputDatePickerErrorRef = React.useRef(null);
     var openValueRef = React.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 = React.useState(false), startError = _d[0], setStartError = _d[1];
     var _e = React.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 = React.useMemo(function () { return initFormat || DEFAULT_FORMAT; }, [initFormat]);
     // Function - getFinalValue ----------------------------------------------------------------------------------------
@@ -15732,10 +15729,10 @@ var FormDateRangePicker = React__default["default"].forwardRef(function (_a, ref
     // State -----------------------------------------------------------------------------------------------------------
     var _h = React.useState(false), open = _h[0], setOpen = _h[1];
     var _j = React.useState('start'), selectType = _j[0], setSelectType = _j[1];
-    var _k = useAutoUpdateLayoutState(React.useCallback(function () {
+    var _k = useAutoUpdateState$1(React.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 = React.useState(function () {
         var now = dayjs__default["default"]();
         return [now, now.add(1, 'month'), now.add(2, 'month')];
@@ -15806,6 +15803,11 @@ var FormDateRangePicker = React__default["default"].forwardRef(function (_a, ref
             }
         }
     }, [open]);
+    // Memo --------------------------------------------------------------------------------------------------------------
+    var wrapStyle = React.useMemo(function () { return ({
+        display: hidden ? 'none' : fullWidth ? 'block' : 'inline-block',
+        flex: fullWidth ? 1 : undefined,
+    }); }, [hidden, fullWidth]);
     // Event Handler ---------------------------------------------------------------------------------------------------
     var handleChange = React.useCallback(function (newValue) {
         setValue(newValue);
@@ -16078,10 +16080,7 @@ var FormDateRangePicker = React__default["default"].forwardRef(function (_a, ref
     // Render ----------------------------------------------------------------------------------------------------------
     return (React__default["default"].createElement(xDatePickers.LocalizationProvider, { dateAdapter: AdapterDayjs.AdapterDayjs, adapterLocale: dayjsLocale__default["default"] },
         React__default["default"].createElement(material.ClickAwayListener, { mouseEvent: 'onMouseDown', touchEvent: 'onTouchStart', onClickAway: function () { return setOpen(false); } },
-            React__default["default"].createElement("div", { className: classNames$1(className, 'FormDateRangePicker'), style: {
-                    display: fullWidth ? 'block' : 'inline-block',
-                    flex: fullWidth ? 1 : undefined,
-                }, onMouseDown: handleContainerMouseDown, onFocus: handleContainerFocus, onBlur: handleContainerBlur },
+            React__default["default"].createElement("div", { className: classNames$1(className, 'FormDateRangePicker'), style: wrapStyle, onMouseDown: handleContainerMouseDown, onFocus: handleContainerFocus, onBlur: handleContainerBlur },
                 React__default["default"].createElement(PrivateStyledTooltip, { open: open, PopperProps: {
                         modifiers: [
                             {
@@ -16157,7 +16156,7 @@ styleInject(css_248z$1);var FormFile = React__default["default"].forwardRef(func
     // ID --------------------------------------------------------------------------------------------------------------
     var initVariant = _a.variant, initSize = _a.size, initColor = _a.color, initFocused = _a.focused, initLabelShrink = _a.labelShrink, initFullWidth = _a.fullWidth, 
     //----------------------------------------------------------------------------------------------------------------
-    accept = _a.accept, hideUrl = _a.hideUrl, hideLink = _a.hideLink, maxFileSize = _a.maxFileSize, preview = _a.preview, onFile = _a.onFile, onLink = _a.onLink, 
+    accept = _a.accept, hideUrl = _a.hideUrl, hideLink = _a.hideLink, maxFileSize = _a.maxFileSize, preview = _a.preview, hidden = _a.hidden, onFile = _a.onFile, onLink = _a.onLink, 
     //----------------------------------------------------------------------------------------------------------------
     name = _a.name, labelIcon = _a.labelIcon, initLabel = _a.label, required = _a.required, initDisabled = _a.disabled, initError = _a.error, initHelperText = _a.helperText, initValue = _a.value, exceptValue = _a.exceptValue, onChange = _a.onChange, onValidate = _a.onValidate, 
     //----------------------------------------------------------------------------------------------------------------
@@ -16176,7 +16175,7 @@ styleInject(css_248z$1);var FormFile = React__default["default"].forwardRef(func
     var textFieldRef = React.useRef(null);
     var fileUploadBtnRef = React.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 = React.useState('')[0];
     useFirstSkipEffect$1(function () {
         if (error)
@@ -16186,9 +16185,9 @@ styleInject(css_248z$1);var FormFile = React__default["default"].forwardRef(func
         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 = React.useState(false), isOpenLinkDialog = _g[0], setIsOpenLinkDialog = _g[1];
     var _h = React.useState({ open: false }), alertDialogProps = _h[0], setAlertDialogProps = _h[1];
     // Memo --------------------------------------------------------------------------------------------------------------
@@ -16382,7 +16381,7 @@ styleInject(css_248z$1);var FormFile = React__default["default"].forwardRef(func
         }
     }, [name, onLink, onValueChangeByUser, setValue]);
     // Render ----------------------------------------------------------------------------------------------------------
-    return (React__default["default"].createElement(FormItemBase, { variant: variant, size: size, color: color, focused: focused, className: classNames$1(className, 'FormValueItem', 'FormFile', "variant-".concat(variant), "size-".concat(size), !!initLabel && 'with-label', !!fullWidth && 'full-width', !!hideUrl && 'hide-file-name', !!hideLink && 'hide-link', notEmpty(value) && 'with-value'), labelIcon: hideUrl ? labelIcon : undefined, label: hideUrl ? initLabel : undefined, error: error, required: required, fullWidth: fullWidth, helperText: React__default["default"].createElement("div", null,
+    return (React__default["default"].createElement(FormItemBase, { variant: variant, size: size, color: color, focused: focused, className: classNames$1(className, 'FormValueItem', 'FormFile', "variant-".concat(variant), "size-".concat(size), !!initLabel && 'with-label', !!fullWidth && 'full-width', !!hideUrl && 'hide-file-name', !!hideLink && 'hide-link', notEmpty(value) && 'with-value'), labelIcon: hideUrl ? labelIcon : undefined, label: hideUrl ? initLabel : undefined, error: error, required: required, fullWidth: fullWidth, hidden: hidden, helperText: React__default["default"].createElement("div", null,
             preview,
             React__default["default"].createElement("div", null, helperText)), hideLabel: !hideUrl, helperTextProps: {
             style: {
@@ -16429,7 +16428,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["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 = React.useState(), previewNode = _c[0], setPreviewNode = _c[1];
     var _d = React.useState({
         open: false,