@pdg/react-form 1.0.130 → 1.0.131

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 +24 -12
  2. package/dist/index.js +24 -12
  3. package/package.json +1 -1
package/dist/index.esm.js CHANGED
@@ -2973,7 +2973,7 @@ var FormRadioGroup = ToForwardRefExoticComponent(AutoTypeForwardRef(function (_a
2973
2973
  * ******************************************************************************************************************/
2974
2974
  var singleHeight = height || (size === 'small' ? 35 : 39);
2975
2975
  var isMultiline = singleHeight <= ifUndefined(realHeight, 0);
2976
- return (React.createElement(FormItemBase, { focused: focused, ref: baseRef, className: classNames(className, 'FormValueItem', 'FormRadioGroup'), variant: variant, size: size, color: color, labelIcon: labelIcon, label: label, fullWidth: fullWidth, required: required, error: error, helperText: error ? errorHelperText : helperText, helperTextProps: { style: { marginLeft: 2, marginTop: isMultiline ? 20 : 0 } }, style: __assign({ width: width, paddingLeft: PADDING_LEFT }, initStyle), sx: sx, hidden: hidden, autoSize: true, controlHeight: realHeight ? realHeight : singleHeight, controlContainerStyle: {
2976
+ 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: {
2977
2977
  paddingTop: isMultiline && size === 'medium' ? 4 : undefined,
2978
2978
  }, controlVerticalCenter: !isMultiline, control: React.createElement(React.Fragment, null,
2979
2979
  !fullWidth && !isOnGetItemLoading && !loading && items && (React.createElement("div", { ref: resizeWidthDetectorRef, style: {
@@ -3033,6 +3033,7 @@ styleInject(css_248z$d);var FormToggleButtonGroup = ToForwardRefExoticComponent(
3033
3033
  * ******************************************************************************************************************/
3034
3034
  var refForResizeWidthDetect = useRef(null);
3035
3035
  var refForButtonResizeHeightDetect = useRef(null);
3036
+ var refForButtonsResizeHeightDetect = useRef(null);
3036
3037
  var refForLoadingResizeHeightDetect = useRef(null);
3037
3038
  /********************************************************************************************************************
3038
3039
  * FormState
@@ -3069,6 +3070,7 @@ styleInject(css_248z$d);var FormToggleButtonGroup = ToForwardRefExoticComponent(
3069
3070
  * State - height (ResizeDetector)
3070
3071
  * ******************************************************************************************************************/
3071
3072
  var _g = useState(), height = _g[0], setHeight = _g[1];
3073
+ var _h = useState(), realHeight = _h[0], setRealHeight = _h[1];
3072
3074
  useResizeDetector({
3073
3075
  targetRef: refForButtonResizeHeightDetect,
3074
3076
  handleHeight: true,
@@ -3077,6 +3079,14 @@ styleInject(css_248z$d);var FormToggleButtonGroup = ToForwardRefExoticComponent(
3077
3079
  setHeight((_b = (_a = refForButtonResizeHeightDetect.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) === null || _b === void 0 ? void 0 : _b.height);
3078
3080
  },
3079
3081
  });
3082
+ useResizeDetector({
3083
+ targetRef: refForButtonsResizeHeightDetect,
3084
+ handleHeight: true,
3085
+ onResize: function () {
3086
+ var _a, _b;
3087
+ setRealHeight((_b = (_a = refForButtonsResizeHeightDetect.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) === null || _b === void 0 ? void 0 : _b.height);
3088
+ },
3089
+ });
3080
3090
  useResizeDetector({
3081
3091
  targetRef: refForLoadingResizeHeightDetect,
3082
3092
  handleHeight: true,
@@ -3088,14 +3098,14 @@ styleInject(css_248z$d);var FormToggleButtonGroup = ToForwardRefExoticComponent(
3088
3098
  /********************************************************************************************************************
3089
3099
  * State
3090
3100
  * ******************************************************************************************************************/
3091
- var _h = useState(false), isOnGetItemLoading = _h[0], setIsOnGetItemLoading = _h[1];
3092
- var _j = useAutoUpdateState(initError), error = _j[0], setError = _j[1];
3093
- var _k = useState(), errorHelperText = _k[0], setErrorHelperText = _k[1];
3094
- var _l = useAutoUpdateRefState(initData), dataRef = _l[0], setData = _l[2];
3095
- var _m = useAutoUpdateRefState(useMemo(function () { return (initDisabled == null ? formDisabled : initDisabled); }, [initDisabled, formDisabled])), disabledRef = _m[0], disabled = _m[1], setDisabled = _m[2];
3096
- var _o = useAutoUpdateRefState(initHidden), hiddenRef = _o[0], hidden = _o[1], setHidden = _o[2];
3097
- var _p = useAutoUpdateRefState(initLoading), loadingRef = _p[0], loading = _p[1], setLoading = _p[2];
3098
- var _q = useAutoUpdateRefState(initItems), itemsRef = _q[0], items = _q[1], setItems = _q[2];
3101
+ var _j = useState(false), isOnGetItemLoading = _j[0], setIsOnGetItemLoading = _j[1];
3102
+ var _k = useAutoUpdateState(initError), error = _k[0], setError = _k[1];
3103
+ var _l = useState(), errorHelperText = _l[0], setErrorHelperText = _l[1];
3104
+ var _m = useAutoUpdateRefState(initData), dataRef = _m[0], setData = _m[2];
3105
+ var _o = useAutoUpdateRefState(useMemo(function () { return (initDisabled == null ? formDisabled : initDisabled); }, [initDisabled, formDisabled])), disabledRef = _o[0], disabled = _o[1], setDisabled = _o[2];
3106
+ var _p = useAutoUpdateRefState(initHidden), hiddenRef = _p[0], hidden = _p[1], setHidden = _p[2];
3107
+ var _q = useAutoUpdateRefState(initLoading), loadingRef = _q[0], loading = _q[1], setLoading = _q[2];
3108
+ var _r = useAutoUpdateRefState(initItems), itemsRef = _r[0], items = _r[1], setItems = _r[2];
3099
3109
  /********************************************************************************************************************
3100
3110
  * Memo
3101
3111
  * ******************************************************************************************************************/
@@ -3210,7 +3220,7 @@ styleInject(css_248z$d);var FormToggleButtonGroup = ToForwardRefExoticComponent(
3210
3220
  finalValue = onValue ? onValue(finalValue) : finalValue;
3211
3221
  return equal(value, finalValue) ? value : finalValue;
3212
3222
  }, [multiple, formValueSeparator, itemsValues, onValue]);
3213
- var _r = useAutoUpdateRefState(initValue, getFinalValue), valueRef = _r[0], value = _r[1], setValue = _r[2];
3223
+ var _s = useAutoUpdateRefState(initValue, getFinalValue), valueRef = _s[0], value = _s[1], setValue = _s[2];
3214
3224
  useFirstSkipEffect(function () {
3215
3225
  if (error)
3216
3226
  validate(value);
@@ -3435,7 +3445,9 @@ styleInject(css_248z$d);var FormToggleButtonGroup = ToForwardRefExoticComponent(
3435
3445
  theme.palette.error.main,
3436
3446
  type,
3437
3447
  ]);
3438
- return (React.createElement(FormItemBase, __assign({}, formControlBaseProps, { className: classNames(className, 'FormValueItem', 'FormToggleButtonGroup', "variant-".concat(variant), "size-".concat(size), !!label && 'with-label', !!fullWidth && 'full-width', "type-".concat(type)), variant: variant, size: size, color: color, labelIcon: labelIcon, label: label, required: required, fullWidth: fullWidth, error: error, helperText: error ? errorHelperText : helperText, helperTextProps: { style: { marginLeft: 2 } }, style: style, sx: sx, hidden: hidden, autoSize: true, controlHeight: height || 0, controlVerticalCenter: isOnGetItemLoading || loading, control: isOnGetItemLoading || loading ? (React.createElement("div", { style: { opacity: 0.54 }, ref: refForLoadingResizeHeightDetect },
3448
+ var controlHeight = height || 0;
3449
+ var isMultiline = controlHeight <= ifUndefined(realHeight, 0);
3450
+ return (React.createElement(FormItemBase, __assign({}, formControlBaseProps, { className: classNames(className, 'FormValueItem', 'FormToggleButtonGroup', "variant-".concat(variant), "size-".concat(size), !!label && 'with-label', !!fullWidth && 'full-width', "type-".concat(type)), variant: variant, size: size, color: color, labelIcon: labelIcon, label: label, required: required, fullWidth: fullWidth, error: error, helperText: error ? errorHelperText : helperText, helperTextProps: { style: { marginLeft: 2 } }, style: style, sx: sx, hidden: hidden, autoSize: true, controlHeight: realHeight ? realHeight + (isMultiline ? 13 : 0) : controlHeight, controlVerticalCenter: isMultiline ? false : isOnGetItemLoading || loading, control: isOnGetItemLoading || loading ? (React.createElement("div", { style: { opacity: 0.54 }, ref: refForLoadingResizeHeightDetect },
3439
3451
  React.createElement(CircularProgress, { size: 16, color: 'inherit' }))) : (React.createElement(React.Fragment, null,
3440
3452
  !fullWidth && !isOnGetItemLoading && !loading && items && (React.createElement("div", { ref: refForResizeWidthDetect, style: {
3441
3453
  display: 'grid',
@@ -3444,7 +3456,7 @@ styleInject(css_248z$d);var FormToggleButtonGroup = ToForwardRefExoticComponent(
3444
3456
  visibility: 'hidden',
3445
3457
  } },
3446
3458
  React.createElement(ToggleButtonGroup, { className: 'ToggleButtonGroup', exclusive: !multiple }, buttons))),
3447
- React.createElement(ToggleButtonGroup, { className: 'ToggleButtonGroup', exclusive: !multiple, fullWidth: fullWidth, value: value == null ? null : value, onChange: handleChange, style: {
3459
+ React.createElement(ToggleButtonGroup, { ref: refForButtonsResizeHeightDetect, className: 'ToggleButtonGroup', exclusive: !multiple, fullWidth: fullWidth, value: value == null ? null : value, onChange: handleChange, style: {
3448
3460
  width: !fullWidth && formColWidth && typeof width === 'number' && width > formColWidth
3449
3461
  ? formColWidth
3450
3462
  : undefined,
package/dist/index.js CHANGED
@@ -2973,7 +2973,7 @@ var FormRadioGroup = ToForwardRefExoticComponent(AutoTypeForwardRef(function (_a
2973
2973
  * ******************************************************************************************************************/
2974
2974
  var singleHeight = height || (size === 'small' ? 35 : 39);
2975
2975
  var isMultiline = singleHeight <= util.ifUndefined(realHeight, 0);
2976
- return (React.createElement(FormItemBase, { focused: focused, ref: baseRef, className: classNames(className, 'FormValueItem', 'FormRadioGroup'), variant: variant, size: size, color: color, labelIcon: labelIcon, label: label, fullWidth: fullWidth, required: required, error: error, helperText: error ? errorHelperText : helperText, helperTextProps: { style: { marginLeft: 2, marginTop: isMultiline ? 20 : 0 } }, style: __assign({ width: width, paddingLeft: PADDING_LEFT }, initStyle), sx: sx, hidden: hidden, autoSize: true, controlHeight: realHeight ? realHeight : singleHeight, controlContainerStyle: {
2976
+ 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: {
2977
2977
  paddingTop: isMultiline && size === 'medium' ? 4 : undefined,
2978
2978
  }, controlVerticalCenter: !isMultiline, control: React.createElement(React.Fragment, null,
2979
2979
  !fullWidth && !isOnGetItemLoading && !loading && items && (React.createElement("div", { ref: resizeWidthDetectorRef, style: {
@@ -3033,6 +3033,7 @@ styleInject(css_248z$d);var FormToggleButtonGroup = ToForwardRefExoticComponent(
3033
3033
  * ******************************************************************************************************************/
3034
3034
  var refForResizeWidthDetect = React.useRef(null);
3035
3035
  var refForButtonResizeHeightDetect = React.useRef(null);
3036
+ var refForButtonsResizeHeightDetect = React.useRef(null);
3036
3037
  var refForLoadingResizeHeightDetect = React.useRef(null);
3037
3038
  /********************************************************************************************************************
3038
3039
  * FormState
@@ -3069,6 +3070,7 @@ styleInject(css_248z$d);var FormToggleButtonGroup = ToForwardRefExoticComponent(
3069
3070
  * State - height (ResizeDetector)
3070
3071
  * ******************************************************************************************************************/
3071
3072
  var _g = React.useState(), height = _g[0], setHeight = _g[1];
3073
+ var _h = React.useState(), realHeight = _h[0], setRealHeight = _h[1];
3072
3074
  reactResizeDetector.useResizeDetector({
3073
3075
  targetRef: refForButtonResizeHeightDetect,
3074
3076
  handleHeight: true,
@@ -3077,6 +3079,14 @@ styleInject(css_248z$d);var FormToggleButtonGroup = ToForwardRefExoticComponent(
3077
3079
  setHeight((_b = (_a = refForButtonResizeHeightDetect.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) === null || _b === void 0 ? void 0 : _b.height);
3078
3080
  },
3079
3081
  });
3082
+ reactResizeDetector.useResizeDetector({
3083
+ targetRef: refForButtonsResizeHeightDetect,
3084
+ handleHeight: true,
3085
+ onResize: function () {
3086
+ var _a, _b;
3087
+ setRealHeight((_b = (_a = refForButtonsResizeHeightDetect.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect()) === null || _b === void 0 ? void 0 : _b.height);
3088
+ },
3089
+ });
3080
3090
  reactResizeDetector.useResizeDetector({
3081
3091
  targetRef: refForLoadingResizeHeightDetect,
3082
3092
  handleHeight: true,
@@ -3088,14 +3098,14 @@ styleInject(css_248z$d);var FormToggleButtonGroup = ToForwardRefExoticComponent(
3088
3098
  /********************************************************************************************************************
3089
3099
  * State
3090
3100
  * ******************************************************************************************************************/
3091
- var _h = React.useState(false), isOnGetItemLoading = _h[0], setIsOnGetItemLoading = _h[1];
3092
- var _j = reactHook.useAutoUpdateState(initError), error = _j[0], setError = _j[1];
3093
- var _k = React.useState(), errorHelperText = _k[0], setErrorHelperText = _k[1];
3094
- var _l = reactHook.useAutoUpdateRefState(initData), dataRef = _l[0], setData = _l[2];
3095
- var _m = reactHook.useAutoUpdateRefState(React.useMemo(function () { return (initDisabled == null ? formDisabled : initDisabled); }, [initDisabled, formDisabled])), disabledRef = _m[0], disabled = _m[1], setDisabled = _m[2];
3096
- var _o = reactHook.useAutoUpdateRefState(initHidden), hiddenRef = _o[0], hidden = _o[1], setHidden = _o[2];
3097
- var _p = reactHook.useAutoUpdateRefState(initLoading), loadingRef = _p[0], loading = _p[1], setLoading = _p[2];
3098
- var _q = reactHook.useAutoUpdateRefState(initItems), itemsRef = _q[0], items = _q[1], setItems = _q[2];
3101
+ var _j = React.useState(false), isOnGetItemLoading = _j[0], setIsOnGetItemLoading = _j[1];
3102
+ var _k = reactHook.useAutoUpdateState(initError), error = _k[0], setError = _k[1];
3103
+ var _l = React.useState(), errorHelperText = _l[0], setErrorHelperText = _l[1];
3104
+ var _m = reactHook.useAutoUpdateRefState(initData), dataRef = _m[0], setData = _m[2];
3105
+ var _o = reactHook.useAutoUpdateRefState(React.useMemo(function () { return (initDisabled == null ? formDisabled : initDisabled); }, [initDisabled, formDisabled])), disabledRef = _o[0], disabled = _o[1], setDisabled = _o[2];
3106
+ var _p = reactHook.useAutoUpdateRefState(initHidden), hiddenRef = _p[0], hidden = _p[1], setHidden = _p[2];
3107
+ var _q = reactHook.useAutoUpdateRefState(initLoading), loadingRef = _q[0], loading = _q[1], setLoading = _q[2];
3108
+ var _r = reactHook.useAutoUpdateRefState(initItems), itemsRef = _r[0], items = _r[1], setItems = _r[2];
3099
3109
  /********************************************************************************************************************
3100
3110
  * Memo
3101
3111
  * ******************************************************************************************************************/
@@ -3210,7 +3220,7 @@ styleInject(css_248z$d);var FormToggleButtonGroup = ToForwardRefExoticComponent(
3210
3220
  finalValue = onValue ? onValue(finalValue) : finalValue;
3211
3221
  return util.equal(value, finalValue) ? value : finalValue;
3212
3222
  }, [multiple, formValueSeparator, itemsValues, onValue]);
3213
- var _r = reactHook.useAutoUpdateRefState(initValue, getFinalValue), valueRef = _r[0], value = _r[1], setValue = _r[2];
3223
+ var _s = reactHook.useAutoUpdateRefState(initValue, getFinalValue), valueRef = _s[0], value = _s[1], setValue = _s[2];
3214
3224
  reactHook.useFirstSkipEffect(function () {
3215
3225
  if (error)
3216
3226
  validate(value);
@@ -3435,7 +3445,9 @@ styleInject(css_248z$d);var FormToggleButtonGroup = ToForwardRefExoticComponent(
3435
3445
  theme.palette.error.main,
3436
3446
  type,
3437
3447
  ]);
3438
- return (React.createElement(FormItemBase, __assign({}, formControlBaseProps, { className: classNames(className, 'FormValueItem', 'FormToggleButtonGroup', "variant-".concat(variant), "size-".concat(size), !!label && 'with-label', !!fullWidth && 'full-width', "type-".concat(type)), variant: variant, size: size, color: color, labelIcon: labelIcon, label: label, required: required, fullWidth: fullWidth, error: error, helperText: error ? errorHelperText : helperText, helperTextProps: { style: { marginLeft: 2 } }, style: style, sx: sx, hidden: hidden, autoSize: true, controlHeight: height || 0, controlVerticalCenter: isOnGetItemLoading || loading, control: isOnGetItemLoading || loading ? (React.createElement("div", { style: { opacity: 0.54 }, ref: refForLoadingResizeHeightDetect },
3448
+ var controlHeight = height || 0;
3449
+ var isMultiline = controlHeight <= util.ifUndefined(realHeight, 0);
3450
+ return (React.createElement(FormItemBase, __assign({}, formControlBaseProps, { className: classNames(className, 'FormValueItem', 'FormToggleButtonGroup', "variant-".concat(variant), "size-".concat(size), !!label && 'with-label', !!fullWidth && 'full-width', "type-".concat(type)), variant: variant, size: size, color: color, labelIcon: labelIcon, label: label, required: required, fullWidth: fullWidth, error: error, helperText: error ? errorHelperText : helperText, helperTextProps: { style: { marginLeft: 2 } }, style: style, sx: sx, hidden: hidden, autoSize: true, controlHeight: realHeight ? realHeight + (isMultiline ? 13 : 0) : controlHeight, controlVerticalCenter: isMultiline ? false : isOnGetItemLoading || loading, control: isOnGetItemLoading || loading ? (React.createElement("div", { style: { opacity: 0.54 }, ref: refForLoadingResizeHeightDetect },
3439
3451
  React.createElement(material.CircularProgress, { size: 16, color: 'inherit' }))) : (React.createElement(React.Fragment, null,
3440
3452
  !fullWidth && !isOnGetItemLoading && !loading && items && (React.createElement("div", { ref: refForResizeWidthDetect, style: {
3441
3453
  display: 'grid',
@@ -3444,7 +3456,7 @@ styleInject(css_248z$d);var FormToggleButtonGroup = ToForwardRefExoticComponent(
3444
3456
  visibility: 'hidden',
3445
3457
  } },
3446
3458
  React.createElement(material.ToggleButtonGroup, { className: 'ToggleButtonGroup', exclusive: !multiple }, buttons))),
3447
- React.createElement(material.ToggleButtonGroup, { className: 'ToggleButtonGroup', exclusive: !multiple, fullWidth: fullWidth, value: value == null ? null : value, onChange: handleChange, style: {
3459
+ React.createElement(material.ToggleButtonGroup, { ref: refForButtonsResizeHeightDetect, className: 'ToggleButtonGroup', exclusive: !multiple, fullWidth: fullWidth, value: value == null ? null : value, onChange: handleChange, style: {
3448
3460
  width: !fullWidth && formColWidth && typeof width === 'number' && width > formColWidth
3449
3461
  ? formColWidth
3450
3462
  : 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.130",
4
+ "version": "1.0.131",
5
5
  "description": "React Form",
6
6
  "type": "module",
7
7
  "types": "dist/index.d.ts",