@pdg/react-form 1.0.140 → 1.0.142

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/index.esm.js +155 -39
  2. package/dist/index.js +155 -39
  3. package/package.json +1 -1
package/dist/index.esm.js CHANGED
@@ -965,7 +965,9 @@ var templateObject_1$f, templateObject_2$8, templateObject_3$4;var FormCol = Rea
965
965
  * Render
966
966
  * ******************************************************************************************************************/
967
967
  return (React.createElement(FormContextProvider, { value: __assign(__assign({}, otherFormState), { variant: variant, size: size, color: color, spacing: spacing, focused: focused, labelShrink: labelShrink, fullWidth: fullWidth, formColGap: formColGap, formColXs: xs || formColAutoXs || 12, formColWidth: formColWidth, formColWithLabel: !!label, formColWithHelperText: !!helperText }) },
968
- React.createElement(Grid, { ref: gridRef, size: { xs: xs || formColAutoXs || 12 }, className: classNames(className, 'FormCol', !!label && 'with-label', !!helperText && 'with-helper-text'), style: hidden ? __assign(__assign({}, initStyle), { display: 'none' }) : initStyle, sx: sx },
968
+ React.createElement(Grid, { ref: function (ref) {
969
+ gridRef.current = ref;
970
+ }, size: { xs: xs || formColAutoXs || 12 }, className: classNames(className, 'FormCol', !!label && 'with-label', !!helperText && 'with-helper-text'), style: hidden ? __assign(__assign({}, initStyle), { display: 'none' }) : initStyle, sx: sx },
969
971
  React.createElement("div", null,
970
972
  label && (React.createElement("div", { className: 'FormCol-header' },
971
973
  React.createElement(StyledFormLabelContainerDiv, null,
@@ -1002,7 +1004,11 @@ var templateObject_1$e, templateObject_2$7;var FormBody = function (_a) {
1002
1004
  }
1003
1005
  : undefined;
1004
1006
  }, [fullHeight, height]);
1005
- return (React.createElement(StyledContainerDiv, { ref: fullHeight ? containerRef : undefined, className: 'FormBody', style: style },
1007
+ return (React.createElement(StyledContainerDiv, { ref: fullHeight
1008
+ ? function (ref) {
1009
+ containerRef.current = ref;
1010
+ }
1011
+ : undefined, className: 'FormBody', style: style },
1006
1012
  React.createElement(StyledContentDiv, { style: contentStyle },
1007
1013
  React.createElement(Grid, { container: true, spacing: spacing, direction: 'column' }, children))));
1008
1014
  };var FormFooter = function (_a) {
@@ -1406,7 +1412,7 @@ FormText.displayName = 'FormText';var FormTagText = React.forwardRef(function (_
1406
1412
  /********************************************************************************************************************
1407
1413
  * Render
1408
1414
  * ******************************************************************************************************************/
1409
- return (React.createElement(StyledFormText, __assign({ ref: ref }, props, { value: valueRef.current, onChange: handleChange, onKeyDown: handleKeyDown, onBlur: handleBlur })));
1415
+ return (React.createElement(StyledFormText, __assign({ ref: ref }, props, { clear: false, value: valueRef.current, onChange: handleChange, onKeyDown: handleKeyDown, onBlur: handleBlur })));
1410
1416
  });
1411
1417
  /********************************************************************************************************************
1412
1418
  * Styled Components
@@ -1417,11 +1423,15 @@ var FormTag = React.forwardRef(function (_a, ref) {
1417
1423
  /********************************************************************************************************************
1418
1424
  * FormState
1419
1425
  * ******************************************************************************************************************/
1420
- var className = _a.className, name = _a.name, _b = _a.value, initValue = _b === void 0 ? _emptyValue : _b, exceptValue = _a.exceptValue, _c = _a.clear, clear = _c === void 0 ? true : _c, required = _a.required, readOnly = _a.readOnly, maxLength = _a.maxLength, initDisabled = _a.disabled, initFullWidth = _a.fullWidth, initError = _a.error, helperText = _a.helperText, _d = _a.formValueSeparator, formValueSeparator = _d === void 0 ? ',' : _d, formValueSort = _a.formValueSort, limitTags = _a.limitTags, getLimitTagsText = _a.getLimitTagsText, slotProps = _a.slotProps, onAppendTag = _a.onAppendTag, onRemoveTag = _a.onRemoveTag, onValidate = _a.onValidate, onChange = _a.onChange, onValue = _a.onValue, props = __rest(_a, ["className", "name", "value", "exceptValue", "clear", "required", "readOnly", "maxLength", "disabled", "fullWidth", "error", "helperText", "formValueSeparator", "formValueSort", "limitTags", "getLimitTagsText", "slotProps", "onAppendTag", "onRemoveTag", "onValidate", "onChange", "onValue"]);
1421
- var _e = useFormState(), formFullWidth = _e.fullWidth, formDisabled = _e.disabled, onAddValueItem = _e.onAddValueItem, onValueChange = _e.onValueChange, onValueChangeByUser = _e.onValueChangeByUser, onRequestSearchSubmit = _e.onRequestSearchSubmit, otherFormState = __rest(_e, ["fullWidth", "disabled", "onAddValueItem", "onValueChange", "onValueChangeByUser", "onRequestSearchSubmit"]);
1426
+ var initVariant = _a.variant, initSize = _a.size,
1427
+ //----------------------------------------------------------------------------------------------------------------
1428
+ className = _a.className, name = _a.name, _b = _a.value, initValue = _b === void 0 ? _emptyValue : _b, exceptValue = _a.exceptValue, _c = _a.clear, clear = _c === void 0 ? true : _c, required = _a.required, readOnly = _a.readOnly, maxLength = _a.maxLength, initDisabled = _a.disabled, initFullWidth = _a.fullWidth, initError = _a.error, helperText = _a.helperText, _d = _a.formValueSeparator, formValueSeparator = _d === void 0 ? ',' : _d, formValueSort = _a.formValueSort, limitTags = _a.limitTags, getLimitTagsText = _a.getLimitTagsText, slotProps = _a.slotProps, onAppendTag = _a.onAppendTag, onRemoveTag = _a.onRemoveTag, onValidate = _a.onValidate, onChange = _a.onChange, onValue = _a.onValue, props = __rest(_a, ["variant", "size", "className", "name", "value", "exceptValue", "clear", "required", "readOnly", "maxLength", "disabled", "fullWidth", "error", "helperText", "formValueSeparator", "formValueSort", "limitTags", "getLimitTagsText", "slotProps", "onAppendTag", "onRemoveTag", "onValidate", "onChange", "onValue"]);
1429
+ var _e = useFormState(), formVariant = _e.variant, formSize = _e.size, formFullWidth = _e.fullWidth, formDisabled = _e.disabled, onAddValueItem = _e.onAddValueItem, onValueChange = _e.onValueChange, onValueChangeByUser = _e.onValueChangeByUser, onRequestSearchSubmit = _e.onRequestSearchSubmit, otherFormState = __rest(_e, ["variant", "size", "fullWidth", "disabled", "onAddValueItem", "onValueChange", "onValueChangeByUser", "onRequestSearchSubmit"]);
1422
1430
  /********************************************************************************************************************
1423
1431
  * FormState - Variables
1424
1432
  * ******************************************************************************************************************/
1433
+ var variant = ifUndefined(initVariant, formVariant);
1434
+ var size = ifUndefined(initSize, formSize);
1425
1435
  var fullWidth = ifUndefined(initFullWidth, formFullWidth);
1426
1436
  /********************************************************************************************************************
1427
1437
  * State
@@ -1548,16 +1558,19 @@ var FormTag = React.forwardRef(function (_a, ref) {
1548
1558
  }
1549
1559
  }, [ref, getCommands]);
1550
1560
  var handleRenderValue = useCallback(function (tags) {
1551
- return tags.map(function (tag) { return (React.createElement(Chip, { className: 'MuiAutocomplete-tag', key: tag, label: tag, size: 'small', disabled: readOnly || disabled, onDelete: readOnly || disabled ? undefined : function () { return removeTag(tag); } })); });
1552
- }, [disabled, readOnly, removeTag]);
1561
+ return tags.map(function (tag) { return (React.createElement(Chip, { className: 'MuiAutocomplete-tag', key: tag, label: tag, size: 'small', style: variant === 'outlined' && size === 'small' ? { marginTop: 2, marginBottom: 0 } : undefined, disabled: readOnly || disabled, onDelete: readOnly || disabled ? undefined : function () { return removeTag(tag); } })); });
1562
+ }, [disabled, readOnly, removeTag, size, variant]);
1553
1563
  /********************************************************************************************************************
1554
1564
  * Render
1555
1565
  * ******************************************************************************************************************/
1556
1566
  var handleRenderInput = useCallback(function (params) {
1567
+ var _a, _b;
1557
1568
  var htmlInputProps = __assign(__assign({}, params.inputProps), { className: classNames('FormTag-Input', readOnly && 'Mui-disabled'), readOnly: readOnly, tabIndex: readOnly ? -1 : undefined, maxLength: maxLength });
1558
1569
  delete htmlInputProps.onChange;
1559
1570
  delete htmlInputProps.value;
1560
- var renderProps = __assign({ name: name, clear: clear, className: classNames(className, 'FormValueItem', 'FormTag'), error: error, disabled: disabled, fullWidth: fullWidth, required: required, exceptValue: exceptValue, slotProps: __assign(__assign({}, slotProps), { inputLabel: __assign(__assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.inputLabel), { htmlFor: params.InputLabelProps.htmlFor, id: params.InputLabelProps.id }), input: __assign(__assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.input), { className: params.InputProps.className, ref: params.InputProps.ref, startAdornment: params.InputProps.startAdornment }), htmlInput: __assign(__assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.htmlInput), htmlInputProps) }), helperText: error ? errorHelperText : helperText, onAppendTag: appendTag }, props);
1571
+ var renderProps = __assign({ name: name, clear: clear, className: classNames(className, 'FormValueItem', 'FormTag'), error: error, disabled: disabled, fullWidth: fullWidth, required: required, exceptValue: exceptValue, slotProps: __assign(__assign({}, slotProps), { inputLabel: __assign(__assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.inputLabel), { htmlFor: params.InputLabelProps.htmlFor, id: params.InputLabelProps.id }), input: __assign(__assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.input), { style: __assign(__assign({}, (_a = slotProps === null || slotProps === void 0 ? void 0 : slotProps.input) === null || _a === void 0 ? void 0 : _a.style), (variant === 'outlined' && size === 'small'
1572
+ ? { paddingTop: 7, paddingBottom: 6, marginTop: -2 }
1573
+ : undefined)), className: params.InputProps.className, ref: params.InputProps.ref, startAdornment: params.InputProps.startAdornment }), htmlInput: __assign(__assign(__assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.htmlInput), htmlInputProps), { style: __assign(__assign(__assign({}, (_b = slotProps === null || slotProps === void 0 ? void 0 : slotProps.htmlInput) === null || _b === void 0 ? void 0 : _b.style), htmlInputProps.style), (variant === 'outlined' && size === 'small' ? { marginTop: 4, paddingBottom: 2 } : undefined)) }) }), helperText: error ? errorHelperText : helperText, onAppendTag: appendTag }, props);
1561
1574
  return React.createElement(FormTagText, __assign({ ref: handleRef }, renderProps));
1562
1575
  }, [
1563
1576
  appendTag,
@@ -1575,9 +1588,11 @@ var FormTag = React.forwardRef(function (_a, ref) {
1575
1588
  props,
1576
1589
  readOnly,
1577
1590
  required,
1591
+ size,
1578
1592
  slotProps,
1593
+ variant,
1579
1594
  ]);
1580
- return (React.createElement(FormContextProvider, { value: __assign(__assign({}, otherFormState), { fullWidth: formFullWidth, onAddValueItem: handleAddValueItem, onValueChange: function () { }, onValueChangeByUser: function () { }, onRequestSearchSubmit: function () { } }) },
1595
+ return (React.createElement(FormContextProvider, { value: __assign(__assign({}, otherFormState), { variant: formVariant, size: formSize, fullWidth: formFullWidth, onAddValueItem: handleAddValueItem, onValueChange: function () { }, onValueChangeByUser: function () { }, onRequestSearchSubmit: function () { } }) },
1581
1596
  React.createElement(Autocomplete, { options: [], multiple: true, freeSolo: true, value: value, readOnly: readOnly, disableClearable: true, limitTags: limitTags, getLimitTagsText: getLimitTagsText, disabled: disabled, renderValue: handleRenderValue, style: { display: fullWidth ? 'block' : 'inline-block', width: fullWidth ? '100%' : undefined }, renderInput: handleRenderInput })));
1582
1597
  });
1583
1598
  FormTag.displayName = 'FormTag';var FormEmail = React.forwardRef(function (_a, ref) {
@@ -2533,9 +2548,15 @@ styleInject(css_248z$e);var FormItemBase = React.forwardRef(function (_a, ref) {
2533
2548
  React.createElement(PdgIcon, { style: { verticalAlign: 'middle', marginRight: 3, marginTop: -4, marginBottom: -2 } }, labelIcon),
2534
2549
  React.createElement("span", { style: { verticalAlign: 'middle' } }, label))) : (label))),
2535
2550
  React.createElement("div", { className: 'FormItemBase-Control-wrap', style: __assign({ display: 'grid', marginTop: hideLabel ? 0 : undefined }, controlContainerStyle) }, autoSize ? (React.createElement(React.Fragment, null,
2536
- variant === 'standard' && (React.createElement(Input, { ref: inputRef, size: size, fullWidth: false, disabled: true, style: { visibility: 'hidden', width: 0 } })),
2537
- variant === 'outlined' && (React.createElement(OutlinedInput, { ref: inputRef, size: size, fullWidth: false, disabled: true, style: { visibility: 'hidden', width: 0 } })),
2538
- variant === 'filled' && (React.createElement(FilledInput, { ref: inputRef, size: size, fullWidth: false, disabled: true, style: { visibility: 'hidden', width: 0 } })),
2551
+ variant === 'standard' && (React.createElement(Input, { ref: function (ref) {
2552
+ inputRef.current = ref;
2553
+ }, size: size, fullWidth: false, disabled: true, style: { visibility: 'hidden', width: 0 } })),
2554
+ variant === 'outlined' && (React.createElement(OutlinedInput, { ref: function (ref) {
2555
+ inputRef.current = ref;
2556
+ }, size: size, fullWidth: false, disabled: true, style: { visibility: 'hidden', width: 0 } })),
2557
+ variant === 'filled' && (React.createElement(FilledInput, { ref: function (ref) {
2558
+ inputRef.current = ref;
2559
+ }, size: size, fullWidth: false, disabled: true, style: { visibility: 'hidden', width: 0 } })),
2539
2560
  React.createElement("div", { className: 'FormItemBase-Control', style: {
2540
2561
  width: fullWidth ? '100%' : 'auto',
2541
2562
  display: 'grid',
@@ -2737,7 +2758,9 @@ FormItemBase.displayName = 'FormItemBase';var FormCheckbox = React.forwardRef(fu
2737
2758
  /********************************************************************************************************************
2738
2759
  * Render
2739
2760
  * ******************************************************************************************************************/
2740
- return (React.createElement(FormItemBase, { variant: variant, size: size, color: color, focused: focused, className: classNames(className, 'FormValueItem', 'FormCheckbox'), labelIcon: labelIcon, label: label, error: error, fullWidth: fullWidth, helperText: error ? errorHelperText : helperText, helperTextProps: { style: { marginLeft: 2 } }, style: __assign({ width: fullWidth ? '100%' : width || 100, paddingLeft: 3 }, initStyle), sx: sx, hidden: hidden, autoSize: true, controlHeight: height || (size === 'small' ? 35 : 39), controlVerticalCenter: true, control: React.createElement(FormControlLabel, { ref: labelRef, control: React.createElement(Checkbox, __assign({ name: name, color: color, size: size, inputRef: initInputRef ? initInputRef : inputRef, action: initAction ? initAction : actionRef, checked: checked, checkedIcon: React.createElement(CheckBox, { color: error ? 'error' : undefined }), icon: React.createElement(CheckBoxOutlineBlank, { color: error ? 'error' : undefined }), onChange: handleChange, disabled: disabled || readOnly }, props)), label: React.createElement(Typography, { color: error ? 'error' : readOnly || disabled ? theme.palette.text.disabled : undefined, whiteSpace: 'nowrap' }, text) }) }));
2761
+ return (React.createElement(FormItemBase, { variant: variant, size: size, color: color, focused: focused, className: classNames(className, 'FormValueItem', 'FormCheckbox'), labelIcon: labelIcon, label: label, error: error, fullWidth: fullWidth, helperText: error ? errorHelperText : helperText, helperTextProps: { style: { marginLeft: 2 } }, style: __assign({ width: fullWidth ? '100%' : width || 100, paddingLeft: 3 }, initStyle), sx: sx, hidden: hidden, autoSize: true, controlHeight: height || (size === 'small' ? 35 : 39), controlVerticalCenter: true, control: React.createElement(FormControlLabel, { ref: function (ref) {
2762
+ labelRef.current = ref;
2763
+ }, control: React.createElement(Checkbox, __assign({ name: name, color: color, size: size, inputRef: initInputRef ? initInputRef : inputRef, action: initAction ? initAction : actionRef, checked: checked, checkedIcon: React.createElement(CheckBox, { color: error ? 'error' : undefined }), icon: React.createElement(CheckBoxOutlineBlank, { color: error ? 'error' : undefined }), onChange: handleChange, disabled: disabled || readOnly }, props)), label: React.createElement(Typography, { color: error ? 'error' : readOnly || disabled ? theme.palette.text.disabled : undefined, whiteSpace: 'nowrap' }, text) }) }));
2741
2764
  });
2742
2765
  FormCheckbox.displayName = 'FormCheckbox';var PADDING_LEFT = 3;
2743
2766
  var FormRadioGroup = ToForwardRefExoticComponent(AutoTypeForwardRef(function (_a, ref) {
@@ -3031,12 +3054,11 @@ var FormRadioGroup = ToForwardRefExoticComponent(AutoTypeForwardRef(function (_a
3031
3054
  /********************************************************************************************************************
3032
3055
  * Render
3033
3056
  * ******************************************************************************************************************/
3034
- var singleHeight = height || (size === 'small' ? 35 : 39);
3035
- var isMultiline = singleHeight <= ifUndefined(realHeight, 0);
3036
- 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: {
3037
- paddingTop: isMultiline && size === 'medium' ? 4 : undefined,
3038
- }, controlVerticalCenter: !isMultiline, control: React.createElement(React.Fragment, null,
3039
- !fullWidth && !isOnGetItemLoading && !loading && items && (React.createElement("div", { ref: resizeWidthDetectorRef, style: {
3057
+ var control = useMemo(function () {
3058
+ return (React.createElement(React.Fragment, null,
3059
+ !fullWidth && !isOnGetItemLoading && !loading && items && (React.createElement("div", { ref: function (ref) {
3060
+ resizeWidthDetectorRef.current = ref;
3061
+ }, style: {
3040
3062
  display: 'grid',
3041
3063
  position: 'absolute',
3042
3064
  whiteSpace: 'nowrap',
@@ -3044,7 +3066,11 @@ var FormRadioGroup = ToForwardRefExoticComponent(AutoTypeForwardRef(function (_a
3044
3066
  } },
3045
3067
  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) {
3046
3068
  var value = _a.value, label = _a.label, itemDisabled = _a.disabled;
3047
- return (React.createElement(FormControlLabel, { ref: idx === 0 ? resizeHeightDetectorRef : 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: {
3069
+ return (React.createElement(FormControlLabel, { ref: idx === 0
3070
+ ? function (ref) {
3071
+ resizeHeightDetectorRef.current = ref;
3072
+ }
3073
+ : 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: {
3048
3074
  color: error ? theme.palette.error.main : '',
3049
3075
  marginTop: -5,
3050
3076
  marginBottom: -5,
@@ -3052,7 +3078,9 @@ var FormRadioGroup = ToForwardRefExoticComponent(AutoTypeForwardRef(function (_a
3052
3078
  }, value: value, disabled: disabled || readOnly || itemDisabled }));
3053
3079
  })))),
3054
3080
  React.createElement("div", null,
3055
- React.createElement(RadioGroup, __assign({}, props, { ref: resizeRealHeightDetectorRef, style: {
3081
+ React.createElement(RadioGroup, __assign({}, props, { ref: function (ref) {
3082
+ resizeRealHeightDetectorRef.current = ref;
3083
+ }, style: {
3056
3084
  display: 'inline-flex',
3057
3085
  visibility: width == null ? 'hidden' : undefined,
3058
3086
  position: width == null ? 'absolute' : undefined,
@@ -3063,13 +3091,40 @@ var FormRadioGroup = ToForwardRefExoticComponent(AutoTypeForwardRef(function (_a
3063
3091
  React.createElement(CircularProgress, { size: size === 'small' ? 12 : 16, color: 'inherit' })))) : (React.createElement(React.Fragment, null, items &&
3064
3092
  items.map(function (_a, idx) {
3065
3093
  var value = _a.value, label = _a.label, itemDisabled = _a.disabled;
3066
- 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, inputRef: idx === 0 ? firstInputRef : null }), label: label, style: {
3094
+ 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: {
3067
3095
  color: error ? theme.palette.error.main : '',
3068
3096
  whiteSpace: 'nowrap',
3069
3097
  marginTop: -5,
3070
3098
  marginBottom: -5,
3071
3099
  }, value: value, disabled: disabled || readOnly || itemDisabled }));
3072
- })))))) }));
3100
+ })))))));
3101
+ }, [
3102
+ color,
3103
+ disabled,
3104
+ error,
3105
+ fullWidth,
3106
+ handleChange,
3107
+ inline,
3108
+ isOnGetItemLoading,
3109
+ items,
3110
+ loading,
3111
+ name,
3112
+ nowrap,
3113
+ props,
3114
+ readOnly,
3115
+ resizeHeightDetectorRef,
3116
+ resizeRealHeightDetectorRef,
3117
+ resizeWidthDetectorRef,
3118
+ size,
3119
+ theme.palette.error.main,
3120
+ value,
3121
+ width,
3122
+ ]);
3123
+ var singleHeight = height || (size === 'small' ? 35 : 39);
3124
+ var isMultiline = singleHeight <= ifUndefined(realHeight, 0);
3125
+ 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: {
3126
+ paddingTop: isMultiline && size === 'medium' ? 4 : undefined,
3127
+ }, controlVerticalCenter: !isMultiline, control: control }));
3073
3128
  }));
3074
3129
  FormRadioGroup.displayName = 'FormRadioGroup';var css_248z$d = ".FormToggleButtonGroup.loading .FormItemBase-Control-wrap .FormItemBase-Control {\n align-items: center !important;\n}\n.FormToggleButtonGroup .ToggleButton {\n display: inline-flex;\n padding: 0 10px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n align-items: center;\n}\n.FormToggleButtonGroup .ToggleButton .__label__ {\n height: 0;\n line-height: 0 !important;\n overflow: visible !important;\n}\n.FormToggleButtonGroup.type-checkbox .ToggleButton, .FormToggleButtonGroup.type-radio .ToggleButton {\n padding-left: 3px;\n padding-right: 5px;\n border: 0 !important;\n margin-left: 0 !important;\n justify-content: flex-start;\n display: flex;\n background-color: transparent !important;\n}\n.FormToggleButtonGroup.type-checkbox .ToggleButton:not(:last-child), .FormToggleButtonGroup.type-radio .ToggleButton:not(:last-child) {\n margin-right: 5px;\n}\n.FormToggleButtonGroup.type-checkbox .ToggleButton .__checkbox-checked__,\n.FormToggleButtonGroup.type-checkbox .ToggleButton .__checkbox-unchecked__, .FormToggleButtonGroup.type-radio .ToggleButton .__checkbox-checked__,\n.FormToggleButtonGroup.type-radio .ToggleButton .__checkbox-unchecked__ {\n margin-right: 3px;\n}\n.FormToggleButtonGroup.type-checkbox .ToggleButton .__checkbox-checked__, .FormToggleButtonGroup.type-radio .ToggleButton .__checkbox-checked__ {\n display: none;\n}\n.FormToggleButtonGroup.type-checkbox .ToggleButton.Mui-selected .__checkbox-checked__, .FormToggleButtonGroup.type-radio .ToggleButton.Mui-selected .__checkbox-checked__ {\n display: block;\n}\n.FormToggleButtonGroup.type-checkbox .ToggleButton.Mui-selected .__checkbox-unchecked__, .FormToggleButtonGroup.type-radio .ToggleButton.Mui-selected .__checkbox-unchecked__ {\n display: none;\n}\n.FormToggleButtonGroup:not(.with-label).variant-outlined .FormItemBase-Control-wrap {\n margin-top: 15px;\n margin-bottom: -15px;\n}\n.FormToggleButtonGroup:not(.with-label).variant-outlined .FormItemBase-Control-wrap .ToggleButton {\n height: 37px;\n}\n.FormToggleButtonGroup:not(.with-label).variant-filled .FormItemBase-Control-wrap {\n margin-top: 15px;\n margin-bottom: -15px;\n}\n.FormToggleButtonGroup:not(.with-label).variant-filled .FormItemBase-Control-wrap .ToggleButton {\n height: 37px;\n}\n.FormToggleButtonGroup:not(.with-label).variant-standard .FormItemBase-Control-wrap {\n margin-top: 0px;\n margin-bottom: 0px;\n}\n.FormToggleButtonGroup:not(.with-label).variant-standard .FormItemBase-Control-wrap .ToggleButton {\n height: 28px;\n}\n.FormToggleButtonGroup:not(.with-label).size-small.variant-outlined .FormItemBase-Control-wrap {\n margin-top: 13px;\n margin-bottom: -13px;\n}\n.FormToggleButtonGroup:not(.with-label).size-small.variant-outlined .FormItemBase-Control-wrap .ToggleButton {\n height: 24px;\n}\n.FormToggleButtonGroup:not(.with-label).size-small.variant-filled .FormItemBase-Control-wrap {\n margin-top: 13px;\n margin-bottom: -13px;\n}\n.FormToggleButtonGroup:not(.with-label).size-small.variant-filled .FormItemBase-Control-wrap .ToggleButton {\n height: 31px;\n}\n.FormToggleButtonGroup:not(.with-label).size-small.variant-standard .FormItemBase-Control-wrap {\n margin-top: 0px;\n margin-bottom: 0px;\n}\n.FormToggleButtonGroup:not(.with-label).size-small.variant-standard .FormItemBase-Control-wrap .ToggleButton {\n height: 26px;\n}\n.FormToggleButtonGroup.with-label.variant-outlined .FormItemBase-Control-wrap {\n margin-top: 0;\n margin-bottom: 0;\n}\n.FormToggleButtonGroup.with-label.variant-outlined .FormItemBase-Control-wrap .ToggleButton {\n height: 37px;\n}\n.FormToggleButtonGroup.with-label.variant-filled .FormItemBase-Control-wrap {\n margin-top: 0;\n margin-bottom: 0;\n}\n.FormToggleButtonGroup.with-label.variant-filled .FormItemBase-Control-wrap .ToggleButton {\n height: 37px;\n}\n.FormToggleButtonGroup.with-label.variant-standard .FormItemBase-Control-wrap {\n margin-top: 0;\n margin-bottom: 0;\n}\n.FormToggleButtonGroup.with-label.variant-standard .FormItemBase-Control-wrap .ToggleButton {\n height: 28px;\n}\n.FormToggleButtonGroup.with-label.size-small.variant-outlined .FormItemBase-Control-wrap {\n margin-top: 0;\n margin-bottom: 0;\n}\n.FormToggleButtonGroup.with-label.size-small.variant-outlined .FormItemBase-Control-wrap .ToggleButton {\n height: 24px;\n}\n.FormToggleButtonGroup.with-label.size-small.variant-filled .FormItemBase-Control-wrap {\n margin-top: 0;\n margin-bottom: 0;\n}\n.FormToggleButtonGroup.with-label.size-small.variant-filled .FormItemBase-Control-wrap .ToggleButton {\n height: 31px;\n}\n.FormToggleButtonGroup.with-label.size-small.variant-standard .FormItemBase-Control-wrap {\n margin-top: 0;\n margin-bottom: 0;\n}\n.FormToggleButtonGroup.with-label.size-small.variant-standard .FormItemBase-Control-wrap .ToggleButton {\n height: 26px;\n}\n\n.Form .FormCol.with-label .FormToggleButtonGroup.variant-outlined .FormItemBase-Control-wrap {\n margin-top: 0;\n margin-bottom: 0;\n}\n.Form .FormCol.with-label .FormToggleButtonGroup.variant-outlined .FormItemBase-Control-wrap .ToggleButton {\n height: 37px;\n}\n.Form .FormCol.with-label .FormToggleButtonGroup.variant-filled .FormItemBase-Control-wrap {\n margin-top: 0;\n margin-bottom: 0;\n}\n.Form .FormCol.with-label .FormToggleButtonGroup.variant-filled .FormItemBase-Control-wrap .ToggleButton {\n height: 37px;\n}\n.Form .FormCol.with-label .FormToggleButtonGroup.variant-standard .FormItemBase-Control-wrap {\n margin-top: 0;\n margin-bottom: 0;\n}\n.Form .FormCol.with-label .FormToggleButtonGroup.variant-standard .FormItemBase-Control-wrap .ToggleButton {\n height: 28px;\n}\n.Form .FormCol.with-label .FormToggleButtonGroup.size-small.variant-outlined .FormItemBase-Control-wrap {\n margin-top: 0;\n margin-bottom: 0;\n}\n.Form .FormCol.with-label .FormToggleButtonGroup.size-small.variant-outlined .FormItemBase-Control-wrap .ToggleButton {\n height: 24px;\n}\n.Form .FormCol.with-label .FormToggleButtonGroup.size-small.variant-filled .FormItemBase-Control-wrap {\n margin-top: 0;\n margin-bottom: 0;\n}\n.Form .FormCol.with-label .FormToggleButtonGroup.size-small.variant-filled .FormItemBase-Control-wrap .ToggleButton {\n height: 31px;\n}\n.Form .FormCol.with-label .FormToggleButtonGroup.size-small.variant-standard .FormItemBase-Control-wrap {\n margin-top: 0;\n margin-bottom: 0;\n}\n.Form .FormCol.with-label .FormToggleButtonGroup.size-small.variant-standard .FormItemBase-Control-wrap .ToggleButton {\n height: 26px;\n}";
3075
3130
  styleInject(css_248z$d);var FormToggleButtonGroup = ToForwardRefExoticComponent(AutoTypeForwardRef(function (_a, ref) {
@@ -3233,9 +3288,9 @@ styleInject(css_248z$d);var FormToggleButtonGroup = ToForwardRefExoticComponent(
3233
3288
  }
3234
3289
  }
3235
3290
  else {
3236
- var realValue = itemsValues["".concat(finalValue)];
3237
- if (realValue != null && finalValue !== realValue) {
3238
- finalValue = realValue;
3291
+ var realValue_1 = itemsValues["".concat(finalValue)];
3292
+ if (realValue_1 != null && finalValue !== realValue_1) {
3293
+ finalValue = realValue_1;
3239
3294
  }
3240
3295
  }
3241
3296
  }
@@ -3476,23 +3531,75 @@ styleInject(css_248z$d);var FormToggleButtonGroup = ToForwardRefExoticComponent(
3476
3531
  theme.palette.error.main,
3477
3532
  type,
3478
3533
  ]);
3479
- var controlHeight = height || 0;
3480
- var isMultiline = controlHeight <= ifUndefined(realHeight, 0);
3481
- 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), (isOnGetItemLoading || loading) && 'loading'), 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 },
3534
+ var realValue = useMemo(function () {
3535
+ var newRealValue = value == null ? null : value;
3536
+ if (items && value != null) {
3537
+ if (Array.isArray(newRealValue)) {
3538
+ var stringRealValues_1 = newRealValue.map(function (v) { return v.toString(); });
3539
+ if (multiple) {
3540
+ var foundItems = items.filter(function (v) { return stringRealValues_1.includes(v.value.toString()); });
3541
+ newRealValue = foundItems.map(function (v) { return v.value; });
3542
+ }
3543
+ }
3544
+ else if (newRealValue != null) {
3545
+ var stringRealValue_1 = newRealValue.toString();
3546
+ var foundItem = items.find(function (v) { return v.value.toString() === stringRealValue_1; });
3547
+ if (foundItem) {
3548
+ newRealValue = foundItem.value;
3549
+ }
3550
+ }
3551
+ }
3552
+ return newRealValue;
3553
+ }, [items, multiple, value]);
3554
+ var control = useMemo(function () {
3555
+ return isOnGetItemLoading || loading ? (React.createElement("div", { style: { opacity: 0.54 }, ref: function (ref) {
3556
+ refForLoadingResizeHeightDetect.current = ref;
3557
+ } },
3482
3558
  React.createElement(CircularProgress, { size: 16, color: 'inherit' }))) : (React.createElement(React.Fragment, null,
3483
- !fullWidth && !isOnGetItemLoading && !loading && items && (React.createElement("div", { ref: refForResizeWidthDetect, style: {
3559
+ !fullWidth && !isOnGetItemLoading && !loading && items && (React.createElement("div", { ref: function (ref) {
3560
+ refForResizeWidthDetect.current = ref;
3561
+ }, style: {
3484
3562
  display: 'grid',
3485
3563
  position: 'absolute',
3486
3564
  whiteSpace: 'nowrap',
3487
3565
  visibility: 'hidden',
3488
3566
  } },
3489
3567
  React.createElement(ToggleButtonGroup, { className: 'ToggleButtonGroup', exclusive: !multiple }, buttons))),
3490
- React.createElement(ToggleButtonGroup, { ref: refForButtonsResizeHeightDetect, className: 'ToggleButtonGroup', exclusive: !multiple, fullWidth: fullWidth, value: value == null ? null : value, onChange: handleChange, style: {
3568
+ React.createElement(ToggleButtonGroup, { ref: function (ref) {
3569
+ refForButtonsResizeHeightDetect.current = ref;
3570
+ }, className: 'ToggleButtonGroup', exclusive: !multiple, fullWidth: fullWidth, value: realValue, onChange: handleChange, style: {
3491
3571
  width: !fullWidth && formColWidth && typeof width === 'number' && width > formColWidth
3492
3572
  ? formColWidth
3493
3573
  : undefined,
3494
3574
  flexWrap: type === 'checkbox' || type === 'radio' ? 'wrap' : 'nowrap',
3495
- }, "aria-labelledby": notEmpty(label) ? labelId : undefined }, isOnGetItemLoading || loading || !items || empty(items) ? (React.createElement(ToggleButton, { ref: refForButtonResizeHeightDetect, size: size, className: 'ToggleButton', disabled: disabled || readOnly, value: '', style: { visibility: 'hidden' } })) : (buttons)))) })));
3575
+ }, "aria-labelledby": notEmpty(label) ? labelId : undefined }, isOnGetItemLoading || loading || !items || empty(items) ? (React.createElement(ToggleButton, { ref: function (ref) {
3576
+ refForButtonResizeHeightDetect.current = ref;
3577
+ }, size: size, className: 'ToggleButton', disabled: disabled || readOnly, value: '', style: { visibility: 'hidden' } })) : (buttons))));
3578
+ }, [
3579
+ buttons,
3580
+ disabled,
3581
+ formColWidth,
3582
+ fullWidth,
3583
+ handleChange,
3584
+ isOnGetItemLoading,
3585
+ items,
3586
+ label,
3587
+ labelId,
3588
+ loading,
3589
+ multiple,
3590
+ readOnly,
3591
+ realValue,
3592
+ refForButtonResizeHeightDetect,
3593
+ refForButtonsResizeHeightDetect,
3594
+ refForLoadingResizeHeightDetect,
3595
+ refForResizeWidthDetect,
3596
+ size,
3597
+ type,
3598
+ width,
3599
+ ]);
3600
+ var controlHeight = height || 0;
3601
+ var isMultiline = controlHeight <= ifUndefined(realHeight, 0);
3602
+ 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), (isOnGetItemLoading || loading) && 'loading'), 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: control })));
3496
3603
  }));
3497
3604
  FormToggleButtonGroup.displayName = 'FormToggleButtonGroup';var FormRating = React.forwardRef(function (_a, ref) {
3498
3605
  /********************************************************************************************************************
@@ -3681,7 +3788,9 @@ FormToggleButtonGroup.displayName = 'FormToggleButtonGroup';var FormRating = Rea
3681
3788
  /********************************************************************************************************************
3682
3789
  * Render
3683
3790
  * ******************************************************************************************************************/
3684
- return (React.createElement(FormItemBase, { variant: variant, size: size, color: color, focused: focused, className: classNames(className, 'FormValueItem', 'FormRating'), labelIcon: labelIcon, label: label, error: error, fullWidth: false, required: required, helperText: error ? errorHelperText : helperText, helperTextProps: { style: { marginLeft: 5 } }, style: __assign({ width: width || 100 }, initStyle), sx: sx, hidden: hidden, autoSize: true, controlHeight: height || (size === 'small' ? 21 : 26), controlVerticalCenter: true, control: React.createElement(Rating, { ref: ratingRef, size: size === 'medium' ? 'large' : 'medium', name: name, precision: precision, highlightSelectedOnly: highlightSelectedOnly, value: value, disabled: disabled || readOnly, max: max, icon: React.createElement(PdgIcon, { color: color, size: 'inherit' }, icon ? icon : 'Star'), emptyIcon: React.createElement(PdgIcon, { size: 'inherit' }, emptyIcon ? emptyIcon : 'StarBorder'), onChange: handleChange, onFocus: function () { return setFocused(initFocused || true); }, onBlur: function () { return setFocused(initFocused || false); } }) }));
3791
+ return (React.createElement(FormItemBase, { variant: variant, size: size, color: color, focused: focused, className: classNames(className, 'FormValueItem', 'FormRating'), labelIcon: labelIcon, label: label, error: error, fullWidth: false, required: required, helperText: error ? errorHelperText : helperText, helperTextProps: { style: { marginLeft: 5 } }, style: __assign({ width: width || 100 }, initStyle), sx: sx, hidden: hidden, autoSize: true, controlHeight: height || (size === 'small' ? 21 : 26), controlVerticalCenter: true, control: React.createElement(Rating, { ref: function (ref) {
3792
+ ratingRef.current = ref;
3793
+ }, size: size === 'medium' ? 'large' : 'medium', name: name, precision: precision, highlightSelectedOnly: highlightSelectedOnly, value: value, disabled: disabled || readOnly, max: max, icon: React.createElement(PdgIcon, { color: color, size: 'inherit' }, icon ? icon : 'Star'), emptyIcon: React.createElement(PdgIcon, { size: 'inherit' }, emptyIcon ? emptyIcon : 'StarBorder'), onChange: handleChange, onFocus: function () { return setFocused(initFocused || true); }, onBlur: function () { return setFocused(initFocused || false); } }) }));
3685
3794
  });
3686
3795
  FormRating.displayName = 'FormRating';var css_248z$c = ".FormTextEditor.initializing textarea {\n display: none;\n}\n.FormTextEditor.error .tox-tinymce {\n border-color: #d32f2f;\n}\n\n.tox-menu.tox-collection.tox-collection--list .tox-collection__group .tox-menu-nav__js.tox-collection__item {\n padding-right: 20px !important;\n}\n\n.tox-notifications-container {\n display: none;\n}";
3687
3796
  styleInject(css_248z$c);var getFinalValue$8 = function (value) {
@@ -4113,7 +4222,7 @@ FormTextEditor.displayName = 'FormTextEditor';var FormAutocomplete = ToForwardRe
4113
4222
  }
4114
4223
  }
4115
4224
  else {
4116
- if (!Array.isArray(valueItem) && finalValue === valueItem.value) {
4225
+ if (!Array.isArray(valueItem) && finalValue.toString() === valueItem.value.toString()) {
4117
4226
  newComponentValue = valueItem;
4118
4227
  }
4119
4228
  }
@@ -4392,17 +4501,22 @@ FormTextEditor.displayName = 'FormTextEditor';var FormAutocomplete = ToForwardRe
4392
4501
  }
4393
4502
  }, renderValue: function (value, getItemProps) {
4394
4503
  if (Array.isArray(value)) {
4395
- return value.map(function (option, index) { return (React.createElement(Chip, __assign({ size: 'small', label: onRenderTag ? onRenderTag(option) : option.label }, getItemProps({ index: index })))); });
4504
+ return value.map(function (option, index) { return (React.createElement(Chip, __assign({ size: 'small', style: variant === 'outlined' && size === 'small' ? { marginTop: 2, marginBottom: 0 } : undefined, label: onRenderTag ? onRenderTag(option) : option.label }, getItemProps({ index: index })))); });
4396
4505
  }
4397
4506
  else {
4398
- return (React.createElement(Chip, __assign({ size: 'small', label: onRenderTag ? onRenderTag(value) : value.label }, getItemProps({ index: 0 }))));
4507
+ return (React.createElement(Chip, __assign({ size: 'small', style: variant === 'outlined' && size === 'small' ? { marginTop: 2, marginBottom: 0 } : undefined, label: onRenderTag ? onRenderTag(value) : value.label }, getItemProps({ index: 0 }))));
4399
4508
  }
4400
4509
  }, renderInput: function (params) {
4510
+ var _a;
4401
4511
  var slotProps = {
4402
- input: __assign(__assign({}, params.InputProps), { endAdornment: (React.createElement(React.Fragment, null,
4512
+ input: __assign(__assign({}, params.InputProps), { style: {
4513
+ paddingTop: variant === 'outlined' && size === 'small' ? 7 : undefined,
4514
+ paddingBottom: variant === 'outlined' && size === 'small' ? 5 : undefined,
4515
+ marginTop: variant === 'outlined' && size === 'small' ? -1 : undefined,
4516
+ }, endAdornment: (React.createElement(React.Fragment, null,
4403
4517
  loading || isOnGetItemLoading ? React.createElement(CircularProgress, { color: 'inherit', size: 20 }) : null,
4404
4518
  params.InputProps.endAdornment)) }),
4405
- htmlInput: __assign(__assign({}, params.inputProps), { tabIndex: readOnly || disabled ? -1 : undefined }),
4519
+ htmlInput: __assign(__assign({}, params.inputProps), { style: __assign(__assign({}, (_a = params.inputProps) === null || _a === void 0 ? void 0 : _a.style), (variant === 'outlined' && size === 'small' ? { marginTop: 1 } : undefined)), tabIndex: readOnly || disabled ? -1 : undefined }),
4406
4520
  };
4407
4521
  return (React.createElement(FormTextField, __assign({}, params, { ref: textFieldRef, name: name, variant: variant, size: size, color: color, labelIcon: labelIcon, label: label, labelShrink: labelShrink, required: required, focused: focused, error: error, readOnly: readOnly, helperText: error ? errorHelperText : helperText, slotProps: slotProps, placeholder: placeholder, noFormValueItem: true })));
4408
4522
  } }));
@@ -8433,7 +8547,9 @@ var FormFile = React.forwardRef(function (_a, ref) {
8433
8547
  preview,
8434
8548
  React.createElement("div", null, error ? errorHelperText : helperText)), hideLabel: !hideUrl, style: { width: fullWidth ? '100%' : undefined }, control: React.createElement("div", { className: 'control-wrap' },
8435
8549
  !hideUrl && (React.createElement("div", { className: 'file-name-wrap' },
8436
- React.createElement(TextField, { ref: innerRef, inputRef: textFieldRef, className: 'file-name', variant: variant, label: labelIcon ? (React.createElement(React.Fragment, null,
8550
+ React.createElement(TextField, { ref: function (ref) {
8551
+ innerRef.current = ref;
8552
+ }, inputRef: textFieldRef, className: 'file-name', variant: variant, label: labelIcon ? (React.createElement(React.Fragment, null,
8437
8553
  React.createElement(PdgIcon, { style: { verticalAlign: 'middle', marginRight: 4 } }, labelIcon),
8438
8554
  React.createElement("span", { style: { verticalAlign: 'middle' } }, initLabel))) : (initLabel), size: size, required: required, value: value || '', focused: focused, disabled: disabled, fullWidth: true, error: error, slotProps: {
8439
8555
  inputLabel: labelShrink ? { shrink: labelShrink } : undefined,
package/dist/index.js CHANGED
@@ -965,7 +965,9 @@ var templateObject_1$f, templateObject_2$8, templateObject_3$4;var FormCol = Rea
965
965
  * Render
966
966
  * ******************************************************************************************************************/
967
967
  return (React.createElement(FormContextProvider, { value: __assign(__assign({}, otherFormState), { variant: variant, size: size, color: color, spacing: spacing, focused: focused, labelShrink: labelShrink, fullWidth: fullWidth, formColGap: formColGap, formColXs: xs || formColAutoXs || 12, formColWidth: formColWidth, formColWithLabel: !!label, formColWithHelperText: !!helperText }) },
968
- React.createElement(material.Grid, { ref: gridRef, size: { xs: xs || formColAutoXs || 12 }, className: classNames(className, 'FormCol', !!label && 'with-label', !!helperText && 'with-helper-text'), style: hidden ? __assign(__assign({}, initStyle), { display: 'none' }) : initStyle, sx: sx },
968
+ React.createElement(material.Grid, { ref: function (ref) {
969
+ gridRef.current = ref;
970
+ }, size: { xs: xs || formColAutoXs || 12 }, className: classNames(className, 'FormCol', !!label && 'with-label', !!helperText && 'with-helper-text'), style: hidden ? __assign(__assign({}, initStyle), { display: 'none' }) : initStyle, sx: sx },
969
971
  React.createElement("div", null,
970
972
  label && (React.createElement("div", { className: 'FormCol-header' },
971
973
  React.createElement(StyledFormLabelContainerDiv, null,
@@ -1002,7 +1004,11 @@ var templateObject_1$e, templateObject_2$7;var FormBody = function (_a) {
1002
1004
  }
1003
1005
  : undefined;
1004
1006
  }, [fullHeight, height]);
1005
- return (React.createElement(StyledContainerDiv, { ref: fullHeight ? containerRef : undefined, className: 'FormBody', style: style },
1007
+ return (React.createElement(StyledContainerDiv, { ref: fullHeight
1008
+ ? function (ref) {
1009
+ containerRef.current = ref;
1010
+ }
1011
+ : undefined, className: 'FormBody', style: style },
1006
1012
  React.createElement(StyledContentDiv, { style: contentStyle },
1007
1013
  React.createElement(material.Grid, { container: true, spacing: spacing, direction: 'column' }, children))));
1008
1014
  };var FormFooter = function (_a) {
@@ -1406,7 +1412,7 @@ FormText.displayName = 'FormText';var FormTagText = React.forwardRef(function (_
1406
1412
  /********************************************************************************************************************
1407
1413
  * Render
1408
1414
  * ******************************************************************************************************************/
1409
- return (React.createElement(StyledFormText, __assign({ ref: ref }, props, { value: valueRef.current, onChange: handleChange, onKeyDown: handleKeyDown, onBlur: handleBlur })));
1415
+ return (React.createElement(StyledFormText, __assign({ ref: ref }, props, { clear: false, value: valueRef.current, onChange: handleChange, onKeyDown: handleKeyDown, onBlur: handleBlur })));
1410
1416
  });
1411
1417
  /********************************************************************************************************************
1412
1418
  * Styled Components
@@ -1417,11 +1423,15 @@ var FormTag = React.forwardRef(function (_a, ref) {
1417
1423
  /********************************************************************************************************************
1418
1424
  * FormState
1419
1425
  * ******************************************************************************************************************/
1420
- var className = _a.className, name = _a.name, _b = _a.value, initValue = _b === void 0 ? _emptyValue : _b, exceptValue = _a.exceptValue, _c = _a.clear, clear = _c === void 0 ? true : _c, required = _a.required, readOnly = _a.readOnly, maxLength = _a.maxLength, initDisabled = _a.disabled, initFullWidth = _a.fullWidth, initError = _a.error, helperText = _a.helperText, _d = _a.formValueSeparator, formValueSeparator = _d === void 0 ? ',' : _d, formValueSort = _a.formValueSort, limitTags = _a.limitTags, getLimitTagsText = _a.getLimitTagsText, slotProps = _a.slotProps, onAppendTag = _a.onAppendTag, onRemoveTag = _a.onRemoveTag, onValidate = _a.onValidate, onChange = _a.onChange, onValue = _a.onValue, props = __rest(_a, ["className", "name", "value", "exceptValue", "clear", "required", "readOnly", "maxLength", "disabled", "fullWidth", "error", "helperText", "formValueSeparator", "formValueSort", "limitTags", "getLimitTagsText", "slotProps", "onAppendTag", "onRemoveTag", "onValidate", "onChange", "onValue"]);
1421
- var _e = useFormState(), formFullWidth = _e.fullWidth, formDisabled = _e.disabled, onAddValueItem = _e.onAddValueItem, onValueChange = _e.onValueChange, onValueChangeByUser = _e.onValueChangeByUser, onRequestSearchSubmit = _e.onRequestSearchSubmit, otherFormState = __rest(_e, ["fullWidth", "disabled", "onAddValueItem", "onValueChange", "onValueChangeByUser", "onRequestSearchSubmit"]);
1426
+ var initVariant = _a.variant, initSize = _a.size,
1427
+ //----------------------------------------------------------------------------------------------------------------
1428
+ className = _a.className, name = _a.name, _b = _a.value, initValue = _b === void 0 ? _emptyValue : _b, exceptValue = _a.exceptValue, _c = _a.clear, clear = _c === void 0 ? true : _c, required = _a.required, readOnly = _a.readOnly, maxLength = _a.maxLength, initDisabled = _a.disabled, initFullWidth = _a.fullWidth, initError = _a.error, helperText = _a.helperText, _d = _a.formValueSeparator, formValueSeparator = _d === void 0 ? ',' : _d, formValueSort = _a.formValueSort, limitTags = _a.limitTags, getLimitTagsText = _a.getLimitTagsText, slotProps = _a.slotProps, onAppendTag = _a.onAppendTag, onRemoveTag = _a.onRemoveTag, onValidate = _a.onValidate, onChange = _a.onChange, onValue = _a.onValue, props = __rest(_a, ["variant", "size", "className", "name", "value", "exceptValue", "clear", "required", "readOnly", "maxLength", "disabled", "fullWidth", "error", "helperText", "formValueSeparator", "formValueSort", "limitTags", "getLimitTagsText", "slotProps", "onAppendTag", "onRemoveTag", "onValidate", "onChange", "onValue"]);
1429
+ var _e = useFormState(), formVariant = _e.variant, formSize = _e.size, formFullWidth = _e.fullWidth, formDisabled = _e.disabled, onAddValueItem = _e.onAddValueItem, onValueChange = _e.onValueChange, onValueChangeByUser = _e.onValueChangeByUser, onRequestSearchSubmit = _e.onRequestSearchSubmit, otherFormState = __rest(_e, ["variant", "size", "fullWidth", "disabled", "onAddValueItem", "onValueChange", "onValueChangeByUser", "onRequestSearchSubmit"]);
1422
1430
  /********************************************************************************************************************
1423
1431
  * FormState - Variables
1424
1432
  * ******************************************************************************************************************/
1433
+ var variant = util.ifUndefined(initVariant, formVariant);
1434
+ var size = util.ifUndefined(initSize, formSize);
1425
1435
  var fullWidth = util.ifUndefined(initFullWidth, formFullWidth);
1426
1436
  /********************************************************************************************************************
1427
1437
  * State
@@ -1548,16 +1558,19 @@ var FormTag = React.forwardRef(function (_a, ref) {
1548
1558
  }
1549
1559
  }, [ref, getCommands]);
1550
1560
  var handleRenderValue = React.useCallback(function (tags) {
1551
- return tags.map(function (tag) { return (React.createElement(material.Chip, { className: 'MuiAutocomplete-tag', key: tag, label: tag, size: 'small', disabled: readOnly || disabled, onDelete: readOnly || disabled ? undefined : function () { return removeTag(tag); } })); });
1552
- }, [disabled, readOnly, removeTag]);
1561
+ return tags.map(function (tag) { return (React.createElement(material.Chip, { className: 'MuiAutocomplete-tag', key: tag, label: tag, size: 'small', style: variant === 'outlined' && size === 'small' ? { marginTop: 2, marginBottom: 0 } : undefined, disabled: readOnly || disabled, onDelete: readOnly || disabled ? undefined : function () { return removeTag(tag); } })); });
1562
+ }, [disabled, readOnly, removeTag, size, variant]);
1553
1563
  /********************************************************************************************************************
1554
1564
  * Render
1555
1565
  * ******************************************************************************************************************/
1556
1566
  var handleRenderInput = React.useCallback(function (params) {
1567
+ var _a, _b;
1557
1568
  var htmlInputProps = __assign(__assign({}, params.inputProps), { className: classNames('FormTag-Input', readOnly && 'Mui-disabled'), readOnly: readOnly, tabIndex: readOnly ? -1 : undefined, maxLength: maxLength });
1558
1569
  delete htmlInputProps.onChange;
1559
1570
  delete htmlInputProps.value;
1560
- var renderProps = __assign({ name: name, clear: clear, className: classNames(className, 'FormValueItem', 'FormTag'), error: error, disabled: disabled, fullWidth: fullWidth, required: required, exceptValue: exceptValue, slotProps: __assign(__assign({}, slotProps), { inputLabel: __assign(__assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.inputLabel), { htmlFor: params.InputLabelProps.htmlFor, id: params.InputLabelProps.id }), input: __assign(__assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.input), { className: params.InputProps.className, ref: params.InputProps.ref, startAdornment: params.InputProps.startAdornment }), htmlInput: __assign(__assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.htmlInput), htmlInputProps) }), helperText: error ? errorHelperText : helperText, onAppendTag: appendTag }, props);
1571
+ var renderProps = __assign({ name: name, clear: clear, className: classNames(className, 'FormValueItem', 'FormTag'), error: error, disabled: disabled, fullWidth: fullWidth, required: required, exceptValue: exceptValue, slotProps: __assign(__assign({}, slotProps), { inputLabel: __assign(__assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.inputLabel), { htmlFor: params.InputLabelProps.htmlFor, id: params.InputLabelProps.id }), input: __assign(__assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.input), { style: __assign(__assign({}, (_a = slotProps === null || slotProps === void 0 ? void 0 : slotProps.input) === null || _a === void 0 ? void 0 : _a.style), (variant === 'outlined' && size === 'small'
1572
+ ? { paddingTop: 7, paddingBottom: 6, marginTop: -2 }
1573
+ : undefined)), className: params.InputProps.className, ref: params.InputProps.ref, startAdornment: params.InputProps.startAdornment }), htmlInput: __assign(__assign(__assign({}, slotProps === null || slotProps === void 0 ? void 0 : slotProps.htmlInput), htmlInputProps), { style: __assign(__assign(__assign({}, (_b = slotProps === null || slotProps === void 0 ? void 0 : slotProps.htmlInput) === null || _b === void 0 ? void 0 : _b.style), htmlInputProps.style), (variant === 'outlined' && size === 'small' ? { marginTop: 4, paddingBottom: 2 } : undefined)) }) }), helperText: error ? errorHelperText : helperText, onAppendTag: appendTag }, props);
1561
1574
  return React.createElement(FormTagText, __assign({ ref: handleRef }, renderProps));
1562
1575
  }, [
1563
1576
  appendTag,
@@ -1575,9 +1588,11 @@ var FormTag = React.forwardRef(function (_a, ref) {
1575
1588
  props,
1576
1589
  readOnly,
1577
1590
  required,
1591
+ size,
1578
1592
  slotProps,
1593
+ variant,
1579
1594
  ]);
1580
- return (React.createElement(FormContextProvider, { value: __assign(__assign({}, otherFormState), { fullWidth: formFullWidth, onAddValueItem: handleAddValueItem, onValueChange: function () { }, onValueChangeByUser: function () { }, onRequestSearchSubmit: function () { } }) },
1595
+ return (React.createElement(FormContextProvider, { value: __assign(__assign({}, otherFormState), { variant: formVariant, size: formSize, fullWidth: formFullWidth, onAddValueItem: handleAddValueItem, onValueChange: function () { }, onValueChangeByUser: function () { }, onRequestSearchSubmit: function () { } }) },
1581
1596
  React.createElement(material.Autocomplete, { options: [], multiple: true, freeSolo: true, value: value, readOnly: readOnly, disableClearable: true, limitTags: limitTags, getLimitTagsText: getLimitTagsText, disabled: disabled, renderValue: handleRenderValue, style: { display: fullWidth ? 'block' : 'inline-block', width: fullWidth ? '100%' : undefined }, renderInput: handleRenderInput })));
1582
1597
  });
1583
1598
  FormTag.displayName = 'FormTag';var FormEmail = React.forwardRef(function (_a, ref) {
@@ -2533,9 +2548,15 @@ styleInject(css_248z$e);var FormItemBase = React.forwardRef(function (_a, ref) {
2533
2548
  React.createElement(reactComponent.PdgIcon, { style: { verticalAlign: 'middle', marginRight: 3, marginTop: -4, marginBottom: -2 } }, labelIcon),
2534
2549
  React.createElement("span", { style: { verticalAlign: 'middle' } }, label))) : (label))),
2535
2550
  React.createElement("div", { className: 'FormItemBase-Control-wrap', style: __assign({ display: 'grid', marginTop: hideLabel ? 0 : undefined }, controlContainerStyle) }, autoSize ? (React.createElement(React.Fragment, null,
2536
- variant === 'standard' && (React.createElement(material.Input, { ref: inputRef, size: size, fullWidth: false, disabled: true, style: { visibility: 'hidden', width: 0 } })),
2537
- variant === 'outlined' && (React.createElement(material.OutlinedInput, { ref: inputRef, size: size, fullWidth: false, disabled: true, style: { visibility: 'hidden', width: 0 } })),
2538
- variant === 'filled' && (React.createElement(material.FilledInput, { ref: inputRef, size: size, fullWidth: false, disabled: true, style: { visibility: 'hidden', width: 0 } })),
2551
+ variant === 'standard' && (React.createElement(material.Input, { ref: function (ref) {
2552
+ inputRef.current = ref;
2553
+ }, size: size, fullWidth: false, disabled: true, style: { visibility: 'hidden', width: 0 } })),
2554
+ variant === 'outlined' && (React.createElement(material.OutlinedInput, { ref: function (ref) {
2555
+ inputRef.current = ref;
2556
+ }, size: size, fullWidth: false, disabled: true, style: { visibility: 'hidden', width: 0 } })),
2557
+ variant === 'filled' && (React.createElement(material.FilledInput, { ref: function (ref) {
2558
+ inputRef.current = ref;
2559
+ }, size: size, fullWidth: false, disabled: true, style: { visibility: 'hidden', width: 0 } })),
2539
2560
  React.createElement("div", { className: 'FormItemBase-Control', style: {
2540
2561
  width: fullWidth ? '100%' : 'auto',
2541
2562
  display: 'grid',
@@ -2737,7 +2758,9 @@ FormItemBase.displayName = 'FormItemBase';var FormCheckbox = React.forwardRef(fu
2737
2758
  /********************************************************************************************************************
2738
2759
  * Render
2739
2760
  * ******************************************************************************************************************/
2740
- return (React.createElement(FormItemBase, { variant: variant, size: size, color: color, focused: focused, className: classNames(className, 'FormValueItem', 'FormCheckbox'), labelIcon: labelIcon, label: label, error: error, fullWidth: fullWidth, helperText: error ? errorHelperText : helperText, helperTextProps: { style: { marginLeft: 2 } }, style: __assign({ width: fullWidth ? '100%' : width || 100, paddingLeft: 3 }, initStyle), sx: sx, hidden: hidden, autoSize: true, controlHeight: height || (size === 'small' ? 35 : 39), controlVerticalCenter: true, control: React.createElement(material.FormControlLabel, { ref: labelRef, control: React.createElement(material.Checkbox, __assign({ name: name, color: color, size: size, inputRef: initInputRef ? initInputRef : inputRef, action: initAction ? initAction : actionRef, checked: checked, checkedIcon: React.createElement(iconsMaterial.CheckBox, { color: error ? 'error' : undefined }), icon: React.createElement(iconsMaterial.CheckBoxOutlineBlank, { color: error ? 'error' : undefined }), onChange: handleChange, disabled: disabled || readOnly }, props)), label: React.createElement(material.Typography, { color: error ? 'error' : readOnly || disabled ? theme.palette.text.disabled : undefined, whiteSpace: 'nowrap' }, text) }) }));
2761
+ return (React.createElement(FormItemBase, { variant: variant, size: size, color: color, focused: focused, className: classNames(className, 'FormValueItem', 'FormCheckbox'), labelIcon: labelIcon, label: label, error: error, fullWidth: fullWidth, helperText: error ? errorHelperText : helperText, helperTextProps: { style: { marginLeft: 2 } }, style: __assign({ width: fullWidth ? '100%' : width || 100, paddingLeft: 3 }, initStyle), sx: sx, hidden: hidden, autoSize: true, controlHeight: height || (size === 'small' ? 35 : 39), controlVerticalCenter: true, control: React.createElement(material.FormControlLabel, { ref: function (ref) {
2762
+ labelRef.current = ref;
2763
+ }, control: React.createElement(material.Checkbox, __assign({ name: name, color: color, size: size, inputRef: initInputRef ? initInputRef : inputRef, action: initAction ? initAction : actionRef, checked: checked, checkedIcon: React.createElement(iconsMaterial.CheckBox, { color: error ? 'error' : undefined }), icon: React.createElement(iconsMaterial.CheckBoxOutlineBlank, { color: error ? 'error' : undefined }), onChange: handleChange, disabled: disabled || readOnly }, props)), label: React.createElement(material.Typography, { color: error ? 'error' : readOnly || disabled ? theme.palette.text.disabled : undefined, whiteSpace: 'nowrap' }, text) }) }));
2741
2764
  });
2742
2765
  FormCheckbox.displayName = 'FormCheckbox';var PADDING_LEFT = 3;
2743
2766
  var FormRadioGroup = ToForwardRefExoticComponent(AutoTypeForwardRef(function (_a, ref) {
@@ -3031,12 +3054,11 @@ var FormRadioGroup = ToForwardRefExoticComponent(AutoTypeForwardRef(function (_a
3031
3054
  /********************************************************************************************************************
3032
3055
  * Render
3033
3056
  * ******************************************************************************************************************/
3034
- var singleHeight = height || (size === 'small' ? 35 : 39);
3035
- var isMultiline = singleHeight <= util.ifUndefined(realHeight, 0);
3036
- 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: {
3037
- paddingTop: isMultiline && size === 'medium' ? 4 : undefined,
3038
- }, controlVerticalCenter: !isMultiline, control: React.createElement(React.Fragment, null,
3039
- !fullWidth && !isOnGetItemLoading && !loading && items && (React.createElement("div", { ref: resizeWidthDetectorRef, style: {
3057
+ var control = React.useMemo(function () {
3058
+ return (React.createElement(React.Fragment, null,
3059
+ !fullWidth && !isOnGetItemLoading && !loading && items && (React.createElement("div", { ref: function (ref) {
3060
+ resizeWidthDetectorRef.current = ref;
3061
+ }, style: {
3040
3062
  display: 'grid',
3041
3063
  position: 'absolute',
3042
3064
  whiteSpace: 'nowrap',
@@ -3044,7 +3066,11 @@ var FormRadioGroup = ToForwardRefExoticComponent(AutoTypeForwardRef(function (_a
3044
3066
  } },
3045
3067
  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) {
3046
3068
  var value = _a.value, label = _a.label, itemDisabled = _a.disabled;
3047
- return (React.createElement(material.FormControlLabel, { ref: idx === 0 ? resizeHeightDetectorRef : 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: {
3069
+ return (React.createElement(material.FormControlLabel, { ref: idx === 0
3070
+ ? function (ref) {
3071
+ resizeHeightDetectorRef.current = ref;
3072
+ }
3073
+ : 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: {
3048
3074
  color: error ? theme.palette.error.main : '',
3049
3075
  marginTop: -5,
3050
3076
  marginBottom: -5,
@@ -3052,7 +3078,9 @@ var FormRadioGroup = ToForwardRefExoticComponent(AutoTypeForwardRef(function (_a
3052
3078
  }, value: value, disabled: disabled || readOnly || itemDisabled }));
3053
3079
  })))),
3054
3080
  React.createElement("div", null,
3055
- React.createElement(material.RadioGroup, __assign({}, props, { ref: resizeRealHeightDetectorRef, style: {
3081
+ React.createElement(material.RadioGroup, __assign({}, props, { ref: function (ref) {
3082
+ resizeRealHeightDetectorRef.current = ref;
3083
+ }, style: {
3056
3084
  display: 'inline-flex',
3057
3085
  visibility: width == null ? 'hidden' : undefined,
3058
3086
  position: width == null ? 'absolute' : undefined,
@@ -3063,13 +3091,40 @@ var FormRadioGroup = ToForwardRefExoticComponent(AutoTypeForwardRef(function (_a
3063
3091
  React.createElement(material.CircularProgress, { size: size === 'small' ? 12 : 16, color: 'inherit' })))) : (React.createElement(React.Fragment, null, items &&
3064
3092
  items.map(function (_a, idx) {
3065
3093
  var value = _a.value, label = _a.label, itemDisabled = _a.disabled;
3066
- 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, inputRef: idx === 0 ? firstInputRef : null }), label: label, style: {
3094
+ 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: {
3067
3095
  color: error ? theme.palette.error.main : '',
3068
3096
  whiteSpace: 'nowrap',
3069
3097
  marginTop: -5,
3070
3098
  marginBottom: -5,
3071
3099
  }, value: value, disabled: disabled || readOnly || itemDisabled }));
3072
- })))))) }));
3100
+ })))))));
3101
+ }, [
3102
+ color,
3103
+ disabled,
3104
+ error,
3105
+ fullWidth,
3106
+ handleChange,
3107
+ inline,
3108
+ isOnGetItemLoading,
3109
+ items,
3110
+ loading,
3111
+ name,
3112
+ nowrap,
3113
+ props,
3114
+ readOnly,
3115
+ resizeHeightDetectorRef,
3116
+ resizeRealHeightDetectorRef,
3117
+ resizeWidthDetectorRef,
3118
+ size,
3119
+ theme.palette.error.main,
3120
+ value,
3121
+ width,
3122
+ ]);
3123
+ var singleHeight = height || (size === 'small' ? 35 : 39);
3124
+ var isMultiline = singleHeight <= util.ifUndefined(realHeight, 0);
3125
+ 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: {
3126
+ paddingTop: isMultiline && size === 'medium' ? 4 : undefined,
3127
+ }, controlVerticalCenter: !isMultiline, control: control }));
3073
3128
  }));
3074
3129
  FormRadioGroup.displayName = 'FormRadioGroup';var css_248z$d = ".FormToggleButtonGroup.loading .FormItemBase-Control-wrap .FormItemBase-Control {\n align-items: center !important;\n}\n.FormToggleButtonGroup .ToggleButton {\n display: inline-flex;\n padding: 0 10px;\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis;\n align-items: center;\n}\n.FormToggleButtonGroup .ToggleButton .__label__ {\n height: 0;\n line-height: 0 !important;\n overflow: visible !important;\n}\n.FormToggleButtonGroup.type-checkbox .ToggleButton, .FormToggleButtonGroup.type-radio .ToggleButton {\n padding-left: 3px;\n padding-right: 5px;\n border: 0 !important;\n margin-left: 0 !important;\n justify-content: flex-start;\n display: flex;\n background-color: transparent !important;\n}\n.FormToggleButtonGroup.type-checkbox .ToggleButton:not(:last-child), .FormToggleButtonGroup.type-radio .ToggleButton:not(:last-child) {\n margin-right: 5px;\n}\n.FormToggleButtonGroup.type-checkbox .ToggleButton .__checkbox-checked__,\n.FormToggleButtonGroup.type-checkbox .ToggleButton .__checkbox-unchecked__, .FormToggleButtonGroup.type-radio .ToggleButton .__checkbox-checked__,\n.FormToggleButtonGroup.type-radio .ToggleButton .__checkbox-unchecked__ {\n margin-right: 3px;\n}\n.FormToggleButtonGroup.type-checkbox .ToggleButton .__checkbox-checked__, .FormToggleButtonGroup.type-radio .ToggleButton .__checkbox-checked__ {\n display: none;\n}\n.FormToggleButtonGroup.type-checkbox .ToggleButton.Mui-selected .__checkbox-checked__, .FormToggleButtonGroup.type-radio .ToggleButton.Mui-selected .__checkbox-checked__ {\n display: block;\n}\n.FormToggleButtonGroup.type-checkbox .ToggleButton.Mui-selected .__checkbox-unchecked__, .FormToggleButtonGroup.type-radio .ToggleButton.Mui-selected .__checkbox-unchecked__ {\n display: none;\n}\n.FormToggleButtonGroup:not(.with-label).variant-outlined .FormItemBase-Control-wrap {\n margin-top: 15px;\n margin-bottom: -15px;\n}\n.FormToggleButtonGroup:not(.with-label).variant-outlined .FormItemBase-Control-wrap .ToggleButton {\n height: 37px;\n}\n.FormToggleButtonGroup:not(.with-label).variant-filled .FormItemBase-Control-wrap {\n margin-top: 15px;\n margin-bottom: -15px;\n}\n.FormToggleButtonGroup:not(.with-label).variant-filled .FormItemBase-Control-wrap .ToggleButton {\n height: 37px;\n}\n.FormToggleButtonGroup:not(.with-label).variant-standard .FormItemBase-Control-wrap {\n margin-top: 0px;\n margin-bottom: 0px;\n}\n.FormToggleButtonGroup:not(.with-label).variant-standard .FormItemBase-Control-wrap .ToggleButton {\n height: 28px;\n}\n.FormToggleButtonGroup:not(.with-label).size-small.variant-outlined .FormItemBase-Control-wrap {\n margin-top: 13px;\n margin-bottom: -13px;\n}\n.FormToggleButtonGroup:not(.with-label).size-small.variant-outlined .FormItemBase-Control-wrap .ToggleButton {\n height: 24px;\n}\n.FormToggleButtonGroup:not(.with-label).size-small.variant-filled .FormItemBase-Control-wrap {\n margin-top: 13px;\n margin-bottom: -13px;\n}\n.FormToggleButtonGroup:not(.with-label).size-small.variant-filled .FormItemBase-Control-wrap .ToggleButton {\n height: 31px;\n}\n.FormToggleButtonGroup:not(.with-label).size-small.variant-standard .FormItemBase-Control-wrap {\n margin-top: 0px;\n margin-bottom: 0px;\n}\n.FormToggleButtonGroup:not(.with-label).size-small.variant-standard .FormItemBase-Control-wrap .ToggleButton {\n height: 26px;\n}\n.FormToggleButtonGroup.with-label.variant-outlined .FormItemBase-Control-wrap {\n margin-top: 0;\n margin-bottom: 0;\n}\n.FormToggleButtonGroup.with-label.variant-outlined .FormItemBase-Control-wrap .ToggleButton {\n height: 37px;\n}\n.FormToggleButtonGroup.with-label.variant-filled .FormItemBase-Control-wrap {\n margin-top: 0;\n margin-bottom: 0;\n}\n.FormToggleButtonGroup.with-label.variant-filled .FormItemBase-Control-wrap .ToggleButton {\n height: 37px;\n}\n.FormToggleButtonGroup.with-label.variant-standard .FormItemBase-Control-wrap {\n margin-top: 0;\n margin-bottom: 0;\n}\n.FormToggleButtonGroup.with-label.variant-standard .FormItemBase-Control-wrap .ToggleButton {\n height: 28px;\n}\n.FormToggleButtonGroup.with-label.size-small.variant-outlined .FormItemBase-Control-wrap {\n margin-top: 0;\n margin-bottom: 0;\n}\n.FormToggleButtonGroup.with-label.size-small.variant-outlined .FormItemBase-Control-wrap .ToggleButton {\n height: 24px;\n}\n.FormToggleButtonGroup.with-label.size-small.variant-filled .FormItemBase-Control-wrap {\n margin-top: 0;\n margin-bottom: 0;\n}\n.FormToggleButtonGroup.with-label.size-small.variant-filled .FormItemBase-Control-wrap .ToggleButton {\n height: 31px;\n}\n.FormToggleButtonGroup.with-label.size-small.variant-standard .FormItemBase-Control-wrap {\n margin-top: 0;\n margin-bottom: 0;\n}\n.FormToggleButtonGroup.with-label.size-small.variant-standard .FormItemBase-Control-wrap .ToggleButton {\n height: 26px;\n}\n\n.Form .FormCol.with-label .FormToggleButtonGroup.variant-outlined .FormItemBase-Control-wrap {\n margin-top: 0;\n margin-bottom: 0;\n}\n.Form .FormCol.with-label .FormToggleButtonGroup.variant-outlined .FormItemBase-Control-wrap .ToggleButton {\n height: 37px;\n}\n.Form .FormCol.with-label .FormToggleButtonGroup.variant-filled .FormItemBase-Control-wrap {\n margin-top: 0;\n margin-bottom: 0;\n}\n.Form .FormCol.with-label .FormToggleButtonGroup.variant-filled .FormItemBase-Control-wrap .ToggleButton {\n height: 37px;\n}\n.Form .FormCol.with-label .FormToggleButtonGroup.variant-standard .FormItemBase-Control-wrap {\n margin-top: 0;\n margin-bottom: 0;\n}\n.Form .FormCol.with-label .FormToggleButtonGroup.variant-standard .FormItemBase-Control-wrap .ToggleButton {\n height: 28px;\n}\n.Form .FormCol.with-label .FormToggleButtonGroup.size-small.variant-outlined .FormItemBase-Control-wrap {\n margin-top: 0;\n margin-bottom: 0;\n}\n.Form .FormCol.with-label .FormToggleButtonGroup.size-small.variant-outlined .FormItemBase-Control-wrap .ToggleButton {\n height: 24px;\n}\n.Form .FormCol.with-label .FormToggleButtonGroup.size-small.variant-filled .FormItemBase-Control-wrap {\n margin-top: 0;\n margin-bottom: 0;\n}\n.Form .FormCol.with-label .FormToggleButtonGroup.size-small.variant-filled .FormItemBase-Control-wrap .ToggleButton {\n height: 31px;\n}\n.Form .FormCol.with-label .FormToggleButtonGroup.size-small.variant-standard .FormItemBase-Control-wrap {\n margin-top: 0;\n margin-bottom: 0;\n}\n.Form .FormCol.with-label .FormToggleButtonGroup.size-small.variant-standard .FormItemBase-Control-wrap .ToggleButton {\n height: 26px;\n}";
3075
3130
  styleInject(css_248z$d);var FormToggleButtonGroup = ToForwardRefExoticComponent(AutoTypeForwardRef(function (_a, ref) {
@@ -3233,9 +3288,9 @@ styleInject(css_248z$d);var FormToggleButtonGroup = ToForwardRefExoticComponent(
3233
3288
  }
3234
3289
  }
3235
3290
  else {
3236
- var realValue = itemsValues["".concat(finalValue)];
3237
- if (realValue != null && finalValue !== realValue) {
3238
- finalValue = realValue;
3291
+ var realValue_1 = itemsValues["".concat(finalValue)];
3292
+ if (realValue_1 != null && finalValue !== realValue_1) {
3293
+ finalValue = realValue_1;
3239
3294
  }
3240
3295
  }
3241
3296
  }
@@ -3476,23 +3531,75 @@ styleInject(css_248z$d);var FormToggleButtonGroup = ToForwardRefExoticComponent(
3476
3531
  theme.palette.error.main,
3477
3532
  type,
3478
3533
  ]);
3479
- var controlHeight = height || 0;
3480
- var isMultiline = controlHeight <= util.ifUndefined(realHeight, 0);
3481
- 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), (isOnGetItemLoading || loading) && 'loading'), 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 },
3534
+ var realValue = React.useMemo(function () {
3535
+ var newRealValue = value == null ? null : value;
3536
+ if (items && value != null) {
3537
+ if (Array.isArray(newRealValue)) {
3538
+ var stringRealValues_1 = newRealValue.map(function (v) { return v.toString(); });
3539
+ if (multiple) {
3540
+ var foundItems = items.filter(function (v) { return stringRealValues_1.includes(v.value.toString()); });
3541
+ newRealValue = foundItems.map(function (v) { return v.value; });
3542
+ }
3543
+ }
3544
+ else if (newRealValue != null) {
3545
+ var stringRealValue_1 = newRealValue.toString();
3546
+ var foundItem = items.find(function (v) { return v.value.toString() === stringRealValue_1; });
3547
+ if (foundItem) {
3548
+ newRealValue = foundItem.value;
3549
+ }
3550
+ }
3551
+ }
3552
+ return newRealValue;
3553
+ }, [items, multiple, value]);
3554
+ var control = React.useMemo(function () {
3555
+ return isOnGetItemLoading || loading ? (React.createElement("div", { style: { opacity: 0.54 }, ref: function (ref) {
3556
+ refForLoadingResizeHeightDetect.current = ref;
3557
+ } },
3482
3558
  React.createElement(material.CircularProgress, { size: 16, color: 'inherit' }))) : (React.createElement(React.Fragment, null,
3483
- !fullWidth && !isOnGetItemLoading && !loading && items && (React.createElement("div", { ref: refForResizeWidthDetect, style: {
3559
+ !fullWidth && !isOnGetItemLoading && !loading && items && (React.createElement("div", { ref: function (ref) {
3560
+ refForResizeWidthDetect.current = ref;
3561
+ }, style: {
3484
3562
  display: 'grid',
3485
3563
  position: 'absolute',
3486
3564
  whiteSpace: 'nowrap',
3487
3565
  visibility: 'hidden',
3488
3566
  } },
3489
3567
  React.createElement(material.ToggleButtonGroup, { className: 'ToggleButtonGroup', exclusive: !multiple }, buttons))),
3490
- React.createElement(material.ToggleButtonGroup, { ref: refForButtonsResizeHeightDetect, className: 'ToggleButtonGroup', exclusive: !multiple, fullWidth: fullWidth, value: value == null ? null : value, onChange: handleChange, style: {
3568
+ React.createElement(material.ToggleButtonGroup, { ref: function (ref) {
3569
+ refForButtonsResizeHeightDetect.current = ref;
3570
+ }, className: 'ToggleButtonGroup', exclusive: !multiple, fullWidth: fullWidth, value: realValue, onChange: handleChange, style: {
3491
3571
  width: !fullWidth && formColWidth && typeof width === 'number' && width > formColWidth
3492
3572
  ? formColWidth
3493
3573
  : undefined,
3494
3574
  flexWrap: type === 'checkbox' || type === 'radio' ? 'wrap' : 'nowrap',
3495
- }, "aria-labelledby": util.notEmpty(label) ? labelId : undefined }, isOnGetItemLoading || loading || !items || util.empty(items) ? (React.createElement(material.ToggleButton, { ref: refForButtonResizeHeightDetect, size: size, className: 'ToggleButton', disabled: disabled || readOnly, value: '', style: { visibility: 'hidden' } })) : (buttons)))) })));
3575
+ }, "aria-labelledby": util.notEmpty(label) ? labelId : undefined }, isOnGetItemLoading || loading || !items || util.empty(items) ? (React.createElement(material.ToggleButton, { ref: function (ref) {
3576
+ refForButtonResizeHeightDetect.current = ref;
3577
+ }, size: size, className: 'ToggleButton', disabled: disabled || readOnly, value: '', style: { visibility: 'hidden' } })) : (buttons))));
3578
+ }, [
3579
+ buttons,
3580
+ disabled,
3581
+ formColWidth,
3582
+ fullWidth,
3583
+ handleChange,
3584
+ isOnGetItemLoading,
3585
+ items,
3586
+ label,
3587
+ labelId,
3588
+ loading,
3589
+ multiple,
3590
+ readOnly,
3591
+ realValue,
3592
+ refForButtonResizeHeightDetect,
3593
+ refForButtonsResizeHeightDetect,
3594
+ refForLoadingResizeHeightDetect,
3595
+ refForResizeWidthDetect,
3596
+ size,
3597
+ type,
3598
+ width,
3599
+ ]);
3600
+ var controlHeight = height || 0;
3601
+ var isMultiline = controlHeight <= util.ifUndefined(realHeight, 0);
3602
+ 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), (isOnGetItemLoading || loading) && 'loading'), 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: control })));
3496
3603
  }));
3497
3604
  FormToggleButtonGroup.displayName = 'FormToggleButtonGroup';var FormRating = React.forwardRef(function (_a, ref) {
3498
3605
  /********************************************************************************************************************
@@ -3681,7 +3788,9 @@ FormToggleButtonGroup.displayName = 'FormToggleButtonGroup';var FormRating = Rea
3681
3788
  /********************************************************************************************************************
3682
3789
  * Render
3683
3790
  * ******************************************************************************************************************/
3684
- return (React.createElement(FormItemBase, { variant: variant, size: size, color: color, focused: focused, className: classNames(className, 'FormValueItem', 'FormRating'), labelIcon: labelIcon, label: label, error: error, fullWidth: false, required: required, helperText: error ? errorHelperText : helperText, helperTextProps: { style: { marginLeft: 5 } }, style: __assign({ width: width || 100 }, initStyle), sx: sx, hidden: hidden, autoSize: true, controlHeight: height || (size === 'small' ? 21 : 26), controlVerticalCenter: true, control: React.createElement(material.Rating, { ref: ratingRef, size: size === 'medium' ? 'large' : 'medium', name: name, precision: precision, highlightSelectedOnly: highlightSelectedOnly, value: value, disabled: disabled || readOnly, max: max, icon: React.createElement(reactComponent.PdgIcon, { color: color, size: 'inherit' }, icon ? icon : 'Star'), emptyIcon: React.createElement(reactComponent.PdgIcon, { size: 'inherit' }, emptyIcon ? emptyIcon : 'StarBorder'), onChange: handleChange, onFocus: function () { return setFocused(initFocused || true); }, onBlur: function () { return setFocused(initFocused || false); } }) }));
3791
+ return (React.createElement(FormItemBase, { variant: variant, size: size, color: color, focused: focused, className: classNames(className, 'FormValueItem', 'FormRating'), labelIcon: labelIcon, label: label, error: error, fullWidth: false, required: required, helperText: error ? errorHelperText : helperText, helperTextProps: { style: { marginLeft: 5 } }, style: __assign({ width: width || 100 }, initStyle), sx: sx, hidden: hidden, autoSize: true, controlHeight: height || (size === 'small' ? 21 : 26), controlVerticalCenter: true, control: React.createElement(material.Rating, { ref: function (ref) {
3792
+ ratingRef.current = ref;
3793
+ }, size: size === 'medium' ? 'large' : 'medium', name: name, precision: precision, highlightSelectedOnly: highlightSelectedOnly, value: value, disabled: disabled || readOnly, max: max, icon: React.createElement(reactComponent.PdgIcon, { color: color, size: 'inherit' }, icon ? icon : 'Star'), emptyIcon: React.createElement(reactComponent.PdgIcon, { size: 'inherit' }, emptyIcon ? emptyIcon : 'StarBorder'), onChange: handleChange, onFocus: function () { return setFocused(initFocused || true); }, onBlur: function () { return setFocused(initFocused || false); } }) }));
3685
3794
  });
3686
3795
  FormRating.displayName = 'FormRating';var css_248z$c = ".FormTextEditor.initializing textarea {\n display: none;\n}\n.FormTextEditor.error .tox-tinymce {\n border-color: #d32f2f;\n}\n\n.tox-menu.tox-collection.tox-collection--list .tox-collection__group .tox-menu-nav__js.tox-collection__item {\n padding-right: 20px !important;\n}\n\n.tox-notifications-container {\n display: none;\n}";
3687
3796
  styleInject(css_248z$c);var getFinalValue$8 = function (value) {
@@ -4113,7 +4222,7 @@ FormTextEditor.displayName = 'FormTextEditor';var FormAutocomplete = ToForwardRe
4113
4222
  }
4114
4223
  }
4115
4224
  else {
4116
- if (!Array.isArray(valueItem) && finalValue === valueItem.value) {
4225
+ if (!Array.isArray(valueItem) && finalValue.toString() === valueItem.value.toString()) {
4117
4226
  newComponentValue = valueItem;
4118
4227
  }
4119
4228
  }
@@ -4392,17 +4501,22 @@ FormTextEditor.displayName = 'FormTextEditor';var FormAutocomplete = ToForwardRe
4392
4501
  }
4393
4502
  }, renderValue: function (value, getItemProps) {
4394
4503
  if (Array.isArray(value)) {
4395
- return value.map(function (option, index) { return (React.createElement(material.Chip, __assign({ size: 'small', label: onRenderTag ? onRenderTag(option) : option.label }, getItemProps({ index: index })))); });
4504
+ return value.map(function (option, index) { return (React.createElement(material.Chip, __assign({ size: 'small', style: variant === 'outlined' && size === 'small' ? { marginTop: 2, marginBottom: 0 } : undefined, label: onRenderTag ? onRenderTag(option) : option.label }, getItemProps({ index: index })))); });
4396
4505
  }
4397
4506
  else {
4398
- return (React.createElement(material.Chip, __assign({ size: 'small', label: onRenderTag ? onRenderTag(value) : value.label }, getItemProps({ index: 0 }))));
4507
+ return (React.createElement(material.Chip, __assign({ size: 'small', style: variant === 'outlined' && size === 'small' ? { marginTop: 2, marginBottom: 0 } : undefined, label: onRenderTag ? onRenderTag(value) : value.label }, getItemProps({ index: 0 }))));
4399
4508
  }
4400
4509
  }, renderInput: function (params) {
4510
+ var _a;
4401
4511
  var slotProps = {
4402
- input: __assign(__assign({}, params.InputProps), { endAdornment: (React.createElement(React.Fragment, null,
4512
+ input: __assign(__assign({}, params.InputProps), { style: {
4513
+ paddingTop: variant === 'outlined' && size === 'small' ? 7 : undefined,
4514
+ paddingBottom: variant === 'outlined' && size === 'small' ? 5 : undefined,
4515
+ marginTop: variant === 'outlined' && size === 'small' ? -1 : undefined,
4516
+ }, endAdornment: (React.createElement(React.Fragment, null,
4403
4517
  loading || isOnGetItemLoading ? React.createElement(material.CircularProgress, { color: 'inherit', size: 20 }) : null,
4404
4518
  params.InputProps.endAdornment)) }),
4405
- htmlInput: __assign(__assign({}, params.inputProps), { tabIndex: readOnly || disabled ? -1 : undefined }),
4519
+ htmlInput: __assign(__assign({}, params.inputProps), { style: __assign(__assign({}, (_a = params.inputProps) === null || _a === void 0 ? void 0 : _a.style), (variant === 'outlined' && size === 'small' ? { marginTop: 1 } : undefined)), tabIndex: readOnly || disabled ? -1 : undefined }),
4406
4520
  };
4407
4521
  return (React.createElement(FormTextField, __assign({}, params, { ref: textFieldRef, name: name, variant: variant, size: size, color: color, labelIcon: labelIcon, label: label, labelShrink: labelShrink, required: required, focused: focused, error: error, readOnly: readOnly, helperText: error ? errorHelperText : helperText, slotProps: slotProps, placeholder: placeholder, noFormValueItem: true })));
4408
4522
  } }));
@@ -8433,7 +8547,9 @@ var FormFile = React.forwardRef(function (_a, ref) {
8433
8547
  preview,
8434
8548
  React.createElement("div", null, error ? errorHelperText : helperText)), hideLabel: !hideUrl, style: { width: fullWidth ? '100%' : undefined }, control: React.createElement("div", { className: 'control-wrap' },
8435
8549
  !hideUrl && (React.createElement("div", { className: 'file-name-wrap' },
8436
- React.createElement(material.TextField, { ref: innerRef, inputRef: textFieldRef, className: 'file-name', variant: variant, label: labelIcon ? (React.createElement(React.Fragment, null,
8550
+ React.createElement(material.TextField, { ref: function (ref) {
8551
+ innerRef.current = ref;
8552
+ }, inputRef: textFieldRef, className: 'file-name', variant: variant, label: labelIcon ? (React.createElement(React.Fragment, null,
8437
8553
  React.createElement(reactComponent.PdgIcon, { style: { verticalAlign: 'middle', marginRight: 4 } }, labelIcon),
8438
8554
  React.createElement("span", { style: { verticalAlign: 'middle' } }, initLabel))) : (initLabel), size: size, required: required, value: value || '', focused: focused, disabled: disabled, fullWidth: true, error: error, slotProps: {
8439
8555
  inputLabel: labelShrink ? { shrink: labelShrink } : undefined,
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@pdg/react-form",
3
3
  "title": "React Form",
4
- "version": "1.0.140",
4
+ "version": "1.0.142",
5
5
  "description": "React Form",
6
6
  "type": "module",
7
7
  "types": "dist/index.d.ts",