@pdg/react-form 1.0.130 → 1.0.132

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

@@ -12,6 +12,7 @@ export interface FormProps extends CommonSxProps, PartialPick<FormControlProps,
     fullHeight?: boolean;
     formColGap?: number;
     disabled?: boolean;
+    submitWhenReturnKey?: boolean;
     onSubmit?(data: FormValueMap): void;
     onInvalid?(invalidItems: FormInvalidItems): void;
     onValueChange?(name: string, value: any): void;

package/dist/FormContext/FormContext.types.d.ts

@@ -4,10 +4,12 @@ export interface FormContextValue<T = any, AllowUndefinedValue extends boolean =
     id: string;
     fullHeight?: boolean;
     disabled?: boolean;
+    submitWhenReturnKey?: boolean;
     onAddValueItem(id: string, commands: FormValueItemCommands<T, AllowUndefinedValue>): void;
     onRemoveValueItem(id: string): void;
     onValueChange(name: string, value: T): void;
     onValueChangeByUser(name: string, value: T): void;
+    onRequestSubmit(name: string, value: T): void;
     onRequestSearchSubmit(name: string, value: T): void;
     /** FormRow */
     formColAutoXs?: number;

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

@@ -15,5 +15,6 @@ export type FormTextFieldProps<T = FormTextFieldValue, AllowUndefinedValue exten
     endAdornment?: ReactNode;
     noFormValueItem?: boolean;
     disableReturnKey?: boolean;
+    submitWhenReturnKey?: boolean;
     onValue?(value: V): V;
 };

package/dist/index.esm.js

@@ -99,6 +99,8 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
     // eslint-disable-next-line
     onValueChangeByUser: function () { },
     // eslint-disable-next-line
+    onRequestSubmit: function () { },
+    // eslint-disable-next-line
     onRequestSearchSubmit: function () { },
 };var FormContext = createContext(FormContextDefaultValue);function useFormState() {
     var value = useContext(FormContext);
@@ -232,10 +234,10 @@ var appendFormValueData = function (data, itemCommands) {
     //--------------------------------------------------------------------------------------------------------------------
     _b = _a.variant, 
     //--------------------------------------------------------------------------------------------------------------------
-    initVariant = _b === void 0 ? 'outlined' : _b, _c = _a.size, initSize = _c === void 0 ? 'medium' : _c, _d = _a.color, initColor = _d === void 0 ? 'primary' : _d, _e = _a.spacing, initSpacing = _e === void 0 ? 2 : _e, _f = _a.formColGap, initFormColGap = _f === void 0 ? 1.5 : _f, initFocused = _a.focused, initLabelShrink = _a.labelShrink, initFullWidth = _a.fullWidth, initFullHeight = _a.fullHeight, initDisabled = _a.disabled, 
+    initVariant = _b === void 0 ? 'outlined' : _b, _c = _a.size, initSize = _c === void 0 ? 'medium' : _c, _d = _a.color, initColor = _d === void 0 ? 'primary' : _d, _e = _a.spacing, initSpacing = _e === void 0 ? 2 : _e, _f = _a.formColGap, initFormColGap = _f === void 0 ? 1.5 : _f, initFocused = _a.focused, initLabelShrink = _a.labelShrink, initFullWidth = _a.fullWidth, initFullHeight = _a.fullHeight, initDisabled = _a.disabled, initSubmitWhenReturnKey = _a.submitWhenReturnKey, 
     //----------------------------------------------------------------------------------------------------------------
     initOnSubmit = _a.onSubmit, initOnValid = _a.onInvalid, initOnValueChange = _a.onValueChange, initOnValueChangeByUser = _a.onValueChangeByUser;
-    var _g = useFormState(), formId = _g.id, formVariant = _g.variant, formSize = _g.size, formColor = _g.color, formDisabled = _g.disabled, formSpacing = _g.spacing, formFormColGap = _g.formColGap, formFocused = _g.focused, formLabelShrink = _g.labelShrink, formFullWidth = _g.fullWidth, formFullHeight = _g.fullHeight, formColAutoXs = _g.formColAutoXs, formColWidth = _g.formColWidth, onAddFormCol = _g.onAddFormCol, onRemoveFormCol = _g.onRemoveFormCol, formColXs = _g.formColXs, formColWithLabel = _g.formColWithLabel, formColWithHelperText = _g.formColWithHelperText, formAddValueItem = _g.onAddValueItem, formRemoveValueItem = _g.onRemoveValueItem, formValueChange = _g.onValueChange, formValueChangeByUser = _g.onValueChangeByUser, formRequestSearchSubmit = _g.onRequestSearchSubmit;
+    var _g = useFormState(), formId = _g.id, formVariant = _g.variant, formSize = _g.size, formColor = _g.color, formDisabled = _g.disabled, formSubmitWhenReturnKey = _g.submitWhenReturnKey, formSpacing = _g.spacing, formFormColGap = _g.formColGap, formFocused = _g.focused, formLabelShrink = _g.labelShrink, formFullWidth = _g.fullWidth, formFullHeight = _g.fullHeight, formColAutoXs = _g.formColAutoXs, formColWidth = _g.formColWidth, onAddFormCol = _g.onAddFormCol, onRemoveFormCol = _g.onRemoveFormCol, formColXs = _g.formColXs, formColWithLabel = _g.formColWithLabel, formColWithHelperText = _g.formColWithHelperText, formAddValueItem = _g.onAddValueItem, formRemoveValueItem = _g.onRemoveValueItem, formValueChange = _g.onValueChange, formValueChangeByUser = _g.onValueChangeByUser, formRequestSubmit = _g.onRequestSubmit, formRequestSearchSubmit = _g.onRequestSearchSubmit;
     /********************************************************************************************************************
      * Memo - FormState
      * ******************************************************************************************************************/
@@ -249,6 +251,7 @@ var appendFormValueData = function (data, itemCommands) {
     var fullWidth = ifUndefined(ifUndefined(initFullWidth, formFullWidth), true);
     var fullHeight = ifUndefined(ifUndefined(initFullHeight, formFullHeight), false);
     var disabled = ifUndefined(ifUndefined(initDisabled, formDisabled), false);
+    var submitWhenReturnKey = ifUndefined(ifUndefined(initSubmitWhenReturnKey, formSubmitWhenReturnKey), false);
     /********************************************************************************************************************
      * Ref
      * ******************************************************************************************************************/
@@ -556,6 +559,7 @@ var appendFormValueData = function (data, itemCommands) {
             fullWidth: fullWidth,
             fullHeight: fullHeight,
             disabled: disabled,
+            submitWhenReturnKey: submitWhenReturnKey,
             onAddValueItem: function (id, item) {
                 valueItems.current[id] = item;
                 if (formAddValueItem)
@@ -578,6 +582,12 @@ var appendFormValueData = function (data, itemCommands) {
                 if (formValueChangeByUser)
                     formValueChangeByUser(name, value);
             },
+            onRequestSubmit: function (name, value) {
+                if (!disabled)
+                    submit();
+                if (formRequestSubmit)
+                    formRequestSubmit(name, value);
+            },
             onRequestSearchSubmit: formRequestSearchSubmit,
             formColAutoXs: formColAutoXs,
             formColWidth: formColWidth,
@@ -599,6 +609,7 @@ var appendFormValueData = function (data, itemCommands) {
         fullWidth,
         fullHeight,
         disabled,
+        submitWhenReturnKey,
         formRequestSearchSubmit,
         formColAutoXs,
         formColWidth,
@@ -613,6 +624,8 @@ var appendFormValueData = function (data, itemCommands) {
         formValueChange,
         onValueChangeByUserRef,
         formValueChangeByUser,
+        submit,
+        formRequestSubmit,
     ]);
     /********************************************************************************************************************
      * Render
@@ -1026,7 +1039,7 @@ styleInject(css_248z$l);var FormTextField = React.forwardRef(function (_a, ref)
      * ID
      * ******************************************************************************************************************/
     var _b, _c;
-    var initVariant = _a.variant, initSize = _a.size, initColor = _a.color, initFocused = _a.focused, initLabelShrink = _a.labelShrink, initFullWidth = _a.fullWidth, 
+    var initVariant = _a.variant, initSize = _a.size, initColor = _a.color, initFocused = _a.focused, initLabelShrink = _a.labelShrink, initFullWidth = _a.fullWidth, initSubmitWhenReturnKey = _a.submitWhenReturnKey, 
     //----------------------------------------------------------------------------------------------------------------
     name = _a.name, required = _a.required, initValue = _a.value, initData = _a.data, icon = _a.icon, labelIcon = _a.labelIcon, initLabel = _a.label, initError = _a.error, helperText = _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, initHidden = _a.hidden, disableReturnKey = _a.disableReturnKey, 
     //----------------------------------------------------------------------------------------------------------------
@@ -1034,7 +1047,7 @@ styleInject(css_248z$l);var FormTextField = React.forwardRef(function (_a, ref)
     //----------------------------------------------------------------------------------------------------------------
     className = _a.className, initStyle = _a.style, 
     //----------------------------------------------------------------------------------------------------------------
-    props = __rest(_a, ["variant", "size", "color", "focused", "labelShrink", "fullWidth", "name", "required", "value", "data", "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", "disableReturnKey", "onChange", "onValue", "onValidate", "onBlur", "onKeyDown", "className", "style"]);
+    props = __rest(_a, ["variant", "size", "color", "focused", "labelShrink", "fullWidth", "submitWhenReturnKey", "name", "required", "value", "data", "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", "disableReturnKey", "onChange", "onValue", "onValidate", "onBlur", "onKeyDown", "className", "style"]);
     var id = useId();
     /********************************************************************************************************************
      * Ref
@@ -1043,7 +1056,7 @@ styleInject(css_248z$l);var FormTextField = React.forwardRef(function (_a, ref)
     /********************************************************************************************************************
      * FormState
      * ******************************************************************************************************************/
-    var _d = useFormState(), formVariant = _d.variant, formSize = _d.size, formColor = _d.color, formFocused = _d.focused, formLabelShrink = _d.labelShrink, formFullWidth = _d.fullWidth, formDisabled = _d.disabled, formColWithHelperText = _d.formColWithHelperText, onAddValueItem = _d.onAddValueItem, onRemoveValueItem = _d.onRemoveValueItem, onValueChange = _d.onValueChange, onValueChangeByUser = _d.onValueChangeByUser, onRequestSearchSubmit = _d.onRequestSearchSubmit;
+    var _d = useFormState(), formVariant = _d.variant, formSize = _d.size, formColor = _d.color, formFocused = _d.focused, formLabelShrink = _d.labelShrink, formFullWidth = _d.fullWidth, formDisabled = _d.disabled, formSubmitWhenReturnKey = _d.submitWhenReturnKey, formColWithHelperText = _d.formColWithHelperText, onAddValueItem = _d.onAddValueItem, onRemoveValueItem = _d.onRemoveValueItem, onValueChange = _d.onValueChange, onValueChangeByUser = _d.onValueChangeByUser, onRequestSubmit = _d.onRequestSubmit, onRequestSearchSubmit = _d.onRequestSearchSubmit;
     /********************************************************************************************************************
      * Memo - FormState
      * ******************************************************************************************************************/
@@ -1053,6 +1066,7 @@ styleInject(css_248z$l);var FormTextField = React.forwardRef(function (_a, ref)
     var focused = ifUndefined(initFocused, formFocused);
     var labelShrink = ifUndefined(initLabelShrink, formLabelShrink);
     var fullWidth = ifUndefined(initFullWidth, formFullWidth);
+    var submitWhenReturnKey = ifUndefined(initSubmitWhenReturnKey, formSubmitWhenReturnKey);
     /********************************************************************************************************************
      * State
      * ******************************************************************************************************************/
@@ -1274,11 +1288,25 @@ styleInject(css_248z$l);var FormTextField = React.forwardRef(function (_a, ref)
             !noFormValueItem) {
             e.preventDefault();
             e.stopPropagation();
+            if (submitWhenReturnKey) {
+                onRequestSubmit(name, valueRef.current);
+            }
             onRequestSearchSubmit(name, valueRef.current);
         }
         if (onKeyDown)
             onKeyDown(e);
-    }, [select, multiline, disableReturnKey, noFormValueItem, onKeyDown, onRequestSearchSubmit, name, valueRef]);
+    }, [
+        select,
+        multiline,
+        disableReturnKey,
+        noFormValueItem,
+        onKeyDown,
+        submitWhenReturnKey,
+        onRequestSearchSubmit,
+        name,
+        valueRef,
+        onRequestSubmit,
+    ]);
     /********************************************************************************************************************
      * Variable
      * ******************************************************************************************************************/
@@ -2973,7 +3001,7 @@ var FormRadioGroup = ToForwardRefExoticComponent(AutoTypeForwardRef(function (_a
      * ******************************************************************************************************************/
     var singleHeight = height || (size === 'small' ? 35 : 39);
     var isMultiline = singleHeight <= ifUndefined(realHeight, 0);
-    return (React.createElement(FormItemBase, { focused: focused, ref: baseRef, className: classNames(className, 'FormValueItem', 'FormRadioGroup'), variant: variant, size: size, color: color, labelIcon: labelIcon, label: label, fullWidth: fullWidth, required: required, error: error, helperText: error ? errorHelperText : helperText, helperTextProps: { style: { marginLeft: 2, marginTop: isMultiline ? 20 : 0 } }, style: __assign({ width: width, paddingLeft: PADDING_LEFT }, initStyle), sx: sx, hidden: hidden, autoSize: true, controlHeight: realHeight ? realHeight : singleHeight, controlContainerStyle: {
+    return (React.createElement(FormItemBase, { focused: focused, ref: baseRef, className: classNames(className, 'FormValueItem', 'FormRadioGroup'), variant: variant, size: size, color: color, labelIcon: labelIcon, label: label, fullWidth: fullWidth, required: required, error: error, helperText: error ? errorHelperText : helperText, helperTextProps: { style: { marginLeft: 2, marginTop: isMultiline && notEmpty(label) ? 20 : 0 } }, style: __assign({ width: width, paddingLeft: PADDING_LEFT }, initStyle), sx: sx, hidden: hidden, autoSize: true, controlHeight: realHeight ? realHeight : singleHeight, controlContainerStyle: {
             paddingTop: isMultiline && size === 'medium' ? 4 : undefined,
         }, controlVerticalCenter: !isMultiline, control: React.createElement(React.Fragment, null,
             !fullWidth && !isOnGetItemLoading && !loading && items && (React.createElement("div", { ref: resizeWidthDetectorRef, style: {
@@ -3033,6 +3061,7 @@ styleInject(css_248z$d);var FormToggleButtonGroup = ToForwardRefExoticComponent(
      * ******************************************************************************************************************/
     var refForResizeWidthDetect = useRef(null);
     var refForButtonResizeHeightDetect = useRef(null);
+    var refForButtonsResizeHeightDetect = useRef(null);
     var refForLoadingResizeHeightDetect = useRef(null);
     /********************************************************************************************************************
      * FormState
@@ -3069,6 +3098,7 @@ styleInject(css_248z$d);var FormToggleButtonGroup = ToForwardRefExoticComponent(
      * State - height (ResizeDetector)
      * ******************************************************************************************************************/
     var _g = useState(), height = _g[0], setHeight = _g[1];
+    var _h = useState(), realHeight = _h[0], setRealHeight = _h[1];
     useResizeDetector({
         targetRef: refForButtonResizeHeightDetect,
         handleHeight: true,
@@ -3077,6 +3107,14 @@ styleInject(css_248z$d);var FormToggleButtonGroup = ToForwardRefExoticComponent(
             setHeight((_b = (_a = refForButtonResizeHeightDetect.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) === null || _b === void 0 ? void 0 : _b.height);
         },
     });
+    useResizeDetector({
+        targetRef: refForButtonsResizeHeightDetect,
+        handleHeight: true,
+        onResize: function () {
+            var _a, _b;
+            setRealHeight((_b = (_a = refForButtonsResizeHeightDetect.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) === null || _b === void 0 ? void 0 : _b.height);
+        },
+    });
     useResizeDetector({
         targetRef: refForLoadingResizeHeightDetect,
         handleHeight: true,
@@ -3088,14 +3126,14 @@ styleInject(css_248z$d);var FormToggleButtonGroup = ToForwardRefExoticComponent(
     /********************************************************************************************************************
      * State
      * ******************************************************************************************************************/
-    var _h = useState(false), isOnGetItemLoading = _h[0], setIsOnGetItemLoading = _h[1];
-    var _j = useAutoUpdateState(initError), error = _j[0], setError = _j[1];
-    var _k = useState(), errorHelperText = _k[0], setErrorHelperText = _k[1];
-    var _l = useAutoUpdateRefState(initData), dataRef = _l[0], setData = _l[2];
-    var _m = useAutoUpdateRefState(useMemo(function () { return (initDisabled == null ? formDisabled : initDisabled); }, [initDisabled, formDisabled])), disabledRef = _m[0], disabled = _m[1], setDisabled = _m[2];
-    var _o = useAutoUpdateRefState(initHidden), hiddenRef = _o[0], hidden = _o[1], setHidden = _o[2];
-    var _p = useAutoUpdateRefState(initLoading), loadingRef = _p[0], loading = _p[1], setLoading = _p[2];
-    var _q = useAutoUpdateRefState(initItems), itemsRef = _q[0], items = _q[1], setItems = _q[2];
+    var _j = useState(false), isOnGetItemLoading = _j[0], setIsOnGetItemLoading = _j[1];
+    var _k = useAutoUpdateState(initError), error = _k[0], setError = _k[1];
+    var _l = useState(), errorHelperText = _l[0], setErrorHelperText = _l[1];
+    var _m = useAutoUpdateRefState(initData), dataRef = _m[0], setData = _m[2];
+    var _o = useAutoUpdateRefState(useMemo(function () { return (initDisabled == null ? formDisabled : initDisabled); }, [initDisabled, formDisabled])), disabledRef = _o[0], disabled = _o[1], setDisabled = _o[2];
+    var _p = useAutoUpdateRefState(initHidden), hiddenRef = _p[0], hidden = _p[1], setHidden = _p[2];
+    var _q = useAutoUpdateRefState(initLoading), loadingRef = _q[0], loading = _q[1], setLoading = _q[2];
+    var _r = useAutoUpdateRefState(initItems), itemsRef = _r[0], items = _r[1], setItems = _r[2];
     /********************************************************************************************************************
      * Memo
      * ******************************************************************************************************************/
@@ -3210,7 +3248,7 @@ styleInject(css_248z$d);var FormToggleButtonGroup = ToForwardRefExoticComponent(
         finalValue = onValue ? onValue(finalValue) : finalValue;
         return equal(value, finalValue) ? value : finalValue;
     }, [multiple, formValueSeparator, itemsValues, onValue]);
-    var _r = useAutoUpdateRefState(initValue, getFinalValue), valueRef = _r[0], value = _r[1], setValue = _r[2];
+    var _s = useAutoUpdateRefState(initValue, getFinalValue), valueRef = _s[0], value = _s[1], setValue = _s[2];
     useFirstSkipEffect(function () {
         if (error)
             validate(value);
@@ -3435,7 +3473,9 @@ styleInject(css_248z$d);var FormToggleButtonGroup = ToForwardRefExoticComponent(
         theme.palette.error.main,
         type,
     ]);
-    return (React.createElement(FormItemBase, __assign({}, formControlBaseProps, { className: classNames(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: error ? errorHelperText : helperText, helperTextProps: { style: { marginLeft: 2 } }, style: style, sx: sx, hidden: hidden, autoSize: true, controlHeight: height || 0, controlVerticalCenter: isOnGetItemLoading || loading, control: isOnGetItemLoading || loading ? (React.createElement("div", { style: { opacity: 0.54 }, ref: refForLoadingResizeHeightDetect },
+    var controlHeight = height || 0;
+    var isMultiline = controlHeight <= ifUndefined(realHeight, 0);
+    return (React.createElement(FormItemBase, __assign({}, formControlBaseProps, { className: classNames(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: error ? errorHelperText : helperText, helperTextProps: { style: { marginLeft: 2 } }, style: style, sx: sx, hidden: hidden, autoSize: true, controlHeight: realHeight ? realHeight + (isMultiline ? 13 : 0) : controlHeight, controlVerticalCenter: isMultiline ? false : isOnGetItemLoading || loading, control: isOnGetItemLoading || loading ? (React.createElement("div", { style: { opacity: 0.54 }, ref: refForLoadingResizeHeightDetect },
             React.createElement(CircularProgress, { size: 16, color: 'inherit' }))) : (React.createElement(React.Fragment, null,
             !fullWidth && !isOnGetItemLoading && !loading && items && (React.createElement("div", { ref: refForResizeWidthDetect, style: {
                     display: 'grid',
@@ -3444,7 +3484,7 @@ styleInject(css_248z$d);var FormToggleButtonGroup = ToForwardRefExoticComponent(
                     visibility: 'hidden',
                 } },
                 React.createElement(ToggleButtonGroup, { className: 'ToggleButtonGroup', exclusive: !multiple }, buttons))),
-            React.createElement(ToggleButtonGroup, { className: 'ToggleButtonGroup', exclusive: !multiple, fullWidth: fullWidth, value: value == null ? null : value, onChange: handleChange, style: {
+            React.createElement(ToggleButtonGroup, { ref: refForButtonsResizeHeightDetect, className: 'ToggleButtonGroup', exclusive: !multiple, fullWidth: fullWidth, value: value == null ? null : value, onChange: handleChange, style: {
                     width: !fullWidth && formColWidth && typeof width === 'number' && width > formColWidth
                         ? formColWidth
                         : undefined,
@@ -10218,6 +10258,10 @@ FormSwitch.displayName = 'FormSwitch';var SearchGroupRow = function (_a) {
             onValueChange: function () { },
             // eslint-disable-next-line
             onValueChangeByUser: function () { },
+            onRequestSubmit: function () {
+                var _a;
+                (_a = formRef.current) === null || _a === void 0 ? void 0 : _a.submit();
+            },
             onRequestSearchSubmit: function () {
                 var _a;
                 if (autoSubmit) {

package/dist/index.js

@@ -99,6 +99,8 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
     // eslint-disable-next-line
     onValueChangeByUser: function () { },
     // eslint-disable-next-line
+    onRequestSubmit: function () { },
+    // eslint-disable-next-line
     onRequestSearchSubmit: function () { },
 };var FormContext = React.createContext(FormContextDefaultValue);function useFormState() {
     var value = React.useContext(FormContext);
@@ -232,10 +234,10 @@ var appendFormValueData = function (data, itemCommands) {
     //--------------------------------------------------------------------------------------------------------------------
     _b = _a.variant, 
     //--------------------------------------------------------------------------------------------------------------------
-    initVariant = _b === void 0 ? 'outlined' : _b, _c = _a.size, initSize = _c === void 0 ? 'medium' : _c, _d = _a.color, initColor = _d === void 0 ? 'primary' : _d, _e = _a.spacing, initSpacing = _e === void 0 ? 2 : _e, _f = _a.formColGap, initFormColGap = _f === void 0 ? 1.5 : _f, initFocused = _a.focused, initLabelShrink = _a.labelShrink, initFullWidth = _a.fullWidth, initFullHeight = _a.fullHeight, initDisabled = _a.disabled, 
+    initVariant = _b === void 0 ? 'outlined' : _b, _c = _a.size, initSize = _c === void 0 ? 'medium' : _c, _d = _a.color, initColor = _d === void 0 ? 'primary' : _d, _e = _a.spacing, initSpacing = _e === void 0 ? 2 : _e, _f = _a.formColGap, initFormColGap = _f === void 0 ? 1.5 : _f, initFocused = _a.focused, initLabelShrink = _a.labelShrink, initFullWidth = _a.fullWidth, initFullHeight = _a.fullHeight, initDisabled = _a.disabled, initSubmitWhenReturnKey = _a.submitWhenReturnKey, 
     //----------------------------------------------------------------------------------------------------------------
     initOnSubmit = _a.onSubmit, initOnValid = _a.onInvalid, initOnValueChange = _a.onValueChange, initOnValueChangeByUser = _a.onValueChangeByUser;
-    var _g = useFormState(), formId = _g.id, formVariant = _g.variant, formSize = _g.size, formColor = _g.color, formDisabled = _g.disabled, formSpacing = _g.spacing, formFormColGap = _g.formColGap, formFocused = _g.focused, formLabelShrink = _g.labelShrink, formFullWidth = _g.fullWidth, formFullHeight = _g.fullHeight, formColAutoXs = _g.formColAutoXs, formColWidth = _g.formColWidth, onAddFormCol = _g.onAddFormCol, onRemoveFormCol = _g.onRemoveFormCol, formColXs = _g.formColXs, formColWithLabel = _g.formColWithLabel, formColWithHelperText = _g.formColWithHelperText, formAddValueItem = _g.onAddValueItem, formRemoveValueItem = _g.onRemoveValueItem, formValueChange = _g.onValueChange, formValueChangeByUser = _g.onValueChangeByUser, formRequestSearchSubmit = _g.onRequestSearchSubmit;
+    var _g = useFormState(), formId = _g.id, formVariant = _g.variant, formSize = _g.size, formColor = _g.color, formDisabled = _g.disabled, formSubmitWhenReturnKey = _g.submitWhenReturnKey, formSpacing = _g.spacing, formFormColGap = _g.formColGap, formFocused = _g.focused, formLabelShrink = _g.labelShrink, formFullWidth = _g.fullWidth, formFullHeight = _g.fullHeight, formColAutoXs = _g.formColAutoXs, formColWidth = _g.formColWidth, onAddFormCol = _g.onAddFormCol, onRemoveFormCol = _g.onRemoveFormCol, formColXs = _g.formColXs, formColWithLabel = _g.formColWithLabel, formColWithHelperText = _g.formColWithHelperText, formAddValueItem = _g.onAddValueItem, formRemoveValueItem = _g.onRemoveValueItem, formValueChange = _g.onValueChange, formValueChangeByUser = _g.onValueChangeByUser, formRequestSubmit = _g.onRequestSubmit, formRequestSearchSubmit = _g.onRequestSearchSubmit;
     /********************************************************************************************************************
      * Memo - FormState
      * ******************************************************************************************************************/
@@ -249,6 +251,7 @@ var appendFormValueData = function (data, itemCommands) {
     var fullWidth = util.ifUndefined(util.ifUndefined(initFullWidth, formFullWidth), true);
     var fullHeight = util.ifUndefined(util.ifUndefined(initFullHeight, formFullHeight), false);
     var disabled = util.ifUndefined(util.ifUndefined(initDisabled, formDisabled), false);
+    var submitWhenReturnKey = util.ifUndefined(util.ifUndefined(initSubmitWhenReturnKey, formSubmitWhenReturnKey), false);
     /********************************************************************************************************************
      * Ref
      * ******************************************************************************************************************/
@@ -556,6 +559,7 @@ var appendFormValueData = function (data, itemCommands) {
             fullWidth: fullWidth,
             fullHeight: fullHeight,
             disabled: disabled,
+            submitWhenReturnKey: submitWhenReturnKey,
             onAddValueItem: function (id, item) {
                 valueItems.current[id] = item;
                 if (formAddValueItem)
@@ -578,6 +582,12 @@ var appendFormValueData = function (data, itemCommands) {
                 if (formValueChangeByUser)
                     formValueChangeByUser(name, value);
             },
+            onRequestSubmit: function (name, value) {
+                if (!disabled)
+                    submit();
+                if (formRequestSubmit)
+                    formRequestSubmit(name, value);
+            },
             onRequestSearchSubmit: formRequestSearchSubmit,
             formColAutoXs: formColAutoXs,
             formColWidth: formColWidth,
@@ -599,6 +609,7 @@ var appendFormValueData = function (data, itemCommands) {
         fullWidth,
         fullHeight,
         disabled,
+        submitWhenReturnKey,
         formRequestSearchSubmit,
         formColAutoXs,
         formColWidth,
@@ -613,6 +624,8 @@ var appendFormValueData = function (data, itemCommands) {
         formValueChange,
         onValueChangeByUserRef,
         formValueChangeByUser,
+        submit,
+        formRequestSubmit,
     ]);
     /********************************************************************************************************************
      * Render
@@ -1026,7 +1039,7 @@ styleInject(css_248z$l);var FormTextField = React.forwardRef(function (_a, ref)
      * ID
      * ******************************************************************************************************************/
     var _b, _c;
-    var initVariant = _a.variant, initSize = _a.size, initColor = _a.color, initFocused = _a.focused, initLabelShrink = _a.labelShrink, initFullWidth = _a.fullWidth, 
+    var initVariant = _a.variant, initSize = _a.size, initColor = _a.color, initFocused = _a.focused, initLabelShrink = _a.labelShrink, initFullWidth = _a.fullWidth, initSubmitWhenReturnKey = _a.submitWhenReturnKey, 
     //----------------------------------------------------------------------------------------------------------------
     name = _a.name, required = _a.required, initValue = _a.value, initData = _a.data, icon = _a.icon, labelIcon = _a.labelIcon, initLabel = _a.label, initError = _a.error, helperText = _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, initHidden = _a.hidden, disableReturnKey = _a.disableReturnKey, 
     //----------------------------------------------------------------------------------------------------------------
@@ -1034,7 +1047,7 @@ styleInject(css_248z$l);var FormTextField = React.forwardRef(function (_a, ref)
     //----------------------------------------------------------------------------------------------------------------
     className = _a.className, initStyle = _a.style, 
     //----------------------------------------------------------------------------------------------------------------
-    props = __rest(_a, ["variant", "size", "color", "focused", "labelShrink", "fullWidth", "name", "required", "value", "data", "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", "disableReturnKey", "onChange", "onValue", "onValidate", "onBlur", "onKeyDown", "className", "style"]);
+    props = __rest(_a, ["variant", "size", "color", "focused", "labelShrink", "fullWidth", "submitWhenReturnKey", "name", "required", "value", "data", "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", "disableReturnKey", "onChange", "onValue", "onValidate", "onBlur", "onKeyDown", "className", "style"]);
     var id = React.useId();
     /********************************************************************************************************************
      * Ref
@@ -1043,7 +1056,7 @@ styleInject(css_248z$l);var FormTextField = React.forwardRef(function (_a, ref)
     /********************************************************************************************************************
      * FormState
      * ******************************************************************************************************************/
-    var _d = useFormState(), formVariant = _d.variant, formSize = _d.size, formColor = _d.color, formFocused = _d.focused, formLabelShrink = _d.labelShrink, formFullWidth = _d.fullWidth, formDisabled = _d.disabled, formColWithHelperText = _d.formColWithHelperText, onAddValueItem = _d.onAddValueItem, onRemoveValueItem = _d.onRemoveValueItem, onValueChange = _d.onValueChange, onValueChangeByUser = _d.onValueChangeByUser, onRequestSearchSubmit = _d.onRequestSearchSubmit;
+    var _d = useFormState(), formVariant = _d.variant, formSize = _d.size, formColor = _d.color, formFocused = _d.focused, formLabelShrink = _d.labelShrink, formFullWidth = _d.fullWidth, formDisabled = _d.disabled, formSubmitWhenReturnKey = _d.submitWhenReturnKey, formColWithHelperText = _d.formColWithHelperText, onAddValueItem = _d.onAddValueItem, onRemoveValueItem = _d.onRemoveValueItem, onValueChange = _d.onValueChange, onValueChangeByUser = _d.onValueChangeByUser, onRequestSubmit = _d.onRequestSubmit, onRequestSearchSubmit = _d.onRequestSearchSubmit;
     /********************************************************************************************************************
      * Memo - FormState
      * ******************************************************************************************************************/
@@ -1053,6 +1066,7 @@ styleInject(css_248z$l);var FormTextField = React.forwardRef(function (_a, ref)
     var focused = util.ifUndefined(initFocused, formFocused);
     var labelShrink = util.ifUndefined(initLabelShrink, formLabelShrink);
     var fullWidth = util.ifUndefined(initFullWidth, formFullWidth);
+    var submitWhenReturnKey = util.ifUndefined(initSubmitWhenReturnKey, formSubmitWhenReturnKey);
     /********************************************************************************************************************
      * State
      * ******************************************************************************************************************/
@@ -1274,11 +1288,25 @@ styleInject(css_248z$l);var FormTextField = React.forwardRef(function (_a, ref)
             !noFormValueItem) {
             e.preventDefault();
             e.stopPropagation();
+            if (submitWhenReturnKey) {
+                onRequestSubmit(name, valueRef.current);
+            }
             onRequestSearchSubmit(name, valueRef.current);
         }
         if (onKeyDown)
             onKeyDown(e);
-    }, [select, multiline, disableReturnKey, noFormValueItem, onKeyDown, onRequestSearchSubmit, name, valueRef]);
+    }, [
+        select,
+        multiline,
+        disableReturnKey,
+        noFormValueItem,
+        onKeyDown,
+        submitWhenReturnKey,
+        onRequestSearchSubmit,
+        name,
+        valueRef,
+        onRequestSubmit,
+    ]);
     /********************************************************************************************************************
      * Variable
      * ******************************************************************************************************************/
@@ -2973,7 +3001,7 @@ var FormRadioGroup = ToForwardRefExoticComponent(AutoTypeForwardRef(function (_a
      * ******************************************************************************************************************/
     var singleHeight = height || (size === 'small' ? 35 : 39);
     var isMultiline = singleHeight <= util.ifUndefined(realHeight, 0);
-    return (React.createElement(FormItemBase, { focused: focused, ref: baseRef, className: classNames(className, 'FormValueItem', 'FormRadioGroup'), variant: variant, size: size, color: color, labelIcon: labelIcon, label: label, fullWidth: fullWidth, required: required, error: error, helperText: error ? errorHelperText : helperText, helperTextProps: { style: { marginLeft: 2, marginTop: isMultiline ? 20 : 0 } }, style: __assign({ width: width, paddingLeft: PADDING_LEFT }, initStyle), sx: sx, hidden: hidden, autoSize: true, controlHeight: realHeight ? realHeight : singleHeight, controlContainerStyle: {
+    return (React.createElement(FormItemBase, { focused: focused, ref: baseRef, className: classNames(className, 'FormValueItem', 'FormRadioGroup'), variant: variant, size: size, color: color, labelIcon: labelIcon, label: label, fullWidth: fullWidth, required: required, error: error, helperText: error ? errorHelperText : helperText, helperTextProps: { style: { marginLeft: 2, marginTop: isMultiline && util.notEmpty(label) ? 20 : 0 } }, style: __assign({ width: width, paddingLeft: PADDING_LEFT }, initStyle), sx: sx, hidden: hidden, autoSize: true, controlHeight: realHeight ? realHeight : singleHeight, controlContainerStyle: {
             paddingTop: isMultiline && size === 'medium' ? 4 : undefined,
         }, controlVerticalCenter: !isMultiline, control: React.createElement(React.Fragment, null,
             !fullWidth && !isOnGetItemLoading && !loading && items && (React.createElement("div", { ref: resizeWidthDetectorRef, style: {
@@ -3033,6 +3061,7 @@ styleInject(css_248z$d);var FormToggleButtonGroup = ToForwardRefExoticComponent(
      * ******************************************************************************************************************/
     var refForResizeWidthDetect = React.useRef(null);
     var refForButtonResizeHeightDetect = React.useRef(null);
+    var refForButtonsResizeHeightDetect = React.useRef(null);
     var refForLoadingResizeHeightDetect = React.useRef(null);
     /********************************************************************************************************************
      * FormState
@@ -3069,6 +3098,7 @@ styleInject(css_248z$d);var FormToggleButtonGroup = ToForwardRefExoticComponent(
      * State - height (ResizeDetector)
      * ******************************************************************************************************************/
     var _g = React.useState(), height = _g[0], setHeight = _g[1];
+    var _h = React.useState(), realHeight = _h[0], setRealHeight = _h[1];
     reactResizeDetector.useResizeDetector({
         targetRef: refForButtonResizeHeightDetect,
         handleHeight: true,
@@ -3077,6 +3107,14 @@ styleInject(css_248z$d);var FormToggleButtonGroup = ToForwardRefExoticComponent(
             setHeight((_b = (_a = refForButtonResizeHeightDetect.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) === null || _b === void 0 ? void 0 : _b.height);
         },
     });
+    reactResizeDetector.useResizeDetector({
+        targetRef: refForButtonsResizeHeightDetect,
+        handleHeight: true,
+        onResize: function () {
+            var _a, _b;
+            setRealHeight((_b = (_a = refForButtonsResizeHeightDetect.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) === null || _b === void 0 ? void 0 : _b.height);
+        },
+    });
     reactResizeDetector.useResizeDetector({
         targetRef: refForLoadingResizeHeightDetect,
         handleHeight: true,
@@ -3088,14 +3126,14 @@ styleInject(css_248z$d);var FormToggleButtonGroup = ToForwardRefExoticComponent(
     /********************************************************************************************************************
      * State
      * ******************************************************************************************************************/
-    var _h = React.useState(false), isOnGetItemLoading = _h[0], setIsOnGetItemLoading = _h[1];
-    var _j = reactHook.useAutoUpdateState(initError), error = _j[0], setError = _j[1];
-    var _k = React.useState(), errorHelperText = _k[0], setErrorHelperText = _k[1];
-    var _l = reactHook.useAutoUpdateRefState(initData), dataRef = _l[0], setData = _l[2];
-    var _m = reactHook.useAutoUpdateRefState(React.useMemo(function () { return (initDisabled == null ? formDisabled : initDisabled); }, [initDisabled, formDisabled])), disabledRef = _m[0], disabled = _m[1], setDisabled = _m[2];
-    var _o = reactHook.useAutoUpdateRefState(initHidden), hiddenRef = _o[0], hidden = _o[1], setHidden = _o[2];
-    var _p = reactHook.useAutoUpdateRefState(initLoading), loadingRef = _p[0], loading = _p[1], setLoading = _p[2];
-    var _q = reactHook.useAutoUpdateRefState(initItems), itemsRef = _q[0], items = _q[1], setItems = _q[2];
+    var _j = React.useState(false), isOnGetItemLoading = _j[0], setIsOnGetItemLoading = _j[1];
+    var _k = reactHook.useAutoUpdateState(initError), error = _k[0], setError = _k[1];
+    var _l = React.useState(), errorHelperText = _l[0], setErrorHelperText = _l[1];
+    var _m = reactHook.useAutoUpdateRefState(initData), dataRef = _m[0], setData = _m[2];
+    var _o = reactHook.useAutoUpdateRefState(React.useMemo(function () { return (initDisabled == null ? formDisabled : initDisabled); }, [initDisabled, formDisabled])), disabledRef = _o[0], disabled = _o[1], setDisabled = _o[2];
+    var _p = reactHook.useAutoUpdateRefState(initHidden), hiddenRef = _p[0], hidden = _p[1], setHidden = _p[2];
+    var _q = reactHook.useAutoUpdateRefState(initLoading), loadingRef = _q[0], loading = _q[1], setLoading = _q[2];
+    var _r = reactHook.useAutoUpdateRefState(initItems), itemsRef = _r[0], items = _r[1], setItems = _r[2];
     /********************************************************************************************************************
      * Memo
      * ******************************************************************************************************************/
@@ -3210,7 +3248,7 @@ styleInject(css_248z$d);var FormToggleButtonGroup = ToForwardRefExoticComponent(
         finalValue = onValue ? onValue(finalValue) : finalValue;
         return util.equal(value, finalValue) ? value : finalValue;
     }, [multiple, formValueSeparator, itemsValues, onValue]);
-    var _r = reactHook.useAutoUpdateRefState(initValue, getFinalValue), valueRef = _r[0], value = _r[1], setValue = _r[2];
+    var _s = reactHook.useAutoUpdateRefState(initValue, getFinalValue), valueRef = _s[0], value = _s[1], setValue = _s[2];
     reactHook.useFirstSkipEffect(function () {
         if (error)
             validate(value);
@@ -3435,7 +3473,9 @@ styleInject(css_248z$d);var FormToggleButtonGroup = ToForwardRefExoticComponent(
         theme.palette.error.main,
         type,
     ]);
-    return (React.createElement(FormItemBase, __assign({}, formControlBaseProps, { className: classNames(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: error ? errorHelperText : helperText, helperTextProps: { style: { marginLeft: 2 } }, style: style, sx: sx, hidden: hidden, autoSize: true, controlHeight: height || 0, controlVerticalCenter: isOnGetItemLoading || loading, control: isOnGetItemLoading || loading ? (React.createElement("div", { style: { opacity: 0.54 }, ref: refForLoadingResizeHeightDetect },
+    var controlHeight = height || 0;
+    var isMultiline = controlHeight <= util.ifUndefined(realHeight, 0);
+    return (React.createElement(FormItemBase, __assign({}, formControlBaseProps, { className: classNames(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: error ? errorHelperText : helperText, helperTextProps: { style: { marginLeft: 2 } }, style: style, sx: sx, hidden: hidden, autoSize: true, controlHeight: realHeight ? realHeight + (isMultiline ? 13 : 0) : controlHeight, controlVerticalCenter: isMultiline ? false : isOnGetItemLoading || loading, control: isOnGetItemLoading || loading ? (React.createElement("div", { style: { opacity: 0.54 }, ref: refForLoadingResizeHeightDetect },
             React.createElement(material.CircularProgress, { size: 16, color: 'inherit' }))) : (React.createElement(React.Fragment, null,
             !fullWidth && !isOnGetItemLoading && !loading && items && (React.createElement("div", { ref: refForResizeWidthDetect, style: {
                     display: 'grid',
@@ -3444,7 +3484,7 @@ styleInject(css_248z$d);var FormToggleButtonGroup = ToForwardRefExoticComponent(
                     visibility: 'hidden',
                 } },
                 React.createElement(material.ToggleButtonGroup, { className: 'ToggleButtonGroup', exclusive: !multiple }, buttons))),
-            React.createElement(material.ToggleButtonGroup, { className: 'ToggleButtonGroup', exclusive: !multiple, fullWidth: fullWidth, value: value == null ? null : value, onChange: handleChange, style: {
+            React.createElement(material.ToggleButtonGroup, { ref: refForButtonsResizeHeightDetect, className: 'ToggleButtonGroup', exclusive: !multiple, fullWidth: fullWidth, value: value == null ? null : value, onChange: handleChange, style: {
                     width: !fullWidth && formColWidth && typeof width === 'number' && width > formColWidth
                         ? formColWidth
                         : undefined,
@@ -10218,6 +10258,10 @@ FormSwitch.displayName = 'FormSwitch';var SearchGroupRow = function (_a) {
             onValueChange: function () { },
             // eslint-disable-next-line
             onValueChangeByUser: function () { },
+            onRequestSubmit: function () {
+                var _a;
+                (_a = formRef.current) === null || _a === void 0 ? void 0 : _a.submit();
+            },
             onRequestSearchSubmit: function () {
                 var _a;
                 if (autoSubmit) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pdg/react-form",
   "title": "React Form",
-  "version": "1.0.130",
+  "version": "1.0.132",
   "description": "React Form",
   "type": "module",
   "types": "dist/index.d.ts",