@pdg/react-form 1.0.128 → 1.0.130

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 (4) hide show
  1. package/dist/FormItemCustom/FormItemBase/FormItemBase.types.d.ts +3 -1
  2. package/dist/index.esm.js +51 -15
  3. package/dist/index.js +51 -15
  4. package/package.json +1 -1
package/dist/FormItemCustom/FormItemBase/FormItemBase.types.d.ts CHANGED
@@ -1,11 +1,13 @@
1
1
  import { ReactNode } from 'react';
2
2
  import { FormHelperTextProps } from '@mui/material';
3
- import { PartialPick, CommonSxProps } from '../../@types';
3
+ import { PartialPick, CommonSxProps, CommonProps } from '../../@types';
4
4
  import { FormContextValue } from '../../FormContext';
5
5
  export interface FormItemBaseProps extends CommonSxProps, PartialPick<FormContextValue, 'variant' | 'size' | 'color'> {
6
6
  control: ReactNode;
7
7
  controlHeight?: number;
8
+ controlSingleHeight?: number;
8
9
  controlVerticalCenter?: boolean;
10
+ controlContainerStyle?: CommonProps['style'];
9
11
  width?: number | string;
10
12
  fullWidth?: boolean;
11
13
  required?: boolean;
package/dist/index.esm.js CHANGED
@@ -2369,7 +2369,7 @@ styleInject(css_248z$e);var FormItemBase = React.forwardRef(function (_a, ref) {
2369
2369
  * ******************************************************************************************************************/
2370
2370
  var initVariant = _a.variant, initSize = _a.size, initColor = _a.color, initFullWidth = _a.fullWidth,
2371
2371
  //----------------------------------------------------------------------------------------------------------------
2372
- control = _a.control, controlHeight = _a.controlHeight, controlVerticalCenter = _a.controlVerticalCenter, required = _a.required, labelIcon = _a.labelIcon, label = _a.label, focused = _a.focused, helperText = _a.helperText, helperTextProps = _a.helperTextProps, error = _a.error, hideLabel = _a.hideLabel, hidden = _a.hidden, autoSize = _a.autoSize,
2372
+ control = _a.control, controlHeight = _a.controlHeight, controlSingleHeight = _a.controlSingleHeight, controlVerticalCenter = _a.controlVerticalCenter, controlContainerStyle = _a.controlContainerStyle, required = _a.required, labelIcon = _a.labelIcon, label = _a.label, focused = _a.focused, helperText = _a.helperText, helperTextProps = _a.helperTextProps, error = _a.error, hideLabel = _a.hideLabel, hidden = _a.hidden, autoSize = _a.autoSize,
2373
2373
  //----------------------------------------------------------------------------------------------------------------
2374
2374
  className = _a.className, style = _a.style, sx = _a.sx;
2375
2375
  var inputRef = useRef(null);
@@ -2403,7 +2403,20 @@ styleInject(css_248z$e);var FormItemBase = React.forwardRef(function (_a, ref) {
2403
2403
  var controlMarginTop = useMemo(function () {
2404
2404
  var topMargin = 0;
2405
2405
  if (inputHeight && controlHeight && controlVerticalCenter) {
2406
- topMargin = inputHeight / 2 - controlHeight / 2;
2406
+ if (controlHeight > inputHeight) {
2407
+ if (controlSingleHeight) {
2408
+ topMargin = inputHeight / 2 - controlSingleHeight / 2;
2409
+ }
2410
+ else {
2411
+ topMargin = 0;
2412
+ }
2413
+ }
2414
+ else {
2415
+ topMargin = inputHeight / 2 - controlHeight / 2;
2416
+ }
2417
+ }
2418
+ else {
2419
+ topMargin = 0;
2407
2420
  }
2408
2421
  var withLabelControlAddTopMargin;
2409
2422
  if (size === 'small') {
@@ -2428,7 +2441,16 @@ styleInject(css_248z$e);var FormItemBase = React.forwardRef(function (_a, ref) {
2428
2441
  break;
2429
2442
  }
2430
2443
  return controlMarginTop;
2431
- }, [controlHeight, controlVerticalCenter, formColWithLabel, inputHeight, label, size, variant]);
2444
+ }, [
2445
+ controlHeight,
2446
+ controlSingleHeight,
2447
+ controlVerticalCenter,
2448
+ formColWithLabel,
2449
+ inputHeight,
2450
+ label,
2451
+ size,
2452
+ variant,
2453
+ ]);
2432
2454
  /********************************************************************************************************************
2433
2455
  * Variable
2434
2456
  * ******************************************************************************************************************/
@@ -2448,7 +2470,7 @@ styleInject(css_248z$e);var FormItemBase = React.forwardRef(function (_a, ref) {
2448
2470
  !formColWithLabel && label && (React.createElement(InputLabel, { shrink: true, className: 'FormItemBase-InputLabel', size: size === 'medium' ? 'normal' : size, required: required }, labelIcon ? (React.createElement(React.Fragment, null,
2449
2471
  React.createElement(PdgIcon, { style: { verticalAlign: 'middle', marginRight: 3, marginTop: -4, marginBottom: -2 } }, labelIcon),
2450
2472
  React.createElement("span", { style: { verticalAlign: 'middle' } }, label))) : (label))),
2451
- React.createElement("div", { className: 'FormItemBase-Control-wrap', style: { display: 'grid', marginTop: hideLabel ? 0 : undefined } }, autoSize ? (React.createElement(React.Fragment, null,
2473
+ React.createElement("div", { className: 'FormItemBase-Control-wrap', style: __assign({ display: 'grid', marginTop: hideLabel ? 0 : undefined }, controlContainerStyle) }, autoSize ? (React.createElement(React.Fragment, null,
2452
2474
  variant === 'standard' && (React.createElement(Input, { ref: inputRef, size: size, fullWidth: false, disabled: true, style: { visibility: 'hidden', width: 0 } })),
2453
2475
  variant === 'outlined' && (React.createElement(OutlinedInput, { ref: inputRef, size: size, fullWidth: false, disabled: true, style: { visibility: 'hidden', width: 0 } })),
2454
2476
  variant === 'filled' && (React.createElement(FilledInput, { ref: inputRef, size: size, fullWidth: false, disabled: true, style: { visibility: 'hidden', width: 0 } })),
@@ -2456,7 +2478,7 @@ styleInject(css_248z$e);var FormItemBase = React.forwardRef(function (_a, ref) {
2456
2478
  width: fullWidth ? '100%' : 'auto',
2457
2479
  display: 'grid',
2458
2480
  marginTop: -inputHeight,
2459
- height: inputHeight,
2481
+ height: ifUndefined(controlHeight, inputHeight) > inputHeight ? controlHeight : undefined,
2460
2482
  alignItems: 'flex-start',
2461
2483
  paddingTop: controlMarginTop,
2462
2484
  position: 'relative',
@@ -2729,6 +2751,7 @@ var FormRadioGroup = ToForwardRefExoticComponent(AutoTypeForwardRef(function (_a
2729
2751
  * State - height (ResizeDetector)
2730
2752
  * ******************************************************************************************************************/
2731
2753
  var _r = useResizeDetector(), height = _r.height, resizeHeightDetectorRef = _r.ref;
2754
+ var _s = useResizeDetector(), realHeight = _s.height, resizeRealHeightDetectorRef = _s.ref;
2732
2755
  /********************************************************************************************************************
2733
2756
  * Function - setErrorErrorHelperText
2734
2757
  * ******************************************************************************************************************/
@@ -2760,7 +2783,7 @@ var FormRadioGroup = ToForwardRefExoticComponent(AutoTypeForwardRef(function (_a
2760
2783
  var getFinalValue = useCallback(function (value) {
2761
2784
  return onValue ? onValue(value) : value;
2762
2785
  }, [onValue]);
2763
- var _s = useAutoUpdateRefState(initValue, getFinalValue), valueRef = _s[0], value = _s[1], setValue = _s[2];
2786
+ var _t = useAutoUpdateRefState(initValue, getFinalValue), valueRef = _t[0], value = _t[1], setValue = _t[2];
2764
2787
  useFirstSkipEffect(function () {
2765
2788
  if (error)
2766
2789
  validate(value);
@@ -2948,31 +2971,44 @@ var FormRadioGroup = ToForwardRefExoticComponent(AutoTypeForwardRef(function (_a
2948
2971
  /********************************************************************************************************************
2949
2972
  * Render
2950
2973
  * ******************************************************************************************************************/
2951
- 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 } }, style: __assign({ width: width, paddingLeft: PADDING_LEFT }, initStyle), sx: sx, hidden: hidden, autoSize: true, controlHeight: height || (size === 'small' ? 35 : 39), controlVerticalCenter: true, control: React.createElement(React.Fragment, null,
2974
+ var singleHeight = height || (size === 'small' ? 35 : 39);
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: {
2977
+ paddingTop: isMultiline && size === 'medium' ? 4 : undefined,
2978
+ }, controlVerticalCenter: !isMultiline, control: React.createElement(React.Fragment, null,
2952
2979
  !fullWidth && !isOnGetItemLoading && !loading && items && (React.createElement("div", { ref: resizeWidthDetectorRef, style: {
2953
2980
  display: 'grid',
2954
2981
  position: 'absolute',
2955
2982
  whiteSpace: 'nowrap',
2956
2983
  visibility: 'hidden',
2957
2984
  } },
2958
- React.createElement(RadioGroup, __assign({}, props, { style: { marginTop: 10, display: 'inline-flex', flexWrap: 'nowrap' }, name: name, row: inline, value: value === undefined ? null : value, onChange: handleChange }), items.map(function (_a, idx) {
2985
+ 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) {
2959
2986
  var value = _a.value, label = _a.label, itemDisabled = _a.disabled;
2960
- 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: { color: error ? theme.palette.error.main : '', marginTop: -10, whiteSpace: 'nowrap' }, value: value, disabled: disabled || readOnly || itemDisabled }));
2987
+ 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: {
2988
+ color: error ? theme.palette.error.main : '',
2989
+ marginTop: -5,
2990
+ marginBottom: -5,
2991
+ whiteSpace: 'nowrap',
2992
+ }, value: value, disabled: disabled || readOnly || itemDisabled }));
2961
2993
  })))),
2962
2994
  React.createElement("div", null,
2963
- React.createElement(RadioGroup, __assign({}, props, { style: {
2964
- marginTop: 10,
2995
+ React.createElement(RadioGroup, __assign({}, props, { ref: resizeRealHeightDetectorRef, style: {
2965
2996
  display: 'inline-flex',
2966
2997
  visibility: width == null ? 'hidden' : undefined,
2967
2998
  position: width == null ? 'absolute' : undefined,
2968
2999
  flexWrap: nowrap ? 'nowrap' : undefined,
2969
3000
  }, name: name, row: inline, value: value === undefined ? null : value, onChange: handleChange }), isOnGetItemLoading || loading ? (React.createElement("div", { style: { position: 'relative' } },
2970
- React.createElement(FormControlLabel, { ref: resizeHeightDetectorRef, label: '', control: React.createElement(Radio, { color: color, size: size }), style: { marginTop: -10, visibility: 'hidden' } }),
2971
- React.createElement("div", { style: { position: 'absolute', left: 0, top: 1, opacity: 0.54 } },
3001
+ React.createElement(FormControlLabel, { label: '', control: React.createElement(Radio, { color: color, size: size }), style: { visibility: 'hidden' } }),
3002
+ React.createElement("div", { style: { position: 'absolute', left: 0, top: 11, opacity: 0.54 } },
2972
3003
  React.createElement(CircularProgress, { size: size === 'small' ? 12 : 16, color: 'inherit' })))) : (React.createElement(React.Fragment, null, items &&
2973
3004
  items.map(function (_a, idx) {
2974
3005
  var value = _a.value, label = _a.label, itemDisabled = _a.disabled;
2975
- 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: { color: error ? theme.palette.error.main : '', marginTop: -10, whiteSpace: 'nowrap' }, value: value, disabled: disabled || readOnly || itemDisabled }));
3006
+ 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: {
3007
+ color: error ? theme.palette.error.main : '',
3008
+ whiteSpace: 'nowrap',
3009
+ marginTop: -5,
3010
+ marginBottom: -5,
3011
+ }, value: value, disabled: disabled || readOnly || itemDisabled }));
2976
3012
  })))))) }));
2977
3013
  }));
2978
3014
  FormRadioGroup.displayName = 'FormRadioGroup';var css_248z$d = ".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}";
@@ -8356,7 +8392,7 @@ var FormFile = React.forwardRef(function (_a, ref) {
8356
8392
  !hideUpload && (React.createElement(React.Fragment, null,
8357
8393
  React.createElement(StyledPdgButton, { variant: 'text', tabIndex: uploadTabIndex == null ? -1 : uploadTabIndex, className: classNames('input-file-btn form-file-btn', !!hideUploadLabel && 'hidden-label'), color: error ? 'error' : color, size: size, disabled: readOnly || disabled, ref: fileUploadBtnRef },
8358
8394
  React.createElement("label", { htmlFor: id },
8359
- React.createElement(PdgIcon, { size: size, color: error ? 'error' : color }, "upload"),
8395
+ React.createElement(PdgIcon, { size: size }, "upload"),
8360
8396
  !hideUploadLabel && (uploadLabel || '파일 업로드'))),
8361
8397
  React.createElement("input", { type: 'file', accept: accept, id: id, value: FILE_VALUE, className: 'input-file', onChange: handleFileChange }))),
8362
8398
  !hideLink && (React.createElement(StyledPdgButton, { variant: 'text', tabIndex: linkTabIndex == null ? -1 : linkTabIndex, className: classNames('link-btn form-file-btn', !!hideLinkLabel && 'hidden-label'), color: error ? 'error' : color, startIcon: 'link', size: size, disabled: readOnly || disabled, ref: linkBtnRef, onClick: handleLinkClick }, !hideLinkLabel && (linkLabel || '링크'))),
package/dist/index.js CHANGED
@@ -2369,7 +2369,7 @@ styleInject(css_248z$e);var FormItemBase = React.forwardRef(function (_a, ref) {
2369
2369
  * ******************************************************************************************************************/
2370
2370
  var initVariant = _a.variant, initSize = _a.size, initColor = _a.color, initFullWidth = _a.fullWidth,
2371
2371
  //----------------------------------------------------------------------------------------------------------------
2372
- control = _a.control, controlHeight = _a.controlHeight, controlVerticalCenter = _a.controlVerticalCenter, required = _a.required, labelIcon = _a.labelIcon, label = _a.label, focused = _a.focused, helperText = _a.helperText, helperTextProps = _a.helperTextProps, error = _a.error, hideLabel = _a.hideLabel, hidden = _a.hidden, autoSize = _a.autoSize,
2372
+ control = _a.control, controlHeight = _a.controlHeight, controlSingleHeight = _a.controlSingleHeight, controlVerticalCenter = _a.controlVerticalCenter, controlContainerStyle = _a.controlContainerStyle, required = _a.required, labelIcon = _a.labelIcon, label = _a.label, focused = _a.focused, helperText = _a.helperText, helperTextProps = _a.helperTextProps, error = _a.error, hideLabel = _a.hideLabel, hidden = _a.hidden, autoSize = _a.autoSize,
2373
2373
  //----------------------------------------------------------------------------------------------------------------
2374
2374
  className = _a.className, style = _a.style, sx = _a.sx;
2375
2375
  var inputRef = React.useRef(null);
@@ -2403,7 +2403,20 @@ styleInject(css_248z$e);var FormItemBase = React.forwardRef(function (_a, ref) {
2403
2403
  var controlMarginTop = React.useMemo(function () {
2404
2404
  var topMargin = 0;
2405
2405
  if (inputHeight && controlHeight && controlVerticalCenter) {
2406
- topMargin = inputHeight / 2 - controlHeight / 2;
2406
+ if (controlHeight > inputHeight) {
2407
+ if (controlSingleHeight) {
2408
+ topMargin = inputHeight / 2 - controlSingleHeight / 2;
2409
+ }
2410
+ else {
2411
+ topMargin = 0;
2412
+ }
2413
+ }
2414
+ else {
2415
+ topMargin = inputHeight / 2 - controlHeight / 2;
2416
+ }
2417
+ }
2418
+ else {
2419
+ topMargin = 0;
2407
2420
  }
2408
2421
  var withLabelControlAddTopMargin;
2409
2422
  if (size === 'small') {
@@ -2428,7 +2441,16 @@ styleInject(css_248z$e);var FormItemBase = React.forwardRef(function (_a, ref) {
2428
2441
  break;
2429
2442
  }
2430
2443
  return controlMarginTop;
2431
- }, [controlHeight, controlVerticalCenter, formColWithLabel, inputHeight, label, size, variant]);
2444
+ }, [
2445
+ controlHeight,
2446
+ controlSingleHeight,
2447
+ controlVerticalCenter,
2448
+ formColWithLabel,
2449
+ inputHeight,
2450
+ label,
2451
+ size,
2452
+ variant,
2453
+ ]);
2432
2454
  /********************************************************************************************************************
2433
2455
  * Variable
2434
2456
  * ******************************************************************************************************************/
@@ -2448,7 +2470,7 @@ styleInject(css_248z$e);var FormItemBase = React.forwardRef(function (_a, ref) {
2448
2470
  !formColWithLabel && label && (React.createElement(material.InputLabel, { shrink: true, className: 'FormItemBase-InputLabel', size: size === 'medium' ? 'normal' : size, required: required }, labelIcon ? (React.createElement(React.Fragment, null,
2449
2471
  React.createElement(reactComponent.PdgIcon, { style: { verticalAlign: 'middle', marginRight: 3, marginTop: -4, marginBottom: -2 } }, labelIcon),
2450
2472
  React.createElement("span", { style: { verticalAlign: 'middle' } }, label))) : (label))),
2451
- React.createElement("div", { className: 'FormItemBase-Control-wrap', style: { display: 'grid', marginTop: hideLabel ? 0 : undefined } }, autoSize ? (React.createElement(React.Fragment, null,
2473
+ React.createElement("div", { className: 'FormItemBase-Control-wrap', style: __assign({ display: 'grid', marginTop: hideLabel ? 0 : undefined }, controlContainerStyle) }, autoSize ? (React.createElement(React.Fragment, null,
2452
2474
  variant === 'standard' && (React.createElement(material.Input, { ref: inputRef, size: size, fullWidth: false, disabled: true, style: { visibility: 'hidden', width: 0 } })),
2453
2475
  variant === 'outlined' && (React.createElement(material.OutlinedInput, { ref: inputRef, size: size, fullWidth: false, disabled: true, style: { visibility: 'hidden', width: 0 } })),
2454
2476
  variant === 'filled' && (React.createElement(material.FilledInput, { ref: inputRef, size: size, fullWidth: false, disabled: true, style: { visibility: 'hidden', width: 0 } })),
@@ -2456,7 +2478,7 @@ styleInject(css_248z$e);var FormItemBase = React.forwardRef(function (_a, ref) {
2456
2478
  width: fullWidth ? '100%' : 'auto',
2457
2479
  display: 'grid',
2458
2480
  marginTop: -inputHeight,
2459
- height: inputHeight,
2481
+ height: util.ifUndefined(controlHeight, inputHeight) > inputHeight ? controlHeight : undefined,
2460
2482
  alignItems: 'flex-start',
2461
2483
  paddingTop: controlMarginTop,
2462
2484
  position: 'relative',
@@ -2729,6 +2751,7 @@ var FormRadioGroup = ToForwardRefExoticComponent(AutoTypeForwardRef(function (_a
2729
2751
  * State - height (ResizeDetector)
2730
2752
  * ******************************************************************************************************************/
2731
2753
  var _r = reactResizeDetector.useResizeDetector(), height = _r.height, resizeHeightDetectorRef = _r.ref;
2754
+ var _s = reactResizeDetector.useResizeDetector(), realHeight = _s.height, resizeRealHeightDetectorRef = _s.ref;
2732
2755
  /********************************************************************************************************************
2733
2756
  * Function - setErrorErrorHelperText
2734
2757
  * ******************************************************************************************************************/
@@ -2760,7 +2783,7 @@ var FormRadioGroup = ToForwardRefExoticComponent(AutoTypeForwardRef(function (_a
2760
2783
  var getFinalValue = React.useCallback(function (value) {
2761
2784
  return onValue ? onValue(value) : value;
2762
2785
  }, [onValue]);
2763
- var _s = reactHook.useAutoUpdateRefState(initValue, getFinalValue), valueRef = _s[0], value = _s[1], setValue = _s[2];
2786
+ var _t = reactHook.useAutoUpdateRefState(initValue, getFinalValue), valueRef = _t[0], value = _t[1], setValue = _t[2];
2764
2787
  reactHook.useFirstSkipEffect(function () {
2765
2788
  if (error)
2766
2789
  validate(value);
@@ -2948,31 +2971,44 @@ var FormRadioGroup = ToForwardRefExoticComponent(AutoTypeForwardRef(function (_a
2948
2971
  /********************************************************************************************************************
2949
2972
  * Render
2950
2973
  * ******************************************************************************************************************/
2951
- 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 } }, style: __assign({ width: width, paddingLeft: PADDING_LEFT }, initStyle), sx: sx, hidden: hidden, autoSize: true, controlHeight: height || (size === 'small' ? 35 : 39), controlVerticalCenter: true, control: React.createElement(React.Fragment, null,
2974
+ var singleHeight = height || (size === 'small' ? 35 : 39);
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: {
2977
+ paddingTop: isMultiline && size === 'medium' ? 4 : undefined,
2978
+ }, controlVerticalCenter: !isMultiline, control: React.createElement(React.Fragment, null,
2952
2979
  !fullWidth && !isOnGetItemLoading && !loading && items && (React.createElement("div", { ref: resizeWidthDetectorRef, style: {
2953
2980
  display: 'grid',
2954
2981
  position: 'absolute',
2955
2982
  whiteSpace: 'nowrap',
2956
2983
  visibility: 'hidden',
2957
2984
  } },
2958
- React.createElement(material.RadioGroup, __assign({}, props, { style: { marginTop: 10, display: 'inline-flex', flexWrap: 'nowrap' }, name: name, row: inline, value: value === undefined ? null : value, onChange: handleChange }), items.map(function (_a, idx) {
2985
+ 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) {
2959
2986
  var value = _a.value, label = _a.label, itemDisabled = _a.disabled;
2960
- 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: { color: error ? theme.palette.error.main : '', marginTop: -10, whiteSpace: 'nowrap' }, value: value, disabled: disabled || readOnly || itemDisabled }));
2987
+ 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: {
2988
+ color: error ? theme.palette.error.main : '',
2989
+ marginTop: -5,
2990
+ marginBottom: -5,
2991
+ whiteSpace: 'nowrap',
2992
+ }, value: value, disabled: disabled || readOnly || itemDisabled }));
2961
2993
  })))),
2962
2994
  React.createElement("div", null,
2963
- React.createElement(material.RadioGroup, __assign({}, props, { style: {
2964
- marginTop: 10,
2995
+ React.createElement(material.RadioGroup, __assign({}, props, { ref: resizeRealHeightDetectorRef, style: {
2965
2996
  display: 'inline-flex',
2966
2997
  visibility: width == null ? 'hidden' : undefined,
2967
2998
  position: width == null ? 'absolute' : undefined,
2968
2999
  flexWrap: nowrap ? 'nowrap' : undefined,
2969
3000
  }, name: name, row: inline, value: value === undefined ? null : value, onChange: handleChange }), isOnGetItemLoading || loading ? (React.createElement("div", { style: { position: 'relative' } },
2970
- React.createElement(material.FormControlLabel, { ref: resizeHeightDetectorRef, label: '', control: React.createElement(material.Radio, { color: color, size: size }), style: { marginTop: -10, visibility: 'hidden' } }),
2971
- React.createElement("div", { style: { position: 'absolute', left: 0, top: 1, opacity: 0.54 } },
3001
+ React.createElement(material.FormControlLabel, { label: '', control: React.createElement(material.Radio, { color: color, size: size }), style: { visibility: 'hidden' } }),
3002
+ React.createElement("div", { style: { position: 'absolute', left: 0, top: 11, opacity: 0.54 } },
2972
3003
  React.createElement(material.CircularProgress, { size: size === 'small' ? 12 : 16, color: 'inherit' })))) : (React.createElement(React.Fragment, null, items &&
2973
3004
  items.map(function (_a, idx) {
2974
3005
  var value = _a.value, label = _a.label, itemDisabled = _a.disabled;
2975
- 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: { color: error ? theme.palette.error.main : '', marginTop: -10, whiteSpace: 'nowrap' }, value: value, disabled: disabled || readOnly || itemDisabled }));
3006
+ 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: {
3007
+ color: error ? theme.palette.error.main : '',
3008
+ whiteSpace: 'nowrap',
3009
+ marginTop: -5,
3010
+ marginBottom: -5,
3011
+ }, value: value, disabled: disabled || readOnly || itemDisabled }));
2976
3012
  })))))) }));
2977
3013
  }));
2978
3014
  FormRadioGroup.displayName = 'FormRadioGroup';var css_248z$d = ".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}";
@@ -8356,7 +8392,7 @@ var FormFile = React.forwardRef(function (_a, ref) {
8356
8392
  !hideUpload && (React.createElement(React.Fragment, null,
8357
8393
  React.createElement(StyledPdgButton, { variant: 'text', tabIndex: uploadTabIndex == null ? -1 : uploadTabIndex, className: classNames('input-file-btn form-file-btn', !!hideUploadLabel && 'hidden-label'), color: error ? 'error' : color, size: size, disabled: readOnly || disabled, ref: fileUploadBtnRef },
8358
8394
  React.createElement("label", { htmlFor: id },
8359
- React.createElement(reactComponent.PdgIcon, { size: size, color: error ? 'error' : color }, "upload"),
8395
+ React.createElement(reactComponent.PdgIcon, { size: size }, "upload"),
8360
8396
  !hideUploadLabel && (uploadLabel || '파일 업로드'))),
8361
8397
  React.createElement("input", { type: 'file', accept: accept, id: id, value: FILE_VALUE, className: 'input-file', onChange: handleFileChange }))),
8362
8398
  !hideLink && (React.createElement(StyledPdgButton, { variant: 'text', tabIndex: linkTabIndex == null ? -1 : linkTabIndex, className: classNames('link-btn form-file-btn', !!hideLinkLabel && 'hidden-label'), color: error ? 'error' : color, startIcon: 'link', size: size, disabled: readOnly || disabled, ref: linkBtnRef, onClick: handleLinkClick }, !hideLinkLabel && (linkLabel || '링크'))),
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.128",
4
+ "version": "1.0.130",
5
5
  "description": "React Form",
6
6
  "type": "module",
7
7
  "types": "dist/index.d.ts",