@pdg/react-form 1.1.18 → 1.1.19

package/dist/PFormItemCustom/PFormRadioGroup/PFormRadioGroup.types.d.ts

@@ -15,6 +15,8 @@ export interface PFormRadioGroupProps<BaseValue extends PFormRadioGroupSingleVal
     inline?: boolean;
     loading?: boolean;
     nowrap?: boolean;
+    startAdornment?: ReactNode;
+    endAdornment?: ReactNode;
     onLoadItems?: () => Promise<Items>;
     onValue?: (value: PFormRadioGroupValue<Value>) => PFormRadioGroupValue<Value>;
 }

package/dist/PFormItemCustom/PFormToggleButtonGroup/PFormToggleButtonGroup.types.d.ts

@@ -20,6 +20,8 @@ export interface PFormToggleButtonGroupProps<T extends PFormToggleButtonGroupSin
     formValueSort?: boolean;
     loading?: boolean;
     itemWidth?: number | string;
+    startAdornment?: ReactNode;
+    endAdornment?: ReactNode;
     onLoadItems?: () => Promise<Items>;
     onValue?: (value: Value) => Value;
 }

package/dist/index.esm.js

@@ -2734,13 +2734,13 @@ var PFormRadioGroup = ToForwardRefExoticComponent(AutoTypeForwardRef(function (_
     /********************************************************************************************************************
      * type
      * ******************************************************************************************************************/
-    var initVariant = _a.variant, initSize = _a.size, initColor = _a.color, initFocused = _a.focused, initFullWidth = _a.fullWidth, initHidden = _a.hidden, 
+    var initVariant = _a.variant, initSize = _a.size, initColor = _a.color, initFocused = _a.focused, initFullWidth = _a.fullWidth, initHidden = _a.hidden, startAdornment = _a.startAdornment, endAdornment = _a.endAdornment, 
     //----------------------------------------------------------------------------------------------------------------
     name = _a.name, initWidth = _a.width, labelIcon = _a.labelIcon, label = _a.label, _b = _a.inline, inline = _b === void 0 ? true : _b, initLoading = _a.loading, nowrap = _a.nowrap, initItems = _a.items, initValue = _a.value, initData = _a.data, initError = _a.error, helperText = _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(_a, ["variant", "size", "color", "focused", "fullWidth", "hidden", "name", "width", "labelIcon", "label", "inline", "loading", "nowrap", "items", "value", "data", "error", "helperText", "disabled", "readOnly", "required", "exceptValue", "onLoadItems", "onChange", "onValue", "onValidate", "className", "style", "sx"]);
+    props = __rest(_a, ["variant", "size", "color", "focused", "fullWidth", "hidden", "startAdornment", "endAdornment", "name", "width", "labelIcon", "label", "inline", "loading", "nowrap", "items", "value", "data", "error", "helperText", "disabled", "readOnly", "required", "exceptValue", "onLoadItems", "onChange", "onValue", "onValidate", "className", "style", "sx"]);
     /********************************************************************************************************************
      * ID
      * ******************************************************************************************************************/
@@ -3007,52 +3007,56 @@ var PFormRadioGroup = ToForwardRefExoticComponent(AutoTypeForwardRef(function (_
      * Render
      * ******************************************************************************************************************/
     var control = useMemo(function () {
-        return (React.createElement(React.Fragment, null,
-            !fullWidth && !isOnGetItemLoading && !loading && items && (React.createElement("div", { ref: function (ref) {
-                    resizeWidthDetectorRef.current = ref;
-                }, style: {
-                    display: 'grid',
-                    position: 'absolute',
-                    whiteSpace: 'nowrap',
-                    visibility: 'hidden',
-                } },
-                React.createElement(RadioGroup, __assign({}, props, { style: { display: 'inline-flex', flexWrap: 'nowrap' }, name: name, row: inline, value: value === undefined ? null : value, onChange: handleChange }), items.map(function (_a, idx) {
-                    var value = _a.value, label = _a.label, itemDisabled = _a.disabled;
-                    return (React.createElement(FormControlLabel, { ref: idx === 0
-                            ? function (ref) {
-                                resizeHeightDetectorRef.current = ref;
-                            }
-                            : null, key: idx, control: React.createElement(Radio, { icon: React.createElement(RadioButtonUnchecked, { color: error ? 'error' : undefined }), checkedIcon: React.createElement(RadioButtonChecked, { color: error ? 'error' : undefined }), color: color, size: size }), label: label, style: {
-                            color: error ? theme.palette.error.main : '',
-                            marginTop: -5,
-                            marginBottom: -5,
-                            whiteSpace: 'nowrap',
-                        }, value: value, disabled: disabled || readOnly || itemDisabled }));
-                })))),
-            React.createElement("div", null,
-                React.createElement(RadioGroup, __assign({}, props, { ref: function (ref) {
-                        resizeRealHeightDetectorRef.current = ref;
+        return (React.createElement("div", { style: { display: 'flex', flexDirection: 'row', alignItems: 'center', width: fullWidth ? '100%' : undefined } },
+            startAdornment && React.createElement("div", null, startAdornment),
+            React.createElement("div", { style: { flex: 1 } },
+                !fullWidth && !isOnGetItemLoading && !loading && items && (React.createElement("div", { ref: function (ref) {
+                        resizeWidthDetectorRef.current = ref;
                     }, style: {
-                        display: 'inline-flex',
-                        visibility: width == null ? 'hidden' : undefined,
-                        position: width == null ? 'absolute' : undefined,
-                        flexWrap: nowrap ? 'nowrap' : undefined,
-                    }, name: name, row: inline, value: value === undefined ? null : value, onChange: handleChange }), isOnGetItemLoading || loading ? (React.createElement("div", { style: { position: 'relative' } },
-                    React.createElement(FormControlLabel, { label: '', control: React.createElement(Radio, { color: color, size: size }), style: { visibility: 'hidden' } }),
-                    React.createElement("div", { style: { position: 'absolute', left: 0, top: 11, opacity: 0.54 } },
-                        React.createElement(CircularProgress, { size: size === 'small' ? 12 : 16, color: 'inherit' })))) : (React.createElement(React.Fragment, null, items &&
-                    items.map(function (_a, idx) {
+                        display: 'grid',
+                        position: 'absolute',
+                        whiteSpace: 'nowrap',
+                        visibility: 'hidden',
+                    } },
+                    React.createElement(RadioGroup, __assign({}, props, { style: { display: 'inline-flex', flexWrap: 'nowrap' }, name: name, row: inline, value: value === undefined ? null : value, onChange: handleChange }), items.map(function (_a, idx) {
                         var value = _a.value, label = _a.label, itemDisabled = _a.disabled;
-                        return (React.createElement(FormControlLabel, { key: idx, control: React.createElement(Radio, { icon: React.createElement(RadioButtonUnchecked, { color: error ? 'error' : undefined }), checkedIcon: React.createElement(RadioButtonChecked, { color: error ? 'error' : undefined }), color: color, size: size, slotProps: idx === 0 ? { input: { ref: firstInputRef } } : undefined }), label: label, style: {
+                        return (React.createElement(FormControlLabel, { ref: idx === 0
+                                ? function (ref) {
+                                    resizeHeightDetectorRef.current = ref;
+                                }
+                                : null, key: idx, control: React.createElement(Radio, { icon: React.createElement(RadioButtonUnchecked, { color: error ? 'error' : undefined }), checkedIcon: React.createElement(RadioButtonChecked, { color: error ? 'error' : undefined }), color: color, size: size }), label: label, style: {
                                 color: error ? theme.palette.error.main : '',
-                                whiteSpace: 'nowrap',
                                 marginTop: -5,
                                 marginBottom: -5,
+                                whiteSpace: 'nowrap',
                             }, value: value, disabled: disabled || readOnly || itemDisabled }));
-                    })))))));
+                    })))),
+                React.createElement("div", null,
+                    React.createElement(RadioGroup, __assign({}, props, { ref: function (ref) {
+                            resizeRealHeightDetectorRef.current = ref;
+                        }, style: {
+                            display: 'inline-flex',
+                            visibility: width == null ? 'hidden' : undefined,
+                            position: width == null ? 'absolute' : undefined,
+                            flexWrap: nowrap ? 'nowrap' : undefined,
+                        }, name: name, row: inline, value: value === undefined ? null : value, onChange: handleChange }), isOnGetItemLoading || loading ? (React.createElement("div", { style: { position: 'relative' } },
+                        React.createElement(FormControlLabel, { label: '', control: React.createElement(Radio, { color: color, size: size }), style: { visibility: 'hidden' } }),
+                        React.createElement("div", { style: { position: 'absolute', left: 0, top: 11, opacity: 0.54 } },
+                            React.createElement(CircularProgress, { size: size === 'small' ? 12 : 16, color: 'inherit' })))) : (React.createElement(React.Fragment, null, items &&
+                        items.map(function (_a, idx) {
+                            var value = _a.value, label = _a.label, itemDisabled = _a.disabled;
+                            return (React.createElement(FormControlLabel, { key: idx, control: React.createElement(Radio, { icon: React.createElement(RadioButtonUnchecked, { color: error ? 'error' : undefined }), checkedIcon: React.createElement(RadioButtonChecked, { color: error ? 'error' : undefined }), color: color, size: size, slotProps: idx === 0 ? { input: { ref: firstInputRef } } : undefined }), label: label, style: {
+                                    color: error ? theme.palette.error.main : '',
+                                    whiteSpace: 'nowrap',
+                                    marginTop: -5,
+                                    marginBottom: -5,
+                                }, value: value, disabled: disabled || readOnly || itemDisabled }));
+                        })))))),
+            endAdornment && React.createElement("div", null, endAdornment)));
     }, [
         color,
         disabled,
+        endAdornment,
         error,
         fullWidth,
         handleChange,
@@ -3068,6 +3072,7 @@ var PFormRadioGroup = ToForwardRefExoticComponent(AutoTypeForwardRef(function (_
         resizeRealHeightDetectorRef,
         resizeWidthDetectorRef,
         size,
+        startAdornment,
         theme.palette.error.main,
         value,
         width,
@@ -3084,7 +3089,7 @@ PFormRadioGroup.displayName = 'PFormRadioGroup';insertStyle(".PFormToggleButtonG
      * ******************************************************************************************************************/
     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, _b = _a.type, type = _b === void 0 ? 'button' : _b, initLoading = _a.loading, initItems = _a.items, initValue = _a.value, initData = _a.data, initError = _a.error, helperText = _a.helperText, initDisabled = _a.disabled, readOnly = _a.readOnly, required = _a.required, notAllowEmptyValue = _a.notAllowEmptyValue, exceptValue = _a.exceptValue, initWidth = _a.width, multiple = _a.multiple, _c = _a.formValueSeparator, formValueSeparator = _c === void 0 ? ',' : _c, formValueSort = _a.formValueSort, initHidden = _a.hidden, itemWidth = _a.itemWidth, onLoadItems = _a.onLoadItems, 
+    name = _a.name, labelIcon = _a.labelIcon, label = _a.label, _b = _a.type, type = _b === void 0 ? 'button' : _b, initLoading = _a.loading, initItems = _a.items, initValue = _a.value, initData = _a.data, initError = _a.error, helperText = _a.helperText, initDisabled = _a.disabled, readOnly = _a.readOnly, required = _a.required, notAllowEmptyValue = _a.notAllowEmptyValue, exceptValue = _a.exceptValue, initWidth = _a.width, multiple = _a.multiple, _c = _a.formValueSeparator, formValueSeparator = _c === void 0 ? ',' : _c, formValueSort = _a.formValueSort, initHidden = _a.hidden, itemWidth = _a.itemWidth, onLoadItems = _a.onLoadItems, startAdornment = _a.startAdornment, endAdornment = _a.endAdornment, 
     //----------------------------------------------------------------------------------------------------------------
     onChange = _a.onChange, onValue = _a.onValue, onValidate = _a.onValidate, 
     //----------------------------------------------------------------------------------------------------------------
@@ -3493,29 +3498,33 @@ PFormRadioGroup.displayName = 'PFormRadioGroup';insertStyle(".PFormToggleButtonG
         return isOnGetItemLoading || loading ? (React.createElement("div", { style: { opacity: 0.54 }, ref: function (ref) {
                 refForLoadingResizeHeightDetect.current = ref;
             } },
-            React.createElement(CircularProgress, { size: 16, color: 'inherit' }))) : (React.createElement(React.Fragment, null,
-            !fullWidth && !isOnGetItemLoading && !loading && items && (React.createElement("div", { ref: function (ref) {
-                    refForResizeWidthDetect.current = ref;
-                }, style: {
-                    display: 'grid',
-                    position: 'absolute',
-                    whiteSpace: 'nowrap',
-                    visibility: 'hidden',
-                } },
-                React.createElement(ToggleButtonGroup, { className: 'ToggleButtonGroup', exclusive: !multiple }, buttons))),
-            React.createElement(ToggleButtonGroup, { ref: function (ref) {
-                    refForButtonsResizeHeightDetect.current = ref;
-                }, className: 'ToggleButtonGroup', exclusive: !multiple, fullWidth: fullWidth, value: realValue, onChange: handleChange, style: {
-                    width: !fullWidth && formColWidth && typeof width === 'number' && width > formColWidth
-                        ? formColWidth
-                        : undefined,
-                    flexWrap: type === 'checkbox' || type === 'radio' ? 'wrap' : 'nowrap',
-                }, "aria-labelledby": notEmpty(label) ? labelId : undefined }, isOnGetItemLoading || loading || !items || empty(items) ? (React.createElement(ToggleButton, { ref: function (ref) {
-                    refForButtonResizeHeightDetect.current = ref;
-                }, size: size, className: 'ToggleButton', disabled: disabled || readOnly, value: '', style: { visibility: 'hidden' } })) : (buttons))));
+            React.createElement(CircularProgress, { size: 16, color: 'inherit' }))) : (React.createElement("div", { style: { display: 'flex', flexDirection: 'row', alignItems: 'center', width: fullWidth ? '100%' : undefined } },
+            startAdornment && React.createElement("div", null, startAdornment),
+            React.createElement("div", { style: { flex: 1 } },
+                !fullWidth && !isOnGetItemLoading && !loading && items && (React.createElement("div", { ref: function (ref) {
+                        refForResizeWidthDetect.current = ref;
+                    }, style: {
+                        display: 'grid',
+                        position: 'absolute',
+                        whiteSpace: 'nowrap',
+                        visibility: 'hidden',
+                    } },
+                    React.createElement(ToggleButtonGroup, { className: 'ToggleButtonGroup', exclusive: !multiple }, buttons))),
+                React.createElement(ToggleButtonGroup, { ref: function (ref) {
+                        refForButtonsResizeHeightDetect.current = ref;
+                    }, className: 'ToggleButtonGroup', exclusive: !multiple, fullWidth: fullWidth, value: realValue, onChange: handleChange, style: {
+                        width: !fullWidth && formColWidth && typeof width === 'number' && width > formColWidth
+                            ? formColWidth
+                            : undefined,
+                        flexWrap: type === 'checkbox' || type === 'radio' ? 'wrap' : 'nowrap',
+                    }, "aria-labelledby": notEmpty(label) ? labelId : undefined }, isOnGetItemLoading || loading || !items || empty(items) ? (React.createElement(ToggleButton, { ref: function (ref) {
+                        refForButtonResizeHeightDetect.current = ref;
+                    }, size: size, className: 'ToggleButton', disabled: disabled || readOnly, value: '', style: { visibility: 'hidden' } })) : (buttons))),
+            endAdornment && React.createElement("div", null, endAdornment)));
     }, [
         buttons,
         disabled,
+        endAdornment,
         formColWidth,
         fullWidth,
         handleChange,
@@ -3532,6 +3541,7 @@ PFormRadioGroup.displayName = 'PFormRadioGroup';insertStyle(".PFormToggleButtonG
         refForLoadingResizeHeightDetect,
         refForResizeWidthDetect,
         size,
+        startAdornment,
         type,
         width,
     ]);

package/dist/index.js

@@ -2734,13 +2734,13 @@ var PFormRadioGroup = ToForwardRefExoticComponent(AutoTypeForwardRef(function (_
     /********************************************************************************************************************
      * type
      * ******************************************************************************************************************/
-    var initVariant = _a.variant, initSize = _a.size, initColor = _a.color, initFocused = _a.focused, initFullWidth = _a.fullWidth, initHidden = _a.hidden, 
+    var initVariant = _a.variant, initSize = _a.size, initColor = _a.color, initFocused = _a.focused, initFullWidth = _a.fullWidth, initHidden = _a.hidden, startAdornment = _a.startAdornment, endAdornment = _a.endAdornment, 
     //----------------------------------------------------------------------------------------------------------------
     name = _a.name, initWidth = _a.width, labelIcon = _a.labelIcon, label = _a.label, _b = _a.inline, inline = _b === void 0 ? true : _b, initLoading = _a.loading, nowrap = _a.nowrap, initItems = _a.items, initValue = _a.value, initData = _a.data, initError = _a.error, helperText = _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(_a, ["variant", "size", "color", "focused", "fullWidth", "hidden", "name", "width", "labelIcon", "label", "inline", "loading", "nowrap", "items", "value", "data", "error", "helperText", "disabled", "readOnly", "required", "exceptValue", "onLoadItems", "onChange", "onValue", "onValidate", "className", "style", "sx"]);
+    props = __rest(_a, ["variant", "size", "color", "focused", "fullWidth", "hidden", "startAdornment", "endAdornment", "name", "width", "labelIcon", "label", "inline", "loading", "nowrap", "items", "value", "data", "error", "helperText", "disabled", "readOnly", "required", "exceptValue", "onLoadItems", "onChange", "onValue", "onValidate", "className", "style", "sx"]);
     /********************************************************************************************************************
      * ID
      * ******************************************************************************************************************/
@@ -3007,52 +3007,56 @@ var PFormRadioGroup = ToForwardRefExoticComponent(AutoTypeForwardRef(function (_
      * Render
      * ******************************************************************************************************************/
     var control = React.useMemo(function () {
-        return (React.createElement(React.Fragment, null,
-            !fullWidth && !isOnGetItemLoading && !loading && items && (React.createElement("div", { ref: function (ref) {
-                    resizeWidthDetectorRef.current = ref;
-                }, style: {
-                    display: 'grid',
-                    position: 'absolute',
-                    whiteSpace: 'nowrap',
-                    visibility: 'hidden',
-                } },
-                React.createElement(material.RadioGroup, __assign({}, props, { style: { display: 'inline-flex', flexWrap: 'nowrap' }, name: name, row: inline, value: value === undefined ? null : value, onChange: handleChange }), items.map(function (_a, idx) {
-                    var value = _a.value, label = _a.label, itemDisabled = _a.disabled;
-                    return (React.createElement(material.FormControlLabel, { ref: idx === 0
-                            ? function (ref) {
-                                resizeHeightDetectorRef.current = ref;
-                            }
-                            : null, key: idx, control: React.createElement(material.Radio, { icon: React.createElement(iconsMaterial.RadioButtonUnchecked, { color: error ? 'error' : undefined }), checkedIcon: React.createElement(iconsMaterial.RadioButtonChecked, { color: error ? 'error' : undefined }), color: color, size: size }), label: label, style: {
-                            color: error ? theme.palette.error.main : '',
-                            marginTop: -5,
-                            marginBottom: -5,
-                            whiteSpace: 'nowrap',
-                        }, value: value, disabled: disabled || readOnly || itemDisabled }));
-                })))),
-            React.createElement("div", null,
-                React.createElement(material.RadioGroup, __assign({}, props, { ref: function (ref) {
-                        resizeRealHeightDetectorRef.current = ref;
+        return (React.createElement("div", { style: { display: 'flex', flexDirection: 'row', alignItems: 'center', width: fullWidth ? '100%' : undefined } },
+            startAdornment && React.createElement("div", null, startAdornment),
+            React.createElement("div", { style: { flex: 1 } },
+                !fullWidth && !isOnGetItemLoading && !loading && items && (React.createElement("div", { ref: function (ref) {
+                        resizeWidthDetectorRef.current = ref;
                     }, style: {
-                        display: 'inline-flex',
-                        visibility: width == null ? 'hidden' : undefined,
-                        position: width == null ? 'absolute' : undefined,
-                        flexWrap: nowrap ? 'nowrap' : undefined,
-                    }, name: name, row: inline, value: value === undefined ? null : value, onChange: handleChange }), isOnGetItemLoading || loading ? (React.createElement("div", { style: { position: 'relative' } },
-                    React.createElement(material.FormControlLabel, { label: '', control: React.createElement(material.Radio, { color: color, size: size }), style: { visibility: 'hidden' } }),
-                    React.createElement("div", { style: { position: 'absolute', left: 0, top: 11, opacity: 0.54 } },
-                        React.createElement(material.CircularProgress, { size: size === 'small' ? 12 : 16, color: 'inherit' })))) : (React.createElement(React.Fragment, null, items &&
-                    items.map(function (_a, idx) {
+                        display: 'grid',
+                        position: 'absolute',
+                        whiteSpace: 'nowrap',
+                        visibility: 'hidden',
+                    } },
+                    React.createElement(material.RadioGroup, __assign({}, props, { style: { display: 'inline-flex', flexWrap: 'nowrap' }, name: name, row: inline, value: value === undefined ? null : value, onChange: handleChange }), items.map(function (_a, idx) {
                         var value = _a.value, label = _a.label, itemDisabled = _a.disabled;
-                        return (React.createElement(material.FormControlLabel, { key: idx, control: React.createElement(material.Radio, { icon: React.createElement(iconsMaterial.RadioButtonUnchecked, { color: error ? 'error' : undefined }), checkedIcon: React.createElement(iconsMaterial.RadioButtonChecked, { color: error ? 'error' : undefined }), color: color, size: size, slotProps: idx === 0 ? { input: { ref: firstInputRef } } : undefined }), label: label, style: {
+                        return (React.createElement(material.FormControlLabel, { ref: idx === 0
+                                ? function (ref) {
+                                    resizeHeightDetectorRef.current = ref;
+                                }
+                                : null, key: idx, control: React.createElement(material.Radio, { icon: React.createElement(iconsMaterial.RadioButtonUnchecked, { color: error ? 'error' : undefined }), checkedIcon: React.createElement(iconsMaterial.RadioButtonChecked, { color: error ? 'error' : undefined }), color: color, size: size }), label: label, style: {
                                 color: error ? theme.palette.error.main : '',
-                                whiteSpace: 'nowrap',
                                 marginTop: -5,
                                 marginBottom: -5,
+                                whiteSpace: 'nowrap',
                             }, value: value, disabled: disabled || readOnly || itemDisabled }));
-                    })))))));
+                    })))),
+                React.createElement("div", null,
+                    React.createElement(material.RadioGroup, __assign({}, props, { ref: function (ref) {
+                            resizeRealHeightDetectorRef.current = ref;
+                        }, style: {
+                            display: 'inline-flex',
+                            visibility: width == null ? 'hidden' : undefined,
+                            position: width == null ? 'absolute' : undefined,
+                            flexWrap: nowrap ? 'nowrap' : undefined,
+                        }, name: name, row: inline, value: value === undefined ? null : value, onChange: handleChange }), isOnGetItemLoading || loading ? (React.createElement("div", { style: { position: 'relative' } },
+                        React.createElement(material.FormControlLabel, { label: '', control: React.createElement(material.Radio, { color: color, size: size }), style: { visibility: 'hidden' } }),
+                        React.createElement("div", { style: { position: 'absolute', left: 0, top: 11, opacity: 0.54 } },
+                            React.createElement(material.CircularProgress, { size: size === 'small' ? 12 : 16, color: 'inherit' })))) : (React.createElement(React.Fragment, null, items &&
+                        items.map(function (_a, idx) {
+                            var value = _a.value, label = _a.label, itemDisabled = _a.disabled;
+                            return (React.createElement(material.FormControlLabel, { key: idx, control: React.createElement(material.Radio, { icon: React.createElement(iconsMaterial.RadioButtonUnchecked, { color: error ? 'error' : undefined }), checkedIcon: React.createElement(iconsMaterial.RadioButtonChecked, { color: error ? 'error' : undefined }), color: color, size: size, slotProps: idx === 0 ? { input: { ref: firstInputRef } } : undefined }), label: label, style: {
+                                    color: error ? theme.palette.error.main : '',
+                                    whiteSpace: 'nowrap',
+                                    marginTop: -5,
+                                    marginBottom: -5,
+                                }, value: value, disabled: disabled || readOnly || itemDisabled }));
+                        })))))),
+            endAdornment && React.createElement("div", null, endAdornment)));
     }, [
         color,
         disabled,
+        endAdornment,
         error,
         fullWidth,
         handleChange,
@@ -3068,6 +3072,7 @@ var PFormRadioGroup = ToForwardRefExoticComponent(AutoTypeForwardRef(function (_
         resizeRealHeightDetectorRef,
         resizeWidthDetectorRef,
         size,
+        startAdornment,
         theme.palette.error.main,
         value,
         width,
@@ -3084,7 +3089,7 @@ PFormRadioGroup.displayName = 'PFormRadioGroup';insertStyle(".PFormToggleButtonG
      * ******************************************************************************************************************/
     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, _b = _a.type, type = _b === void 0 ? 'button' : _b, initLoading = _a.loading, initItems = _a.items, initValue = _a.value, initData = _a.data, initError = _a.error, helperText = _a.helperText, initDisabled = _a.disabled, readOnly = _a.readOnly, required = _a.required, notAllowEmptyValue = _a.notAllowEmptyValue, exceptValue = _a.exceptValue, initWidth = _a.width, multiple = _a.multiple, _c = _a.formValueSeparator, formValueSeparator = _c === void 0 ? ',' : _c, formValueSort = _a.formValueSort, initHidden = _a.hidden, itemWidth = _a.itemWidth, onLoadItems = _a.onLoadItems, 
+    name = _a.name, labelIcon = _a.labelIcon, label = _a.label, _b = _a.type, type = _b === void 0 ? 'button' : _b, initLoading = _a.loading, initItems = _a.items, initValue = _a.value, initData = _a.data, initError = _a.error, helperText = _a.helperText, initDisabled = _a.disabled, readOnly = _a.readOnly, required = _a.required, notAllowEmptyValue = _a.notAllowEmptyValue, exceptValue = _a.exceptValue, initWidth = _a.width, multiple = _a.multiple, _c = _a.formValueSeparator, formValueSeparator = _c === void 0 ? ',' : _c, formValueSort = _a.formValueSort, initHidden = _a.hidden, itemWidth = _a.itemWidth, onLoadItems = _a.onLoadItems, startAdornment = _a.startAdornment, endAdornment = _a.endAdornment, 
     //----------------------------------------------------------------------------------------------------------------
     onChange = _a.onChange, onValue = _a.onValue, onValidate = _a.onValidate, 
     //----------------------------------------------------------------------------------------------------------------
@@ -3493,29 +3498,33 @@ PFormRadioGroup.displayName = 'PFormRadioGroup';insertStyle(".PFormToggleButtonG
         return isOnGetItemLoading || loading ? (React.createElement("div", { style: { opacity: 0.54 }, ref: function (ref) {
                 refForLoadingResizeHeightDetect.current = ref;
             } },
-            React.createElement(material.CircularProgress, { size: 16, color: 'inherit' }))) : (React.createElement(React.Fragment, null,
-            !fullWidth && !isOnGetItemLoading && !loading && items && (React.createElement("div", { ref: function (ref) {
-                    refForResizeWidthDetect.current = ref;
-                }, style: {
-                    display: 'grid',
-                    position: 'absolute',
-                    whiteSpace: 'nowrap',
-                    visibility: 'hidden',
-                } },
-                React.createElement(material.ToggleButtonGroup, { className: 'ToggleButtonGroup', exclusive: !multiple }, buttons))),
-            React.createElement(material.ToggleButtonGroup, { ref: function (ref) {
-                    refForButtonsResizeHeightDetect.current = ref;
-                }, className: 'ToggleButtonGroup', exclusive: !multiple, fullWidth: fullWidth, value: realValue, onChange: handleChange, style: {
-                    width: !fullWidth && formColWidth && typeof width === 'number' && width > formColWidth
-                        ? formColWidth
-                        : undefined,
-                    flexWrap: type === 'checkbox' || type === 'radio' ? 'wrap' : 'nowrap',
-                }, "aria-labelledby": compare.notEmpty(label) ? labelId : undefined }, isOnGetItemLoading || loading || !items || compare.empty(items) ? (React.createElement(material.ToggleButton, { ref: function (ref) {
-                    refForButtonResizeHeightDetect.current = ref;
-                }, size: size, className: 'ToggleButton', disabled: disabled || readOnly, value: '', style: { visibility: 'hidden' } })) : (buttons))));
+            React.createElement(material.CircularProgress, { size: 16, color: 'inherit' }))) : (React.createElement("div", { style: { display: 'flex', flexDirection: 'row', alignItems: 'center', width: fullWidth ? '100%' : undefined } },
+            startAdornment && React.createElement("div", null, startAdornment),
+            React.createElement("div", { style: { flex: 1 } },
+                !fullWidth && !isOnGetItemLoading && !loading && items && (React.createElement("div", { ref: function (ref) {
+                        refForResizeWidthDetect.current = ref;
+                    }, style: {
+                        display: 'grid',
+                        position: 'absolute',
+                        whiteSpace: 'nowrap',
+                        visibility: 'hidden',
+                    } },
+                    React.createElement(material.ToggleButtonGroup, { className: 'ToggleButtonGroup', exclusive: !multiple }, buttons))),
+                React.createElement(material.ToggleButtonGroup, { ref: function (ref) {
+                        refForButtonsResizeHeightDetect.current = ref;
+                    }, className: 'ToggleButtonGroup', exclusive: !multiple, fullWidth: fullWidth, value: realValue, onChange: handleChange, style: {
+                        width: !fullWidth && formColWidth && typeof width === 'number' && width > formColWidth
+                            ? formColWidth
+                            : undefined,
+                        flexWrap: type === 'checkbox' || type === 'radio' ? 'wrap' : 'nowrap',
+                    }, "aria-labelledby": compare.notEmpty(label) ? labelId : undefined }, isOnGetItemLoading || loading || !items || compare.empty(items) ? (React.createElement(material.ToggleButton, { ref: function (ref) {
+                        refForButtonResizeHeightDetect.current = ref;
+                    }, size: size, className: 'ToggleButton', disabled: disabled || readOnly, value: '', style: { visibility: 'hidden' } })) : (buttons))),
+            endAdornment && React.createElement("div", null, endAdornment)));
     }, [
         buttons,
         disabled,
+        endAdornment,
         formColWidth,
         fullWidth,
         handleChange,
@@ -3532,6 +3541,7 @@ PFormRadioGroup.displayName = 'PFormRadioGroup';insertStyle(".PFormToggleButtonG
         refForLoadingResizeHeightDetect,
         refForResizeWidthDetect,
         size,
+        startAdornment,
         type,
         width,
     ]);

package/package.json

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