@pdg/react-form 1.0.21 → 1.0.23

package/dist/@private/PrivateDatePicker/PrivateDatePicker.types.d.ts

@@ -21,6 +21,7 @@ export interface PrivateDatePickerProps extends CommonSxProps, Partial<Omit<Desk
     endAdornment?: ReactNode;
     align?: 'left' | 'center' | 'right';
     readOnlyInput?: boolean;
+    hidden?: boolean;
     onChange?(value: PrivateDatePickerValue): void;
     onValidate?(value: PrivateDatePickerValue): boolean | string;
 }

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

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

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

@@ -7,6 +7,7 @@ export interface FormCheckboxProps extends CommonSxProps, Omit<CheckboxProps, 'c
     text?: ReactNode;
     inputRef?: RefObject<HTMLInputElement>;
     action?: RefObject<ButtonBaseActions>;
+    hidden?: boolean;
     onChange?(checked: boolean): void;
 }
 export declare const FormCheckboxDefaultProps: Pick<FormCheckboxProps, 'checked' | 'value' | 'uncheckedValue'>;

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

@@ -40,6 +40,7 @@ export interface FormDateRangePickerProps extends CommonSxProps, Omit<FormValueI
     disableFuture?: boolean;
     minDate?: Dayjs;
     maxDate?: Dayjs;
+    hidden?: boolean;
     onChange?(value: FormDateRangePickerValue): void;
     onValidate?(value: FormDateRangePickerValue): boolean | string;
 }

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

@@ -8,6 +8,7 @@ export interface FormFileProps extends CommonSxProps, Omit<FormValueItemProps, '
     labelShrink?: boolean;
     maxFileSize?: number;
     preview?: ReactNode;
+    hidden?: boolean;
     onFile?(file: File): Promise<string>;
     onLink?(url: string): Promise<string>;
 }

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

@@ -16,4 +16,5 @@ export interface FormItemBaseProps extends CommonSxProps, PartialPick<FormContex
     helperTextProps?: FormHelperTextProps;
     error?: boolean;
     hideLabel?: boolean;
+    hidden?: boolean;
 }

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

@@ -14,6 +14,7 @@ export interface FormRadioGroupProps extends CommonSxProps, Omit<FormValueItemPr
     inline?: boolean;
     loading?: boolean;
     nowrap?: boolean;
+    hidden?: boolean;
     onLoadItems?(): Promise<FormRadioGroupItem[]>;
     onValue?(value: RadioGroupProps['value']): RadioGroupProps['value'];
 }

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

@@ -7,6 +7,7 @@ export interface FormRatingProps extends CommonSxProps, PartialPick<RatingProps,
     required?: boolean;
     icon?: string;
     emptyIcon?: string;
+    hidden?: boolean;
     onChange?(value: number): void;
     onValue?(value: number): number;
 }

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

@@ -3,6 +3,7 @@ export interface FormTextEditorProps extends CommonSxProps, Omit<FormValueItemPr
     required?: boolean;
     menubar?: boolean;
     height?: number;
+    hidden?: boolean;
     onImageUpload?(blob: Blob, success: (url: string) => void, failure: (err: string) => void, progress?: (percent: number) => void): void;
 }
 export declare const FormTextEditorDefaultProps: Pick<FormTextEditorProps, 'menubar' | 'height'>;

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

@@ -19,6 +19,7 @@ export interface FormToggleButtonGroupProps extends CommonSxProps, Omit<FormValu
     formValueSeparator?: string;
     formValueSort?: boolean;
     loading?: boolean;
+    hidden?: boolean;
     onLoadItems?: () => Promise<FormToggleButtonGroupItem[]>;
     onValue?: (value: FormToggleButtonGroupValue) => FormToggleButtonGroupValue;
 }

package/dist/FormItemTextFieldBase/FormTextField/FormTextField.d.ts

@@ -11,6 +11,7 @@ declare const FormTextField: React.ForwardRefExoticComponent<Omit<import("@mui/m
     startAdornment?: React.ReactNode;
     endAdornment?: React.ReactNode;
     noFormValueItem?: boolean | undefined;
+    hidden?: boolean | undefined;
     onValue?(value: any): any;
 } & React.RefAttributes<FormTextFieldCommands>>;
 export default FormTextField;

package/dist/FormItemTextFieldBase/FormTextField/FormTextField.types.d.ts

@@ -13,6 +13,7 @@ export declare type FormTextFieldProps = Omit<TextFieldProps, 'ref' | 'name' | '
     startAdornment?: ReactNode;
     endAdornment?: ReactNode;
     noFormValueItem?: boolean;
+    hidden?: boolean;
     onValue?(value: FormItemValue): FormItemValue;
 };
 export declare const FormTextFieldDefaultProps: {};

package/dist/index.esm.js

@@ -2042,13 +2042,13 @@ styleInject(css_248z$j);var FormTextField = React__default.forwardRef(function (
     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, tabIndex = _a.tabIndex, 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", "tabIndex", "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 = useId();
     // Ref -------------------------------------------------------------------------------------------------------------
     var inputRef = useRef(null);
@@ -2080,23 +2080,29 @@ styleInject(css_248z$j);var FormTextField = React__default.forwardRef(function (
         if (readOnly != null || maxLength != null) {
             var finalInputProps = __assign$4(__assign$4({}, initInputProps), { readOnly: readOnly, maxLength: maxLength });
             if (readOnly) {
+                finalInputProps.tabIndex = -1;
                 finalInputProps.className = classNames$1(finalInputProps.className, 'Mui-disabled');
             }
+            else {
+                finalInputProps.tabIndex = tabIndex;
+            }
             return finalInputProps;
         }
         else {
             return initInputProps;
         }
-    }, [initInputProps, readOnly, maxLength]);
+    }, [initInputProps, readOnly, tabIndex, maxLength]);
     // Memo - style ----------------------------------------------------------------------------------------------------
     var style = 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 = useMemo(function () {
         return labelIcon ? (React__default.createElement(React__default.Fragment, null,
@@ -2510,7 +2516,7 @@ styleInject(css_248z$h);var FormTag = React__default.forwardRef(function (_a, re
             onValueChangeByUser: function () { }, 
             // eslint-disable-next-line
             onRequestSearchSubmit: function () { } }, otherFormState) },
-        React__default.createElement(Autocomplete, { options: [], multiple: true, freeSolo: true, value: value, disableClearable: true, disabled: disabled, renderTags: handleRenderTags, inputValue: inputValue, style: { display: fullWidth ? 'block' : 'inline-block', width: fullWidth ? '100%' : undefined }, renderInput: function (params) {
+        React__default.createElement(Autocomplete, { options: [], multiple: true, freeSolo: true, value: value, readOnly: readOnly, disableClearable: true, disabled: disabled, renderTags: handleRenderTags, inputValue: inputValue, style: { display: fullWidth ? 'block' : 'inline-block', width: fullWidth ? '100%' : undefined }, renderInput: function (params) {
                 var _a;
                 var renderProps = __assign$4({}, props);
                 renderProps.InputLabelProps = __assign$4(__assign$4({}, renderProps.InputLabelProps), { htmlFor: params.InputLabelProps.htmlFor, id: params.InputLabelProps.id });
@@ -2523,6 +2529,9 @@ styleInject(css_248z$h);var FormTag = React__default.forwardRef(function (_a, re
                 renderProps.inputProps = __assign$4(__assign$4({}, renderProps.inputProps), params.inputProps);
                 renderProps.inputProps.className = classNames$1(renderProps.inputProps.className, 'FormTag-Input');
                 renderProps.inputProps.readOnly = readOnly;
+                if (readOnly) {
+                    renderProps.inputProps.tabIndex = -1;
+                }
                 renderProps.inputProps.maxLength = maxLength;
                 if (readOnly) {
                     renderProps.inputProps.className = classNames$1(renderProps.inputProps.className, 'Mui-disabled');
@@ -4046,7 +4055,7 @@ NumberFormat.defaultProps = defaultProps;var NumberFormatCustom = React__default
 });
 NumberFormatCustom.displayName = 'NumberFormatCustom';var FormNumberDefaultProps = __assign$4({}, FormTextDefaultProps);var FormNumber = React__default.forwardRef(function (_a, ref) {
     // Memo --------------------------------------------------------------------------------------------------------------
-    var className = _a.className, allowLeadingZeros = _a.allowLeadingZeros, allowNegative = _a.allowNegative, thousandSeparator = _a.thousandSeparator, allowDecimal = _a.allowDecimal, decimalScale = _a.decimalScale, prefix = _a.prefix, suffix = _a.suffix, readOnly = _a.readOnly, initMuiInputProps = _a.InputProps, props = __rest$2(_a, ["className", "allowLeadingZeros", "allowNegative", "thousandSeparator", "allowDecimal", "decimalScale", "prefix", "suffix", "readOnly", "InputProps"]);
+    var className = _a.className, allowLeadingZeros = _a.allowLeadingZeros, allowNegative = _a.allowNegative, thousandSeparator = _a.thousandSeparator, allowDecimal = _a.allowDecimal, decimalScale = _a.decimalScale, prefix = _a.prefix, suffix = _a.suffix, readOnly = _a.readOnly, tabIndex = _a.tabIndex, initMuiInputProps = _a.InputProps, props = __rest$2(_a, ["className", "allowLeadingZeros", "allowNegative", "thousandSeparator", "allowDecimal", "decimalScale", "prefix", "suffix", "readOnly", "tabIndex", "InputProps"]);
     var muiInputProps = useMemo(function () {
         var inputProps = {
             allowLeadingZeros: allowLeadingZeros,
@@ -4055,6 +4064,7 @@ NumberFormatCustom.displayName = 'NumberFormatCustom';var FormNumberDefaultProps
             prefix: prefix,
             suffix: suffix,
             readOnly: readOnly,
+            tabIndex: readOnly ? -1 : tabIndex,
         };
         if (allowDecimal) {
             if (decimalScale) {
@@ -4073,6 +4083,7 @@ NumberFormatCustom.displayName = 'NumberFormatCustom';var FormNumberDefaultProps
         initMuiInputProps,
         prefix,
         readOnly,
+        tabIndex,
         suffix,
         thousandSeparator,
     ]);
@@ -4351,7 +4362,7 @@ styleInject(css_248z$c);var FormItemBase = React__default.forwardRef(function (_
     // 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;
@@ -4363,14 +4374,14 @@ styleInject(css_248z$c);var FormItemBase = React__default.forwardRef(function (_
     // Memo --------------------------------------------------------------------------------------------------------------
     var wrapStyle = 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 = useState(0), inputHeight = _c[0], setInputHeight = _c[1];
     var inputResizeDetectorRef = useResizeDetector({
@@ -4456,9 +4467,9 @@ FormItemBase.displayName = 'FormItemBase';var FormCheckbox = React__default.forw
     // 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 = 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;
@@ -4620,7 +4631,7 @@ FormItemBase.displayName = 'FormItemBase';var FormCheckbox = React__default.forw
         }
     }, [readOnly, setChecked, onValueChangeByUser, name, onRequestSearchSubmit]);
     // Render ----------------------------------------------------------------------------------------------------------
-    return (React__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.createElement(FormControlLabel, { ref: resizeDetectorRef, control: React__default.createElement(Checkbox, __assign$4({ name: name, color: color, size: size, inputRef: initInputRef ? initInputRef : inputRef, action: initAction ? initAction : actionRef, checked: !!checked, checkedIcon: React__default.createElement(CheckBox, { color: error ? 'error' : undefined }), icon: React__default.createElement(CheckBoxOutlineBlank, { color: error ? 'error' : undefined }), onChange: handleChange, disabled: disabled || readOnly }, props)), label: React__default.createElement(Typography, { color: error ? 'error' : undefined, whiteSpace: 'nowrap' }, text) }) }));
+    return (React__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.createElement(FormControlLabel, { ref: resizeDetectorRef, control: React__default.createElement(Checkbox, __assign$4({ name: name, color: color, size: size, inputRef: initInputRef ? initInputRef : inputRef, action: initAction ? initAction : actionRef, checked: !!checked, checkedIcon: React__default.createElement(CheckBox, { color: error ? 'error' : undefined }), icon: React__default.createElement(CheckBoxOutlineBlank, { color: error ? 'error' : undefined }), onChange: handleChange, disabled: disabled || readOnly }, props)), label: React__default.createElement(Typography, { color: error ? 'error' : undefined, whiteSpace: 'nowrap' }, text) }) }));
 });
 FormCheckbox.displayName = 'FormCheckbox';
 FormCheckbox.defaultProps = FormCheckboxDefaultProps;var FormRadioGroupDefaultProps = {
@@ -4628,13 +4639,13 @@ FormCheckbox.defaultProps = FormCheckboxDefaultProps;var FormRadioGroupDefaultPr
 };var PADDING_LEFT = 3;
 var FormRadioGroup = React__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 = 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;
@@ -4899,7 +4910,7 @@ var FormRadioGroup = React__default.forwardRef(function (_a, ref) {
         }
     }, [readOnly, items, getFinalValue, value, setValue, onValueChangeByUser, name, onRequestSearchSubmit]);
     // Render ----------------------------------------------------------------------------------------------------------
-    return (React__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.createElement(React__default.Fragment, null,
+    return (React__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.createElement(React__default.Fragment, null,
             !fullWidth && !isOnGetItemLoading && !loading && items && (React__default.createElement("div", { ref: resizeWidthDetectorRef, style: {
                     display: 'grid',
                     position: 'absolute',
@@ -4935,7 +4946,7 @@ styleInject(css_248z$b);var FormToggleButtonGroup = React__default.forwardRef(fu
     // 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, 
     //----------------------------------------------------------------------------------------------------------------
@@ -5272,7 +5283,7 @@ styleInject(css_248z$b);var FormToggleButtonGroup = React__default.forwardRef(fu
     if (focused) {
         formControlBaseProps.focused = true;
     }
-    return (React__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.createElement("div", { style: { opacity: 0.54 }, ref: resizeHeightDetectorRef },
+    return (React__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.createElement("div", { style: { opacity: 0.54 }, ref: resizeHeightDetectorRef },
             React__default.createElement(CircularProgress, { size: 16, color: 'inherit' }))) : (React__default.createElement(React__default.Fragment, null,
             !fullWidth && !isOnGetItemLoading && !loading && items && (React__default.createElement("div", { ref: resizeWidthDetectorRef, style: {
                     display: 'grid',
@@ -5314,7 +5325,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, 
     //----------------------------------------------------------------------------------------------------------------
@@ -5474,7 +5485,7 @@ FormToggleButtonGroup.defaultProps = FormToggleButtonGroupDefaultProps;var FormR
         }
     }, [readOnly, getFinalValue, setValue, onValueChangeByUser, name, onRequestSearchSubmit]);
     // Render ----------------------------------------------------------------------------------------------------------
-    return (React__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.createElement(Rating, { ref: resizeDetectorRef, size: size === 'medium' ? 'large' : 'medium', name: name, precision: precision, highlightSelectedOnly: highlightSelectedOnly, value: value, disabled: disabled || readOnly, max: max, icon: React__default.createElement(FormIcon, { color: color, fontSize: 'inherit' }, icon ? icon : 'Star'), emptyIcon: React__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.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.createElement(Rating, { ref: resizeDetectorRef, size: size === 'medium' ? 'large' : 'medium', name: name, precision: precision, highlightSelectedOnly: highlightSelectedOnly, value: value, disabled: disabled || readOnly, max: max, icon: React__default.createElement(FormIcon, { color: color, fontSize: 'inherit' }, icon ? icon : 'Star'), emptyIcon: React__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
@@ -7207,7 +7218,7 @@ styleInject(css_248z$a);var FormTextEditor = React__default.forwardRef(function
     // 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, 
     //----------------------------------------------------------------------------------------------------------------
@@ -7361,7 +7372,7 @@ styleInject(css_248z$a);var FormTextEditor = React__default.forwardRef(function
             onImageUpload(blobInfo.blob(), success, failure, progress);
     }, [onImageUpload]);
     // Render ----------------------------------------------------------------------------------------------------------
-    return (React__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.createElement(React__default.Fragment, null,
+    return (React__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.createElement(React__default.Fragment, null,
             !initialized ? React__default.createElement(Skeleton, { variant: 'rectangular', width: '100%', height: height }) : null,
             React__default.createElement(Editor, { ref: editorRef, value: value, disabled: readOnly || disabled, init: {
                     height: height,
@@ -7394,7 +7405,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, 
     //----------------------------------------------------------------------------------------------------------------
@@ -7436,11 +7447,14 @@ FormTextEditor.defaultProps = FormTextEditorDefaultProps;var FormAutocompleteDef
     }, [items]);
     var style = 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 = useCallback(function (value) {
         var finalValue = value;
@@ -7824,7 +7838,7 @@ FormTextEditor.defaultProps = FormTextEditorDefaultProps;var FormAutocompleteDef
             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,
                     loading || isOnGetItemLoading ? React__default.createElement(CircularProgress$1, { color: 'inherit', size: 20 }) : null,
-                    params.InputProps.endAdornment)) }) }))); } }));
+                    params.InputProps.endAdornment)) }), inputProps: readOnly || disabled ? __assign$4(__assign$4({}, params.inputProps), { tabIndex: -1 }) : params.inputProps }))); } }));
 });
 FormAutocomplete.displayName = 'FormAutocomplete';
 FormAutocomplete.defaultProps = FormAutocompleteDefaultProps;var FormDatePickerDefaultProps = {};var __assign = function() {
@@ -14633,9 +14647,9 @@ styleInject(css_248z$5);var PrivateDatePicker = React__default.forwardRef(functi
     // 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 = useId();
     // Ref -------------------------------------------------------------------------------------------------------------
     var privateStaticDatePickerRef = useRef(null);
@@ -14762,6 +14776,11 @@ styleInject(css_248z$5);var PrivateDatePicker = React__default.forwardRef(functi
         }
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [value]);
+    // Memo --------------------------------------------------------------------------------------------------------------
+    var wrapStyle = useMemo(function () { return ({
+        display: hidden ? 'none' : fullWidth ? 'block' : 'inline-block',
+        flex: fullWidth ? 1 : undefined,
+    }); }, [hidden, fullWidth]);
     // Function - focus ------------------------------------------------------------------------------------------------
     var focus = useCallback(function () {
         var _a;
@@ -14966,11 +14985,8 @@ styleInject(css_248z$5);var PrivateDatePicker = React__default.forwardRef(functi
     // Render ----------------------------------------------------------------------------------------------------------
     return (React__default.createElement(LocalizationProvider, { dateAdapter: AdapterDayjs, adapterLocale: dayjsLocale },
         React__default.createElement(ClickAwayListener, { mouseEvent: 'onMouseDown', touchEvent: 'onTouchStart', onClickAway: function () { return setOpen(false); } },
-            React__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.createElement(PrivateStyledTooltip, { open: open, PopperProps: {
+            React__default.createElement("div", { className: classNames$1(className, 'PrivateDatePicker'), style: wrapStyle, onMouseDown: handleContainerMouseDown, onFocus: handleContainerFocus, onBlur: handleContainerBlur },
+                React__default.createElement(PrivateStyledTooltip, { open: disabled || readOnly ? false : open, PopperProps: {
                         modifiers: [
                             {
                                 name: 'offset',
@@ -14984,7 +15000,11 @@ styleInject(css_248z$5);var PrivateDatePicker = React__default.forwardRef(functi
                         React__default.createElement(DesktopDatePicker, __assign$4({ value: inputValue, label: label, open: false, inputFormat: format, disabled: disabled, readOnly: readOnly, minDate: minDate, maxDate: maxDate, disablePast: disablePast, disableFuture: disableFuture, onClose: function () { return setOpen(false); }, onError: function (reason) { return (datePickerErrorRef.current = reason); }, onChange: function (newValue, keyboardInputValue) { return handleChange('date', newValue, keyboardInputValue); }, renderInput: function (_a) {
                                 var initClassName = _a.className, initFocused = _a.focused, initError = _a.error, initStyle = _a.style, initInputProps = _a.inputProps, initMuiInputProps = _a.InputProps, InputLabelProps = _a.InputLabelProps, params = __rest$2(_a, ["className", "focused", "error", "style", "inputProps", "InputProps", "InputLabelProps"]);
                                 var textFieldInputLabelProps = __assign$4(__assign$4({}, InputLabelProps), { shrink: labelShrink ? true : InputLabelProps === null || InputLabelProps === void 0 ? void 0 : InputLabelProps.shrink });
-                                var inputProps = __assign$4(__assign$4({}, initInputProps), { readOnly: (initInputProps === null || initInputProps === void 0 ? void 0 : initInputProps.readOnly) || readOnlyInput });
+                                var readOnly = (initInputProps === null || initInputProps === void 0 ? void 0 : initInputProps.readOnly) || readOnlyInput;
+                                var inputProps = __assign$4(__assign$4({}, initInputProps), { readOnly: readOnly });
+                                if (readOnly) {
+                                    inputProps.tabIndex = -1;
+                                }
                                 var muiInputProps = __assign$4(__assign$4({}, initMuiInputProps), { endAdornment: undefined });
                                 if (startAdornment || icon || muiInputProps.startAdornment) {
                                     muiInputProps.startAdornment = (React__default.createElement(React__default.Fragment, null,
@@ -15538,7 +15558,7 @@ styleInject(css_248z$2);var InputDatePicker = function (_a) {
     }, [labelShrink]);
     // Render ----------------------------------------------------------------------------------------------------------
     return (React__default.createElement(DesktopDatePicker, __assign$4({}, props, { className: classNames$1(className, 'InputDatePicker', "align-".concat(align)), open: false, value: value, inputFormat: format, disabled: disabled, readOnly: readOnly || readOnlyInput, renderInput: function (_a) {
-            var inputStyle = _a.style, inputInputRef = _a.inputRef, inputInputProps = _a.InputProps, inputError = _a.error, inputOnFocus = _a.onFocus, inputOnBlur = _a.onBlur, params = __rest$2(_a, ["style", "inputRef", "InputProps", "error", "onFocus", "onBlur"]);
+            var inputStyle = _a.style, inputInputRef = _a.inputRef, inputInputProps = _a.InputProps, initInputProps = _a.inputProps, inputError = _a.error, inputOnFocus = _a.onFocus, inputOnBlur = _a.onBlur, params = __rest$2(_a, ["style", "inputRef", "InputProps", "inputProps", "error", "onFocus", "onBlur"]);
             var muiInputProps = __assign$4(__assign$4({}, inputInputProps), { endAdornment: undefined });
             if (startAdornment || icon || muiInputProps.startAdornment) {
                 muiInputProps.startAdornment = (React__default.createElement(React__default.Fragment, null,
@@ -15550,6 +15570,10 @@ styleInject(css_248z$2);var InputDatePicker = function (_a) {
             if (endAdornment) {
                 muiInputProps.endAdornment = (React__default.createElement(React__default.Fragment, null, endAdornment && React__default.createElement(InputAdornment, { position: 'end' }, endAdornment)));
             }
+            var inputProps = __assign$4({}, initInputProps);
+            if (readOnly) {
+                inputProps.tabIndex = -1;
+            }
             return (React__default.createElement(TextField, __assign$4({}, params, { style: __assign$4(__assign$4({}, inputStyle), style), variant: variant, size: size, color: color, focused: focused, fullWidth: fullWidth, required: required, name: id, label: label, error: error || inputError, inputRef: function (ref) {
                     if (inputInputRef) {
                         if (typeof inputInputRef === 'function') {
@@ -15559,7 +15583,7 @@ styleInject(css_248z$2);var InputDatePicker = function (_a) {
                     if (inputRef) {
                         inputRef.current = ref;
                     }
-                }, InputProps: muiInputProps, InputLabelProps: inputLabelProps, onFocus: function (e) {
+                }, InputProps: muiInputProps, InputLabelProps: inputLabelProps, inputProps: inputProps, onFocus: function (e) {
                     if (inputOnFocus)
                         inputOnFocus(e);
                     if (onFocus)
@@ -15579,7 +15603,7 @@ var FormDateRangePicker = React__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 = useId();
@@ -15796,6 +15820,11 @@ var FormDateRangePicker = React__default.forwardRef(function (_a, ref) {
             }
         }
     }, [open]);
+    // Memo --------------------------------------------------------------------------------------------------------------
+    var wrapStyle = useMemo(function () { return ({
+        display: hidden ? 'none' : fullWidth ? 'block' : 'inline-block',
+        flex: fullWidth ? 1 : undefined,
+    }); }, [hidden, fullWidth]);
     // Event Handler ---------------------------------------------------------------------------------------------------
     var handleChange = useCallback(function (newValue) {
         setValue(newValue);
@@ -16068,10 +16097,7 @@ var FormDateRangePicker = React__default.forwardRef(function (_a, ref) {
     // Render ----------------------------------------------------------------------------------------------------------
     return (React__default.createElement(LocalizationProvider, { dateAdapter: AdapterDayjs, adapterLocale: dayjsLocale },
         React__default.createElement(ClickAwayListener, { mouseEvent: 'onMouseDown', touchEvent: 'onTouchStart', onClickAway: function () { return setOpen(false); } },
-            React__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.createElement("div", { className: classNames$1(className, 'FormDateRangePicker'), style: wrapStyle, onMouseDown: handleContainerMouseDown, onFocus: handleContainerFocus, onBlur: handleContainerBlur },
                 React__default.createElement(PrivateStyledTooltip, { open: open, PopperProps: {
                         modifiers: [
                             {
@@ -16147,7 +16173,7 @@ styleInject(css_248z$1);var FormFile = React__default.forwardRef(function (_a, r
     // 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, 
     //----------------------------------------------------------------------------------------------------------------
@@ -16372,7 +16398,7 @@ styleInject(css_248z$1);var FormFile = React__default.forwardRef(function (_a, r
         }
     }, [name, onLink, onValueChangeByUser, setValue]);
     // Render ----------------------------------------------------------------------------------------------------------
-    return (React__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.createElement("div", null,
+    return (React__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.createElement("div", null,
             preview,
             React__default.createElement("div", null, helperText)), hideLabel: !hideUrl, helperTextProps: {
             style: {
@@ -16381,7 +16407,7 @@ styleInject(css_248z$1);var FormFile = React__default.forwardRef(function (_a, r
             },
         }, style: { width: fullWidth ? '100%' : undefined }, control: React__default.createElement("div", { className: 'control-wrap' },
             !hideUrl && (React__default.createElement("div", { className: 'file-name-wrap' },
-                React__default.createElement(TextField, { inputRef: textFieldRef, className: 'file-name', variant: variant, label: label, size: size, required: required, value: value || '', focused: focused, disabled: disabled, fullWidth: true, error: error, InputLabelProps: labelShrink ? { shrink: labelShrink } : undefined, inputProps: { readOnly: true }, InputProps: {
+                React__default.createElement(TextField, { inputRef: textFieldRef, className: 'file-name', variant: variant, label: label, size: size, required: required, value: value || '', focused: focused, disabled: disabled, fullWidth: true, error: error, InputLabelProps: labelShrink ? { shrink: labelShrink } : undefined, inputProps: { readOnly: true, tabIndex: -1 }, InputProps: {
                         endAdornment: (React__default.createElement(InputAdornment, { position: 'end' },
                             React__default.createElement("div", { className: 'input-file-wrap' },
                                 React__default.createElement(Button, { variant: 'text', className: 'input-file-btn form-file-btn', color: error ? 'error' : color, disabled: disabled, ref: fileUploadBtnRef },