@pdg/react-form 1.0.139 → 1.0.141

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 +453 -302
  2. package/dist/index.js +452 -301
  3. package/package.json +1 -1
package/dist/index.esm.js CHANGED
@@ -1,4 +1,4 @@
1
- import React,{createContext,useContext,useRef,useCallback,useMemo,useLayoutEffect,useEffect,useState,useId}from'react';import classNames from'classnames';import {Box,styled,useTheme,InputLabel,Grid,Collapse,FormHelperText,InputAdornment,IconButton,TextField,Chip,Autocomplete,Icon,CircularProgress,MenuItem,Checkbox,FormControl,Input,OutlinedInput,FilledInput,FormControlLabel,Typography,RadioGroup,Radio,ToggleButton,ToggleButtonGroup,Rating,Skeleton,darken,Button,Tooltip,tooltipClasses,ClickAwayListener,Dialog,DialogTitle,DialogContent,DialogActions,Switch,Paper,Menu}from'@mui/material';import {empty,ifUndefined,nextTick,notEmpty,equal,telNoAutoDash,companyNoAutoDash,personalNoAutoDash}from'@pdg/util';import dayjs from'dayjs';import {useAutoUpdateLayoutRef,useAutoUpdateState,useAutoUpdateRefState,useFirstSkipEffect,useForceUpdate,useAutoUpdateRef}from'@pdg/react-hook';import {PdgButton,PdgIcon,PdgIconText}from'@pdg/react-component';import {useResizeDetector}from'react-resize-detector';import {NumericFormat}from'react-number-format';import {CheckBoxOutlineBlank,CheckBox,RadioButtonChecked,RadioButtonUnchecked}from'@mui/icons-material';import {Editor}from'@tinymce/tinymce-react';import {AdapterDayjs}from'@mui/x-date-pickers/AdapterDayjs';import {PickersDay,StaticDatePicker,LocalizationProvider,DesktopDatePicker,StaticDateTimePicker,DesktopDateTimePicker}from'@mui/x-date-pickers';import SimpleBar from'simplebar-react';import'dayjs/locale/ko';function styleInject(css, ref) {
1
+ import React,{createContext,useContext,useRef,useCallback,useMemo,useLayoutEffect,useEffect,useState,useId}from'react';import classNames from'classnames';import {Box,styled,useTheme,InputLabel,Grid,Collapse,FormHelperText,InputAdornment,IconButton,TextField,Chip,Autocomplete,Icon,CircularProgress,MenuItem,Checkbox,FormControl,Input,OutlinedInput,FilledInput,FormControlLabel,Typography,RadioGroup,Radio,ToggleButton,ToggleButtonGroup,Rating,Skeleton,darken,Button,Tooltip,tooltipClasses,ClickAwayListener,Dialog,DialogTitle,DialogContent,DialogActions,Switch,Paper,Menu}from'@mui/material';import {empty,ifUndefined,nextTick,notEmpty,equal,telNoAutoDash,companyNoAutoDash,personalNoAutoDash}from'@pdg/util';import dayjs from'dayjs';import {useAutoUpdateLayoutRef,useAutoUpdateState,useAutoUpdateRefState,useForceUpdate,useAutoUpdateRef,useFirstSkipEffect}from'@pdg/react-hook';import {PdgButton,PdgIcon,PdgIconText}from'@pdg/react-component';import {useResizeDetector}from'react-resize-detector';import {NumericFormat}from'react-number-format';import {CheckBoxOutlineBlank,CheckBox,RadioButtonChecked,RadioButtonUnchecked}from'@mui/icons-material';import {Editor}from'@tinymce/tinymce-react';import {AdapterDayjs}from'@mui/x-date-pickers/AdapterDayjs';import {PickersDay,StaticDatePicker,LocalizationProvider,DesktopDatePicker,StaticDateTimePicker,DesktopDateTimePicker}from'@mui/x-date-pickers';import SimpleBar from'simplebar-react';import'dayjs/locale/ko';function styleInject(css, ref) {
2
2
  if ( ref === void 0 ) ref = {};
3
3
  var insertAt = ref.insertAt;
4
4
 
@@ -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) {
@@ -1093,21 +1099,23 @@ styleInject(css_248z$k);var FormTextField = React.forwardRef(function (_a, ref)
1093
1099
  return true;
1094
1100
  }, [required, validPattern, invalidPattern, onValidate, setErrorErrorHelperText]);
1095
1101
  /********************************************************************************************************************
1096
- * State - value
1102
+ * value
1097
1103
  * ******************************************************************************************************************/
1098
1104
  var getFinalValue = useCallback(function (newValue) {
1099
1105
  return onValue ? onValue(newValue) : newValue;
1100
1106
  }, [onValue]);
1101
- var _h = useAutoUpdateRefState(initValue, getFinalValue), valueRef = _h[0], value = _h[1], setValue = _h[2];
1102
- useFirstSkipEffect(function () {
1107
+ var _h = useAutoUpdateRefState(initValue, getFinalValue), valueRef = _h[0], value = _h[1], _setValue = _h[2];
1108
+ var updateValue = useCallback(function (newValue) {
1109
+ var finalValue = _setValue(newValue);
1103
1110
  if (error)
1104
- validate(value);
1111
+ validate(finalValue);
1105
1112
  if (onChange)
1106
- onChange(value);
1113
+ onChange(finalValue);
1107
1114
  if (!noFormValueItem) {
1108
- onValueChange(name, value);
1115
+ onValueChange(name, finalValue);
1109
1116
  }
1110
- }, [value]);
1117
+ return finalValue;
1118
+ }, [_setValue, error, name, noFormValueItem, onChange, onValueChange, validate]);
1111
1119
  /********************************************************************************************************************
1112
1120
  * Variables
1113
1121
  * ******************************************************************************************************************/
@@ -1133,9 +1141,9 @@ styleInject(css_248z$k);var FormTextField = React.forwardRef(function (_a, ref)
1133
1141
  getType: function () { return 'default'; },
1134
1142
  getName: function () { return name; },
1135
1143
  getReset: function () { return getFinalValue(initValue); },
1136
- reset: function () { return setValue(initValue); },
1144
+ reset: function () { return updateValue(initValue); },
1137
1145
  getValue: function () { return valueRef.current; },
1138
- setValue: setValue,
1146
+ setValue: updateValue,
1139
1147
  getData: function () { return dataRef.current; },
1140
1148
  setData: setData,
1141
1149
  isExceptValue: function () { return !!exceptValue; },
@@ -1191,7 +1199,7 @@ styleInject(css_248z$k);var FormTextField = React.forwardRef(function (_a, ref)
1191
1199
  setDisabled,
1192
1200
  setErrorErrorHelperText,
1193
1201
  setHidden,
1194
- setValue,
1202
+ updateValue,
1195
1203
  validate,
1196
1204
  valueRef,
1197
1205
  ]);
@@ -1199,7 +1207,7 @@ styleInject(css_248z$k);var FormTextField = React.forwardRef(function (_a, ref)
1199
1207
  * Event Handler
1200
1208
  * ******************************************************************************************************************/
1201
1209
  var handleChange = useCallback(function (e) {
1202
- var finalValue = setValue(e.target.value);
1210
+ var finalValue = updateValue(e.target.value);
1203
1211
  if (!noFormValueItem) {
1204
1212
  nextTick(function () {
1205
1213
  onValueChangeByUser(name, finalValue);
@@ -1208,7 +1216,7 @@ styleInject(css_248z$k);var FormTextField = React.forwardRef(function (_a, ref)
1208
1216
  }
1209
1217
  });
1210
1218
  }
1211
- }, [setValue, noFormValueItem, onValueChangeByUser, name, select, onRequestSearchSubmit]);
1219
+ }, [updateValue, noFormValueItem, onValueChangeByUser, name, select, onRequestSearchSubmit]);
1212
1220
  var handleBlur = useCallback(function (e) {
1213
1221
  if (error)
1214
1222
  validate(valueRef.current);
@@ -1284,7 +1292,7 @@ styleInject(css_248z$k);var FormTextField = React.forwardRef(function (_a, ref)
1284
1292
  newProps.endAdornment = (React.createElement(React.Fragment, null,
1285
1293
  clear && !readOnly && !disabled && (React.createElement(InputAdornment, { className: classNames('clear-icon-button-wrap', showClear && 'show'), position: 'end' },
1286
1294
  React.createElement(IconButton, { className: 'clear-icon-button', size: 'small', tabIndex: -1, onClick: function () {
1287
- var finalValue = setValue('');
1295
+ var finalValue = updateValue('');
1288
1296
  focus();
1289
1297
  if (!noFormValueItem) {
1290
1298
  nextTick(function () {
@@ -1310,9 +1318,9 @@ styleInject(css_248z$k);var FormTextField = React.forwardRef(function (_a, ref)
1310
1318
  onRequestSearchSubmit,
1311
1319
  onValueChangeByUser,
1312
1320
  readOnly,
1313
- setValue,
1314
1321
  showClear,
1315
1322
  startAdornment,
1323
+ updateValue,
1316
1324
  ]);
1317
1325
  var slotProps = useMemo(function () {
1318
1326
  var _a;
@@ -1464,15 +1472,17 @@ var FormTag = React.forwardRef(function (_a, ref) {
1464
1472
  }
1465
1473
  return onValue ? onValue(finalValue) : finalValue;
1466
1474
  }, [onValue]);
1467
- var _h = useAutoUpdateRefState(initValue, getFinalValue), valueRef = _h[0], value = _h[1], setValue = _h[2];
1475
+ var _h = useAutoUpdateRefState(initValue, getFinalValue), valueRef = _h[0], value = _h[1], _setValue = _h[2];
1468
1476
  var valueSet = useMemo(function () { return new Set(value); }, [value]);
1469
- useFirstSkipEffect(function () {
1477
+ var updateValue = useCallback(function (newValue) {
1478
+ var finalValue = _setValue(newValue);
1470
1479
  if (error)
1471
- validate(value);
1480
+ validate(finalValue);
1472
1481
  if (onChange)
1473
- onChange(value);
1474
- onValueChange(name, value);
1475
- }, [value]);
1482
+ onChange(finalValue);
1483
+ onValueChange(name, finalValue);
1484
+ return finalValue;
1485
+ }, [_setValue, error, name, onChange, onValueChange, validate]);
1476
1486
  /********************************************************************************************************************
1477
1487
  * Effect
1478
1488
  * ******************************************************************************************************************/
@@ -1497,8 +1507,8 @@ var FormTag = React.forwardRef(function (_a, ref) {
1497
1507
  * Function - getCommands
1498
1508
  * ******************************************************************************************************************/
1499
1509
  var getCommands = useCallback(function (baseCommands) {
1500
- return __assign(__assign(__assign({}, baseCommands), { getReset: function () { return getFinalValue(initValue); }, reset: function () { return setValue(initValue); }, getValue: function () { return valueRef.current; }, setValue: function (newValue) { return setValue(newValue); }, validate: function () { return validate(valueRef.current); } }), getExtraCommands());
1501
- }, [getExtraCommands, getFinalValue, initValue, setValue, valueRef, validate]);
1510
+ return __assign(__assign(__assign({}, baseCommands), { getReset: function () { return getFinalValue(initValue); }, reset: function () { return updateValue(initValue); }, getValue: function () { return valueRef.current; }, setValue: function (newValue) { return updateValue(newValue); }, validate: function () { return validate(valueRef.current); } }), getExtraCommands());
1511
+ }, [getExtraCommands, getFinalValue, initValue, updateValue, valueRef, validate]);
1502
1512
  /********************************************************************************************************************
1503
1513
  * Function - appendTag, removeTag
1504
1514
  * ******************************************************************************************************************/
@@ -1507,25 +1517,25 @@ var FormTag = React.forwardRef(function (_a, ref) {
1507
1517
  if (onAppendTag && !onAppendTag(tag))
1508
1518
  return;
1509
1519
  valueSet.add(tag);
1510
- var finalValue_1 = setValue(valueSet);
1520
+ var finalValue_1 = updateValue(valueSet);
1511
1521
  nextTick(function () {
1512
1522
  onValueChangeByUser(name, finalValue_1);
1513
1523
  onRequestSearchSubmit(name, finalValue_1);
1514
1524
  });
1515
1525
  }
1516
- }, [valueSet, onAppendTag, setValue, onValueChangeByUser, name, onRequestSearchSubmit]);
1526
+ }, [valueSet, onAppendTag, updateValue, onValueChangeByUser, name, onRequestSearchSubmit]);
1517
1527
  var removeTag = useCallback(function (tag) {
1518
1528
  if (valueSet.has(tag)) {
1519
1529
  if (onRemoveTag && !onRemoveTag(tag))
1520
1530
  return;
1521
1531
  valueSet.delete(tag);
1522
- var finalValue_2 = setValue(valueSet);
1532
+ var finalValue_2 = updateValue(valueSet);
1523
1533
  nextTick(function () {
1524
1534
  onValueChangeByUser(name, finalValue_2);
1525
1535
  onRequestSearchSubmit(name, finalValue_2);
1526
1536
  });
1527
1537
  }
1528
- }, [valueSet, onRemoveTag, setValue, onValueChangeByUser, name, onRequestSearchSubmit]);
1538
+ }, [valueSet, onRemoveTag, updateValue, onValueChangeByUser, name, onRequestSearchSubmit]);
1529
1539
  /********************************************************************************************************************
1530
1540
  * Event Handler
1531
1541
  * ******************************************************************************************************************/
@@ -2206,19 +2216,18 @@ styleInject(css_248z$f);var FormSelect = ToForwardRefExoticComponent(AutoTypeFor
2206
2216
  return equal(newValue, finalValue) ? newValue : finalValue;
2207
2217
  }, [multiple, formValueSeparator, itemsValues, onValue]);
2208
2218
  /********************************************************************************************************************
2209
- * State - value
2210
- * ******************************************************************************************************************/
2211
- var _k = useAutoUpdateRefState(initValue, getFinalValue), valueRef = _k[0], value = _k[1], setValue = _k[2];
2212
- /********************************************************************************************************************
2213
- * Function
2219
+ * value
2214
2220
  * ******************************************************************************************************************/
2215
- useFirstSkipEffect(function () {
2221
+ var _k = useAutoUpdateRefState(initValue, getFinalValue), valueRef = _k[0], value = _k[1], _setValue = _k[2];
2222
+ var updateValue = useCallback(function (newValue) {
2223
+ var finalValue = _setValue(newValue);
2216
2224
  if (onChange)
2217
- onChange(value);
2218
- onValueChange(name, value);
2219
- }, [value]);
2225
+ onChange(finalValue);
2226
+ onValueChange(name, finalValue);
2227
+ return finalValue;
2228
+ }, [_setValue, name, onChange, onValueChange]);
2220
2229
  useFirstSkipEffect(function () {
2221
- setValue(valueRef.current);
2230
+ updateValue(valueRef.current);
2222
2231
  }, [multiple]);
2223
2232
  /********************************************************************************************************************
2224
2233
  * Effect
@@ -2243,11 +2252,11 @@ styleInject(css_248z$f);var FormSelect = ToForwardRefExoticComponent(AutoTypeFor
2243
2252
  var getBaseCommands = useCallback(function () {
2244
2253
  return {
2245
2254
  getReset: function () { return getFinalValue(initValue); },
2246
- reset: function () { return setValue(initValue); },
2255
+ reset: function () { return updateValue(initValue); },
2247
2256
  getValue: function () { return valueRef.current; },
2248
- setValue: function (value) { return setValue(value); },
2257
+ setValue: function (value) { return updateValue(value); },
2249
2258
  };
2250
- }, [getFinalValue, initValue, setValue, valueRef]);
2259
+ }, [getFinalValue, initValue, updateValue, valueRef]);
2251
2260
  var getExtraCommands = useCallback(function () {
2252
2261
  var lastItems = items;
2253
2262
  var lastLoading = loading;
@@ -2286,7 +2295,7 @@ styleInject(css_248z$f);var FormSelect = ToForwardRefExoticComponent(AutoTypeFor
2286
2295
  onAddValueItem(id, __assign(__assign(__assign({}, commands), getBaseCommands()), getExtraCommands()));
2287
2296
  }, [onAddValueItem, getBaseCommands, getExtraCommands]);
2288
2297
  var handleChange = function (newValue) {
2289
- setValue(newValue);
2298
+ updateValue(newValue);
2290
2299
  };
2291
2300
  var handleValue = useCallback(function (value) {
2292
2301
  return getFinalValue(value);
@@ -2530,9 +2539,15 @@ styleInject(css_248z$e);var FormItemBase = React.forwardRef(function (_a, ref) {
2530
2539
  React.createElement(PdgIcon, { style: { verticalAlign: 'middle', marginRight: 3, marginTop: -4, marginBottom: -2 } }, labelIcon),
2531
2540
  React.createElement("span", { style: { verticalAlign: 'middle' } }, label))) : (label))),
2532
2541
  React.createElement("div", { className: 'FormItemBase-Control-wrap', style: __assign({ display: 'grid', marginTop: hideLabel ? 0 : undefined }, controlContainerStyle) }, autoSize ? (React.createElement(React.Fragment, null,
2533
- variant === 'standard' && (React.createElement(Input, { ref: inputRef, size: size, fullWidth: false, disabled: true, style: { visibility: 'hidden', width: 0 } })),
2534
- variant === 'outlined' && (React.createElement(OutlinedInput, { ref: inputRef, size: size, fullWidth: false, disabled: true, style: { visibility: 'hidden', width: 0 } })),
2535
- variant === 'filled' && (React.createElement(FilledInput, { ref: inputRef, size: size, fullWidth: false, disabled: true, style: { visibility: 'hidden', width: 0 } })),
2542
+ variant === 'standard' && (React.createElement(Input, { ref: function (ref) {
2543
+ inputRef.current = ref;
2544
+ }, size: size, fullWidth: false, disabled: true, style: { visibility: 'hidden', width: 0 } })),
2545
+ variant === 'outlined' && (React.createElement(OutlinedInput, { ref: function (ref) {
2546
+ inputRef.current = ref;
2547
+ }, size: size, fullWidth: false, disabled: true, style: { visibility: 'hidden', width: 0 } })),
2548
+ variant === 'filled' && (React.createElement(FilledInput, { ref: function (ref) {
2549
+ inputRef.current = ref;
2550
+ }, size: size, fullWidth: false, disabled: true, style: { visibility: 'hidden', width: 0 } })),
2536
2551
  React.createElement("div", { className: 'FormItemBase-Control', style: {
2537
2552
  width: fullWidth ? '100%' : 'auto',
2538
2553
  display: 'grid',
@@ -2734,7 +2749,9 @@ FormItemBase.displayName = 'FormItemBase';var FormCheckbox = React.forwardRef(fu
2734
2749
  /********************************************************************************************************************
2735
2750
  * Render
2736
2751
  * ******************************************************************************************************************/
2737
- 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) }) }));
2752
+ 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) {
2753
+ labelRef.current = ref;
2754
+ }, 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) }) }));
2738
2755
  });
2739
2756
  FormCheckbox.displayName = 'FormCheckbox';var PADDING_LEFT = 3;
2740
2757
  var FormRadioGroup = ToForwardRefExoticComponent(AutoTypeForwardRef(function (_a, ref) {
@@ -2837,14 +2854,17 @@ var FormRadioGroup = ToForwardRefExoticComponent(AutoTypeForwardRef(function (_a
2837
2854
  var getFinalValue = useCallback(function (value) {
2838
2855
  return onValue ? onValue(value) : value;
2839
2856
  }, [onValue]);
2840
- var _t = useAutoUpdateRefState(initValue, getFinalValue), valueRef = _t[0], value = _t[1], setValue = _t[2];
2841
- useFirstSkipEffect(function () {
2857
+ var _t = useAutoUpdateRefState(initValue, getFinalValue), valueRef = _t[0], value = _t[1], _setValue = _t[2];
2858
+ var updateValue = useCallback(function (newValue, skipCallback) {
2859
+ if (skipCallback === void 0) { skipCallback = false; }
2860
+ var finalValue = _setValue(newValue, skipCallback);
2842
2861
  if (error)
2843
- validate(value);
2862
+ validate(finalValue);
2844
2863
  if (onChange)
2845
- onChange(value);
2846
- onValueChange(name, value);
2847
- }, [value]);
2864
+ onChange(finalValue);
2865
+ onValueChange(name, finalValue);
2866
+ return finalValue;
2867
+ }, [_setValue, error, name, onChange, onValueChange, validate]);
2848
2868
  /********************************************************************************************************************
2849
2869
  * Effect
2850
2870
  * ******************************************************************************************************************/
@@ -2918,9 +2938,9 @@ var FormRadioGroup = ToForwardRefExoticComponent(AutoTypeForwardRef(function (_a
2918
2938
  getType: function () { return 'FormRadioGroup'; },
2919
2939
  getName: function () { return name; },
2920
2940
  getReset: function () { return getFinalValue(initValue); },
2921
- reset: function () { return setValue(initValue); },
2941
+ reset: function () { return updateValue(initValue); },
2922
2942
  getValue: function () { return valueRef.current; },
2923
- setValue: setValue,
2943
+ setValue: updateValue,
2924
2944
  getData: function () { return dataRef.current; },
2925
2945
  setData: setData,
2926
2946
  isExceptValue: function () { return !!exceptValue; },
@@ -2980,7 +3000,7 @@ var FormRadioGroup = ToForwardRefExoticComponent(AutoTypeForwardRef(function (_a
2980
3000
  setHidden,
2981
3001
  setItems,
2982
3002
  setLoading,
2983
- setValue,
3003
+ updateValue,
2984
3004
  validate,
2985
3005
  valueRef,
2986
3006
  ]);
@@ -3014,23 +3034,22 @@ var FormRadioGroup = ToForwardRefExoticComponent(AutoTypeForwardRef(function (_a
3014
3034
  }
3015
3035
  finalValue_1 = getFinalValue(finalValue_1);
3016
3036
  if (value !== finalValue_1) {
3017
- setValue(finalValue_1, true);
3037
+ updateValue(finalValue_1, true);
3018
3038
  nextTick(function () {
3019
3039
  onValueChangeByUser(name, finalValue_1);
3020
3040
  onRequestSearchSubmit(name, finalValue_1);
3021
3041
  });
3022
3042
  }
3023
3043
  }
3024
- }, [readOnly, items, getFinalValue, value, setValue, onValueChangeByUser, name, onRequestSearchSubmit]);
3044
+ }, [readOnly, items, getFinalValue, value, updateValue, onValueChangeByUser, name, onRequestSearchSubmit]);
3025
3045
  /********************************************************************************************************************
3026
3046
  * Render
3027
3047
  * ******************************************************************************************************************/
3028
- var singleHeight = height || (size === 'small' ? 35 : 39);
3029
- var isMultiline = singleHeight <= ifUndefined(realHeight, 0);
3030
- 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: {
3031
- paddingTop: isMultiline && size === 'medium' ? 4 : undefined,
3032
- }, controlVerticalCenter: !isMultiline, control: React.createElement(React.Fragment, null,
3033
- !fullWidth && !isOnGetItemLoading && !loading && items && (React.createElement("div", { ref: resizeWidthDetectorRef, style: {
3048
+ var control = useMemo(function () {
3049
+ return (React.createElement(React.Fragment, null,
3050
+ !fullWidth && !isOnGetItemLoading && !loading && items && (React.createElement("div", { ref: function (ref) {
3051
+ resizeWidthDetectorRef.current = ref;
3052
+ }, style: {
3034
3053
  display: 'grid',
3035
3054
  position: 'absolute',
3036
3055
  whiteSpace: 'nowrap',
@@ -3038,7 +3057,11 @@ var FormRadioGroup = ToForwardRefExoticComponent(AutoTypeForwardRef(function (_a
3038
3057
  } },
3039
3058
  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) {
3040
3059
  var value = _a.value, label = _a.label, itemDisabled = _a.disabled;
3041
- 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: {
3060
+ return (React.createElement(FormControlLabel, { ref: idx === 0
3061
+ ? function (ref) {
3062
+ resizeHeightDetectorRef.current = ref;
3063
+ }
3064
+ : 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: {
3042
3065
  color: error ? theme.palette.error.main : '',
3043
3066
  marginTop: -5,
3044
3067
  marginBottom: -5,
@@ -3046,7 +3069,9 @@ var FormRadioGroup = ToForwardRefExoticComponent(AutoTypeForwardRef(function (_a
3046
3069
  }, value: value, disabled: disabled || readOnly || itemDisabled }));
3047
3070
  })))),
3048
3071
  React.createElement("div", null,
3049
- React.createElement(RadioGroup, __assign({}, props, { ref: resizeRealHeightDetectorRef, style: {
3072
+ React.createElement(RadioGroup, __assign({}, props, { ref: function (ref) {
3073
+ resizeRealHeightDetectorRef.current = ref;
3074
+ }, style: {
3050
3075
  display: 'inline-flex',
3051
3076
  visibility: width == null ? 'hidden' : undefined,
3052
3077
  position: width == null ? 'absolute' : undefined,
@@ -3057,13 +3082,40 @@ var FormRadioGroup = ToForwardRefExoticComponent(AutoTypeForwardRef(function (_a
3057
3082
  React.createElement(CircularProgress, { size: size === 'small' ? 12 : 16, color: 'inherit' })))) : (React.createElement(React.Fragment, null, items &&
3058
3083
  items.map(function (_a, idx) {
3059
3084
  var value = _a.value, label = _a.label, itemDisabled = _a.disabled;
3060
- 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: {
3085
+ 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: {
3061
3086
  color: error ? theme.palette.error.main : '',
3062
3087
  whiteSpace: 'nowrap',
3063
3088
  marginTop: -5,
3064
3089
  marginBottom: -5,
3065
3090
  }, value: value, disabled: disabled || readOnly || itemDisabled }));
3066
- })))))) }));
3091
+ })))))));
3092
+ }, [
3093
+ color,
3094
+ disabled,
3095
+ error,
3096
+ fullWidth,
3097
+ handleChange,
3098
+ inline,
3099
+ isOnGetItemLoading,
3100
+ items,
3101
+ loading,
3102
+ name,
3103
+ nowrap,
3104
+ props,
3105
+ readOnly,
3106
+ resizeHeightDetectorRef,
3107
+ resizeRealHeightDetectorRef,
3108
+ resizeWidthDetectorRef,
3109
+ size,
3110
+ theme.palette.error.main,
3111
+ value,
3112
+ width,
3113
+ ]);
3114
+ var singleHeight = height || (size === 'small' ? 35 : 39);
3115
+ var isMultiline = singleHeight <= ifUndefined(realHeight, 0);
3116
+ 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: {
3117
+ paddingTop: isMultiline && size === 'medium' ? 4 : undefined,
3118
+ }, controlVerticalCenter: !isMultiline, control: control }));
3067
3119
  }));
3068
3120
  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}";
3069
3121
  styleInject(css_248z$d);var FormToggleButtonGroup = ToForwardRefExoticComponent(AutoTypeForwardRef(function (_a, ref) {
@@ -3227,9 +3279,9 @@ styleInject(css_248z$d);var FormToggleButtonGroup = ToForwardRefExoticComponent(
3227
3279
  }
3228
3280
  }
3229
3281
  else {
3230
- var realValue = itemsValues["".concat(finalValue)];
3231
- if (realValue != null && finalValue !== realValue) {
3232
- finalValue = realValue;
3282
+ var realValue_1 = itemsValues["".concat(finalValue)];
3283
+ if (realValue_1 != null && finalValue !== realValue_1) {
3284
+ finalValue = realValue_1;
3233
3285
  }
3234
3286
  }
3235
3287
  }
@@ -3237,16 +3289,19 @@ styleInject(css_248z$d);var FormToggleButtonGroup = ToForwardRefExoticComponent(
3237
3289
  finalValue = onValue ? onValue(finalValue) : finalValue;
3238
3290
  return equal(value, finalValue) ? value : finalValue;
3239
3291
  }, [multiple, formValueSeparator, itemsValues, onValue]);
3240
- var _t = useAutoUpdateRefState(initValue, getFinalValue), valueRef = _t[0], value = _t[1], setValue = _t[2];
3241
- useFirstSkipEffect(function () {
3292
+ var _t = useAutoUpdateRefState(initValue, getFinalValue), valueRef = _t[0], value = _t[1], _setValue = _t[2];
3293
+ var updateValue = useCallback(function (newValue, skipCallback) {
3294
+ if (skipCallback === void 0) { skipCallback = false; }
3295
+ var finalValue = _setValue(newValue, skipCallback);
3242
3296
  if (error)
3243
- validate(value);
3297
+ validate(finalValue);
3244
3298
  if (onChange)
3245
- onChange(value);
3246
- onValueChange(name, value);
3247
- }, [value]);
3299
+ onChange(finalValue);
3300
+ onValueChange(name, finalValue);
3301
+ return finalValue;
3302
+ }, [_setValue, error, name, onChange, onValueChange, validate]);
3248
3303
  useFirstSkipEffect(function () {
3249
- setValue(valueRef.current);
3304
+ updateValue(valueRef.current);
3250
3305
  }, [multiple]);
3251
3306
  /********************************************************************************************************************
3252
3307
  * Effect
@@ -3276,7 +3331,7 @@ styleInject(css_248z$d);var FormToggleButtonGroup = ToForwardRefExoticComponent(
3276
3331
  }
3277
3332
  }
3278
3333
  if (setFirstItem) {
3279
- setValue((multiple ? [items[0].value] : items[0].value));
3334
+ updateValue((multiple ? [items[0].value] : items[0].value));
3280
3335
  }
3281
3336
  }
3282
3337
  }
@@ -3298,9 +3353,9 @@ styleInject(css_248z$d);var FormToggleButtonGroup = ToForwardRefExoticComponent(
3298
3353
  getType: function () { return 'FormToggleButtonGroup'; },
3299
3354
  getName: function () { return name; },
3300
3355
  getReset: function () { return getFinalValue(initValue); },
3301
- reset: function () { return setValue(initValue); },
3356
+ reset: function () { return updateValue(initValue); },
3302
3357
  getValue: function () { return valueRef.current; },
3303
- setValue: setValue,
3358
+ setValue: updateValue,
3304
3359
  getData: function () { return dataRef.current; },
3305
3360
  setData: setData,
3306
3361
  isExceptValue: function () { return !!exceptValue; },
@@ -3369,7 +3424,7 @@ styleInject(css_248z$d);var FormToggleButtonGroup = ToForwardRefExoticComponent(
3369
3424
  setHidden,
3370
3425
  setItems,
3371
3426
  setLoading,
3372
- setValue,
3427
+ updateValue,
3373
3428
  validate,
3374
3429
  valueRef,
3375
3430
  ]);
@@ -3398,7 +3453,7 @@ styleInject(css_248z$d);var FormToggleButtonGroup = ToForwardRefExoticComponent(
3398
3453
  }
3399
3454
  finalValue_1 = getFinalValue(finalValue_1);
3400
3455
  if (!equal(valueRef.current, finalValue_1)) {
3401
- setValue(finalValue_1, true);
3456
+ updateValue(finalValue_1, true);
3402
3457
  nextTick(function () {
3403
3458
  onValueChangeByUser(name, finalValue_1);
3404
3459
  onRequestSearchSubmit(name, finalValue_1);
@@ -3411,7 +3466,7 @@ styleInject(css_248z$d);var FormToggleButtonGroup = ToForwardRefExoticComponent(
3411
3466
  getFinalValue,
3412
3467
  valueRef,
3413
3468
  multiple,
3414
- setValue,
3469
+ updateValue,
3415
3470
  onValueChangeByUser,
3416
3471
  name,
3417
3472
  onRequestSearchSubmit,
@@ -3467,23 +3522,75 @@ styleInject(css_248z$d);var FormToggleButtonGroup = ToForwardRefExoticComponent(
3467
3522
  theme.palette.error.main,
3468
3523
  type,
3469
3524
  ]);
3470
- var controlHeight = height || 0;
3471
- var isMultiline = controlHeight <= ifUndefined(realHeight, 0);
3472
- 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 },
3525
+ var realValue = useMemo(function () {
3526
+ var newRealValue = value == null ? null : value;
3527
+ if (items && value != null) {
3528
+ if (Array.isArray(newRealValue)) {
3529
+ var stringRealValues_1 = newRealValue.map(function (v) { return v.toString(); });
3530
+ if (multiple) {
3531
+ var foundItems = items.filter(function (v) { return stringRealValues_1.includes(v.value.toString()); });
3532
+ newRealValue = foundItems.map(function (v) { return v.value; });
3533
+ }
3534
+ }
3535
+ else if (newRealValue != null) {
3536
+ var stringRealValue_1 = newRealValue.toString();
3537
+ var foundItem = items.find(function (v) { return v.value.toString() === stringRealValue_1; });
3538
+ if (foundItem) {
3539
+ newRealValue = foundItem.value;
3540
+ }
3541
+ }
3542
+ }
3543
+ return newRealValue;
3544
+ }, [items, multiple, value]);
3545
+ var control = useMemo(function () {
3546
+ return isOnGetItemLoading || loading ? (React.createElement("div", { style: { opacity: 0.54 }, ref: function (ref) {
3547
+ refForLoadingResizeHeightDetect.current = ref;
3548
+ } },
3473
3549
  React.createElement(CircularProgress, { size: 16, color: 'inherit' }))) : (React.createElement(React.Fragment, null,
3474
- !fullWidth && !isOnGetItemLoading && !loading && items && (React.createElement("div", { ref: refForResizeWidthDetect, style: {
3550
+ !fullWidth && !isOnGetItemLoading && !loading && items && (React.createElement("div", { ref: function (ref) {
3551
+ refForResizeWidthDetect.current = ref;
3552
+ }, style: {
3475
3553
  display: 'grid',
3476
3554
  position: 'absolute',
3477
3555
  whiteSpace: 'nowrap',
3478
3556
  visibility: 'hidden',
3479
3557
  } },
3480
3558
  React.createElement(ToggleButtonGroup, { className: 'ToggleButtonGroup', exclusive: !multiple }, buttons))),
3481
- React.createElement(ToggleButtonGroup, { ref: refForButtonsResizeHeightDetect, className: 'ToggleButtonGroup', exclusive: !multiple, fullWidth: fullWidth, value: value == null ? null : value, onChange: handleChange, style: {
3559
+ React.createElement(ToggleButtonGroup, { ref: function (ref) {
3560
+ refForButtonsResizeHeightDetect.current = ref;
3561
+ }, className: 'ToggleButtonGroup', exclusive: !multiple, fullWidth: fullWidth, value: realValue, onChange: handleChange, style: {
3482
3562
  width: !fullWidth && formColWidth && typeof width === 'number' && width > formColWidth
3483
3563
  ? formColWidth
3484
3564
  : undefined,
3485
3565
  flexWrap: type === 'checkbox' || type === 'radio' ? 'wrap' : 'nowrap',
3486
- }, "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)))) })));
3566
+ }, "aria-labelledby": notEmpty(label) ? labelId : undefined }, isOnGetItemLoading || loading || !items || empty(items) ? (React.createElement(ToggleButton, { ref: function (ref) {
3567
+ refForButtonResizeHeightDetect.current = ref;
3568
+ }, size: size, className: 'ToggleButton', disabled: disabled || readOnly, value: '', style: { visibility: 'hidden' } })) : (buttons))));
3569
+ }, [
3570
+ buttons,
3571
+ disabled,
3572
+ formColWidth,
3573
+ fullWidth,
3574
+ handleChange,
3575
+ isOnGetItemLoading,
3576
+ items,
3577
+ label,
3578
+ labelId,
3579
+ loading,
3580
+ multiple,
3581
+ readOnly,
3582
+ realValue,
3583
+ refForButtonResizeHeightDetect,
3584
+ refForButtonsResizeHeightDetect,
3585
+ refForLoadingResizeHeightDetect,
3586
+ refForResizeWidthDetect,
3587
+ size,
3588
+ type,
3589
+ width,
3590
+ ]);
3591
+ var controlHeight = height || 0;
3592
+ var isMultiline = controlHeight <= ifUndefined(realHeight, 0);
3593
+ 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 })));
3487
3594
  }));
3488
3595
  FormToggleButtonGroup.displayName = 'FormToggleButtonGroup';var FormRating = React.forwardRef(function (_a, ref) {
3489
3596
  /********************************************************************************************************************
@@ -3558,14 +3665,16 @@ FormToggleButtonGroup.displayName = 'FormToggleButtonGroup';var FormRating = Rea
3558
3665
  var finalValue = value || 0;
3559
3666
  return onValue ? onValue(finalValue) : finalValue;
3560
3667
  }, [onValue]);
3561
- var _m = useAutoUpdateRefState(initValue, getFinalValue), valueRef = _m[0], value = _m[1], setValue = _m[2];
3562
- useFirstSkipEffect(function () {
3668
+ var _m = useAutoUpdateRefState(initValue, getFinalValue), valueRef = _m[0], value = _m[1], _setValue = _m[2];
3669
+ var updateValue = useCallback(function (newValue) {
3670
+ var finalValue = _setValue(newValue);
3563
3671
  if (error)
3564
- validate(value);
3672
+ validate(finalValue);
3565
3673
  if (onChange)
3566
- onChange(value);
3567
- onValueChange(name, value);
3568
- }, [value]);
3674
+ onChange(finalValue);
3675
+ onValueChange(name, finalValue);
3676
+ return finalValue;
3677
+ }, [_setValue, error, name, onChange, onValueChange, validate]);
3569
3678
  /********************************************************************************************************************
3570
3679
  * Effect
3571
3680
  * ******************************************************************************************************************/
@@ -3594,9 +3703,9 @@ FormToggleButtonGroup.displayName = 'FormToggleButtonGroup';var FormRating = Rea
3594
3703
  getType: function () { return 'FormRating'; },
3595
3704
  getName: function () { return name; },
3596
3705
  getReset: function () { return getFinalValue(initValue); },
3597
- reset: function () { return setValue(initValue); },
3706
+ reset: function () { return updateValue(initValue); },
3598
3707
  getValue: function () { return valueRef.current; },
3599
- setValue: setValue,
3708
+ setValue: updateValue,
3600
3709
  getData: function () { return dataRef.current; },
3601
3710
  setData: setData,
3602
3711
  isExceptValue: function () { return !!exceptValue; },
@@ -3648,7 +3757,7 @@ FormToggleButtonGroup.displayName = 'FormToggleButtonGroup';var FormRating = Rea
3648
3757
  setDisabled,
3649
3758
  setErrorErrorHelperText,
3650
3759
  setHidden,
3651
- setValue,
3760
+ updateValue,
3652
3761
  validate,
3653
3762
  valueRef,
3654
3763
  ]);
@@ -3660,17 +3769,19 @@ FormToggleButtonGroup.displayName = 'FormToggleButtonGroup';var FormRating = Rea
3660
3769
  e.preventDefault();
3661
3770
  }
3662
3771
  else {
3663
- var finalValue_1 = setValue(value);
3772
+ var finalValue_1 = updateValue(value);
3664
3773
  nextTick(function () {
3665
3774
  onValueChangeByUser(name, finalValue_1);
3666
3775
  onRequestSearchSubmit(name, finalValue_1);
3667
3776
  });
3668
3777
  }
3669
- }, [readOnly, setValue, onValueChangeByUser, name, onRequestSearchSubmit]);
3778
+ }, [readOnly, updateValue, onValueChangeByUser, name, onRequestSearchSubmit]);
3670
3779
  /********************************************************************************************************************
3671
3780
  * Render
3672
3781
  * ******************************************************************************************************************/
3673
- 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); } }) }));
3782
+ 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) {
3783
+ ratingRef.current = ref;
3784
+ }, 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); } }) }));
3674
3785
  });
3675
3786
  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}";
3676
3787
  styleInject(css_248z$c);var getFinalValue$8 = function (value) {
@@ -3748,14 +3859,16 @@ styleInject(css_248z$c);var getFinalValue$8 = function (value) {
3748
3859
  /********************************************************************************************************************
3749
3860
  * State - value
3750
3861
  * ******************************************************************************************************************/
3751
- var _o = useAutoUpdateRefState(initValue, getFinalValue$8), valueRef = _o[0], value = _o[1], setValue = _o[2];
3752
- useFirstSkipEffect(function () {
3862
+ var _o = useAutoUpdateRefState(initValue, getFinalValue$8), valueRef = _o[0], value = _o[1], _setValue = _o[2];
3863
+ var updateValue = useCallback(function (newValue) {
3864
+ var finalValue = _setValue(newValue);
3753
3865
  if (error)
3754
- validate(value);
3866
+ validate(finalValue);
3755
3867
  if (onChange)
3756
- onChange(value);
3757
- onValueChange(name, value);
3758
- }, [value]);
3868
+ onChange(finalValue);
3869
+ onValueChange(name, finalValue);
3870
+ return finalValue;
3871
+ }, [_setValue, error, name, onChange, onValueChange, validate]);
3759
3872
  /********************************************************************************************************************
3760
3873
  * Function - focus
3761
3874
  * ******************************************************************************************************************/
@@ -3771,9 +3884,9 @@ styleInject(css_248z$c);var getFinalValue$8 = function (value) {
3771
3884
  getType: function () { return 'FormTextEditor'; },
3772
3885
  getName: function () { return name; },
3773
3886
  getReset: function () { return getFinalValue$8(initValue); },
3774
- reset: function () { return setValue(initValue); },
3887
+ reset: function () { return updateValue(initValue); },
3775
3888
  getValue: function () { return valueRef.current; },
3776
- setValue: setValue,
3889
+ setValue: updateValue,
3777
3890
  getData: function () { return dataRef.current; },
3778
3891
  setData: setData,
3779
3892
  isExceptValue: function () { return !!exceptValue; },
@@ -3824,7 +3937,7 @@ styleInject(css_248z$c);var getFinalValue$8 = function (value) {
3824
3937
  setDisabled,
3825
3938
  setErrorErrorHelperText,
3826
3939
  setHidden,
3827
- setValue,
3940
+ updateValue,
3828
3941
  validate,
3829
3942
  valueRef,
3830
3943
  ]);
@@ -3832,14 +3945,14 @@ styleInject(css_248z$c);var getFinalValue$8 = function (value) {
3832
3945
  * Event Handler
3833
3946
  * ******************************************************************************************************************/
3834
3947
  var handleEditorChange = useCallback(function (value) {
3835
- setValue(value);
3948
+ updateValue(value);
3836
3949
  if (new Date().getTime() - keyDownTime.current < 300) {
3837
3950
  nextTick(function () {
3838
3951
  if (onValueChangeByUser)
3839
3952
  onValueChangeByUser(name, value);
3840
3953
  });
3841
3954
  }
3842
- }, [name, onValueChangeByUser, setValue]);
3955
+ }, [name, onValueChangeByUser, updateValue]);
3843
3956
  var handleKeyDown = useCallback(function () {
3844
3957
  keyDownTime.current = new Date().getTime();
3845
3958
  }, []);
@@ -4042,17 +4155,20 @@ FormTextEditor.displayName = 'FormTextEditor';var FormAutocomplete = ToForwardRe
4042
4155
  }
4043
4156
  return onValue ? onValue(finalValue) : finalValue;
4044
4157
  }, [multiple, formValueSeparator, itemsValues, onValue]);
4045
- var _p = useAutoUpdateRefState(initValue, getFinalValue), valueRef = _p[0], value = _p[1], setValue = _p[2];
4158
+ var _p = useAutoUpdateRefState(initValue, getFinalValue), valueRef = _p[0], value = _p[1], _setValue = _p[2];
4046
4159
  var _q = useState(null), valueItem = _q[0], setValueItem = _q[1];
4047
- useFirstSkipEffect(function () {
4160
+ var updateValue = useCallback(function (newValue, skipCallback) {
4161
+ if (skipCallback === void 0) { skipCallback = false; }
4162
+ var finalValue = _setValue(newValue, skipCallback);
4048
4163
  if (error)
4049
- validate(value);
4164
+ validate(finalValue);
4050
4165
  if (onChange)
4051
- onChange(value);
4052
- onValueChange(name, value);
4053
- }, [value]);
4166
+ onChange(finalValue);
4167
+ onValueChange(name, finalValue);
4168
+ return finalValue;
4169
+ }, [_setValue, error, name, onChange, onValueChange, validate]);
4054
4170
  useFirstSkipEffect(function () {
4055
- setValue(getFinalValue(valueRef.current));
4171
+ updateValue(getFinalValue(valueRef.current));
4056
4172
  }, [multiple]);
4057
4173
  /********************************************************************************************************************
4058
4174
  * Memo
@@ -4097,7 +4213,7 @@ FormTextEditor.displayName = 'FormTextEditor';var FormAutocomplete = ToForwardRe
4097
4213
  }
4098
4214
  }
4099
4215
  else {
4100
- if (!Array.isArray(valueItem) && finalValue === valueItem.value) {
4216
+ if (!Array.isArray(valueItem) && finalValue.toString() === valueItem.value.toString()) {
4101
4217
  newComponentValue = valueItem;
4102
4218
  }
4103
4219
  }
@@ -4225,9 +4341,9 @@ FormTextEditor.displayName = 'FormTextEditor';var FormAutocomplete = ToForwardRe
4225
4341
  getType: function () { return 'FormAutocomplete'; },
4226
4342
  getName: function () { return name; },
4227
4343
  getReset: function () { return getFinalValue(initValue); },
4228
- reset: function () { return setValue(initValue); },
4344
+ reset: function () { return updateValue(initValue); },
4229
4345
  getValue: function () { return valueRef.current; },
4230
- setValue: function (newValue) { return setValue(newValue); },
4346
+ setValue: function (newValue) { return updateValue(newValue); },
4231
4347
  getData: function () { return dataRef.current; },
4232
4348
  setData: function (data) { return setData(data); },
4233
4349
  isExceptValue: function () { return !!exceptValue; },
@@ -4269,7 +4385,7 @@ FormTextEditor.displayName = 'FormTextEditor';var FormAutocomplete = ToForwardRe
4269
4385
  setHidden,
4270
4386
  setItems,
4271
4387
  setLoading,
4272
- setValue,
4388
+ updateValue,
4273
4389
  validate,
4274
4390
  valueRef,
4275
4391
  ]);
@@ -4317,7 +4433,7 @@ FormTextEditor.displayName = 'FormTextEditor';var FormAutocomplete = ToForwardRe
4317
4433
  }
4318
4434
  var finalValue = getFinalValue(newValue);
4319
4435
  if (!equal(valueRef.current, finalValue)) {
4320
- setValue(finalValue, true);
4436
+ updateValue(finalValue, true);
4321
4437
  setValueItem(componentValue);
4322
4438
  nextTick(function () {
4323
4439
  onValueChangeByUser(name, finalValue);
@@ -4345,7 +4461,7 @@ FormTextEditor.displayName = 'FormTextEditor';var FormAutocomplete = ToForwardRe
4345
4461
  else {
4346
4462
  go();
4347
4463
  }
4348
- }, [multiple, getFinalValue, valueRef, setValue, onValueChangeByUser, name, onRequestSearchSubmit, onAddItem]);
4464
+ }, [multiple, getFinalValue, valueRef, updateValue, onValueChangeByUser, name, onRequestSearchSubmit, onAddItem]);
4349
4465
  var handleGetOptionDisabled = useCallback(function (option) {
4350
4466
  if (getOptionDisabled) {
4351
4467
  return option.disabled || getOptionDisabled(option);
@@ -4367,6 +4483,25 @@ FormTextEditor.displayName = 'FormTextEditor';var FormAutocomplete = ToForwardRe
4367
4483
  /********************************************************************************************************************
4368
4484
  * Render
4369
4485
  * ******************************************************************************************************************/
4486
+ // const realComponentValue = useMemo(() => {
4487
+ // let newRealValue = componentValue;
4488
+ // if (items && value != null) {
4489
+ // if (Array.isArray(newRealValue)) {
4490
+ // const stringRealValues = newRealValue.map((v) => v.toString());
4491
+ // if (multiple) {
4492
+ // const foundItems = items.filter((v) => stringRealValues.includes(v.value.toString()));
4493
+ // newRealValue = foundItems.map((v) => v.value) as any;
4494
+ // }
4495
+ // } else if (newRealValue != null) {
4496
+ // const stringRealValue = newRealValue.toString();
4497
+ // const foundItem = items.find((v) => v.value.toString() === stringRealValue);
4498
+ // if (foundItem) {
4499
+ // newRealValue = foundItem.value as any;
4500
+ // }
4501
+ // }
4502
+ // }
4503
+ // return newRealValue;
4504
+ // }, [componentValue, items, multiple, value]);
4370
4505
  return (React.createElement(Autocomplete, { options: items || [], className: classNames(className, 'FormValueItem', 'FormAutocomplete'), sx: sx, multiple: multiple, fullWidth: !width && fullWidth, openOnFocus: openOnFocus, disableClearable: disableClearable, disablePortal: disablePortal, noOptionsText: noOptionsText, value: componentValue, style: style, isOptionEqualToValue: function (option, value) { return option.value === value.value; }, getOptionDisabled: handleGetOptionDisabled, disabled: disabled, readOnly: readOnly, loading: loading || isOnGetItemLoading, loadingText: loadingText, limitTags: limitTags, getLimitTagsText: getLimitTagsText, onChange: function (e, value, reason, details) { return handleChange(value, reason, details); }, renderOption: function (props, option) { return (React.createElement("li", __assign({}, props, { key: "".concat(option.value) }), onRenderItem ? onRenderItem(option) : option.label)); }, onInputChange: function (event, newInputValue, reason) {
4371
4506
  if (reason === 'input') {
4372
4507
  setInputValue(newInputValue);
@@ -5031,15 +5166,32 @@ styleInject(css_248z$7);var PrivateDatePicker = React.forwardRef(function (_a, r
5031
5166
  /********************************************************************************************************************
5032
5167
  * value
5033
5168
  * ******************************************************************************************************************/
5034
- var _o = useAutoUpdateRefState(initValue), valueRef = _o[0], value = _o[1], setValue = _o[2];
5169
+ var _o = useAutoUpdateRefState(initValue), valueRef = _o[0], value = _o[1], _setValue = _o[2];
5035
5170
  var _p = useAutoUpdateState(value), inputValue = _p[0], setInputValue = _p[1];
5036
- useFirstSkipEffect(function () {
5171
+ var updateValue = useCallback(function (newValue) {
5172
+ var finalValue = _setValue(newValue);
5037
5173
  if (error)
5038
- validate(value);
5174
+ validate(finalValue);
5039
5175
  if (onChange)
5040
- onChange(value);
5041
- onValueChange(name, value);
5042
- }, [value]);
5176
+ onChange(finalValue);
5177
+ onValueChange(name, finalValue);
5178
+ if (type !== 'time' && time && finalValue && (availableDate[0] || availableDate[1])) {
5179
+ var availableDateVal = getAvailableDateVal(availableDate, type, time);
5180
+ var valueVal = getDateValForAvailableDate(finalValue, type, time);
5181
+ var timeError_1 = null;
5182
+ if (availableDateVal[0] && valueVal < availableDateVal[0]) {
5183
+ timeError_1 = 'minDate';
5184
+ }
5185
+ if (timeError_1 == null && availableDateVal[1] && valueVal > availableDateVal[1]) {
5186
+ timeError_1 = 'maxDate';
5187
+ }
5188
+ setTimeError(timeError_1);
5189
+ }
5190
+ else {
5191
+ setTimeError(null);
5192
+ }
5193
+ return finalValue;
5194
+ }, [_setValue, availableDate, error, name, onChange, onValueChange, time, type, validate]);
5043
5195
  /********************************************************************************************************************
5044
5196
  * Effect
5045
5197
  * ******************************************************************************************************************/
@@ -5066,24 +5218,6 @@ styleInject(css_248z$7);var PrivateDatePicker = React.forwardRef(function (_a, r
5066
5218
  }
5067
5219
  }
5068
5220
  }, [open]);
5069
- useEffect(function () {
5070
- if (type !== 'time' && time && value && (availableDate[0] || availableDate[1])) {
5071
- var availableDateVal = getAvailableDateVal(availableDate, type, time);
5072
- var valueVal = getDateValForAvailableDate(value, type, time);
5073
- var timeError_1 = null;
5074
- if (availableDateVal[0] && valueVal < availableDateVal[0]) {
5075
- timeError_1 = 'minDate';
5076
- }
5077
- if (timeError_1 == null && availableDateVal[1] && valueVal > availableDateVal[1]) {
5078
- timeError_1 = 'maxDate';
5079
- }
5080
- setTimeError(timeError_1);
5081
- }
5082
- else {
5083
- setTimeError(null);
5084
- }
5085
- // eslint-disable-next-line react-hooks/exhaustive-deps
5086
- }, [value]);
5087
5221
  /********************************************************************************************************************
5088
5222
  * Function - focus
5089
5223
  * ******************************************************************************************************************/
@@ -5100,9 +5234,9 @@ styleInject(css_248z$7);var PrivateDatePicker = React.forwardRef(function (_a, r
5100
5234
  getType: function () { return 'default'; },
5101
5235
  getName: function () { return name; },
5102
5236
  getReset: function () { return initValue; },
5103
- reset: function () { return setValue(initValue); },
5237
+ reset: function () { return updateValue(initValue); },
5104
5238
  getValue: function () { return valueRef.current; },
5105
- setValue: setValue,
5239
+ setValue: updateValue,
5106
5240
  getData: function () { return dataRef.current; },
5107
5241
  setData: setData,
5108
5242
  isExceptValue: function () { return !!exceptValue; },
@@ -5160,9 +5294,9 @@ styleInject(css_248z$7);var PrivateDatePicker = React.forwardRef(function (_a, r
5160
5294
  setDisabled,
5161
5295
  setErrorErrorHelperText,
5162
5296
  setHidden,
5163
- setValue,
5164
5297
  time,
5165
5298
  type,
5299
+ updateValue,
5166
5300
  validate,
5167
5301
  valueRef,
5168
5302
  ]);
@@ -5170,16 +5304,16 @@ styleInject(css_248z$7);var PrivateDatePicker = React.forwardRef(function (_a, r
5170
5304
  * Event Handler
5171
5305
  * ******************************************************************************************************************/
5172
5306
  var handleChange = useCallback(function (unit, newValue, keyboardInputValue) {
5173
- var updateValue = true;
5307
+ var isUpdateValue = true;
5174
5308
  if (notEmpty(keyboardInputValue)) {
5175
5309
  if (newValue) {
5176
5310
  if (!newValue.isValid()) {
5177
- updateValue = false;
5311
+ isUpdateValue = false;
5178
5312
  }
5179
5313
  }
5180
5314
  }
5181
5315
  var finalValue = newValue;
5182
- if (updateValue) {
5316
+ if (isUpdateValue) {
5183
5317
  if (type !== 'time' && finalValue != null && keyboardInputValue == null) {
5184
5318
  var checkResult = checkDateAvailable(finalValue, availableDate, type, time);
5185
5319
  if (checkResult !== 'available') {
@@ -5205,7 +5339,7 @@ styleInject(css_248z$7);var PrivateDatePicker = React.forwardRef(function (_a, r
5205
5339
  if (time === unit)
5206
5340
  setOpen(false);
5207
5341
  }
5208
- setValue(finalValue);
5342
+ updateValue(finalValue);
5209
5343
  nextTick(function () {
5210
5344
  onValueChangeByUser(name, finalValue);
5211
5345
  if (runOnRequestSearchSubmit_1) {
@@ -5214,7 +5348,7 @@ styleInject(css_248z$7);var PrivateDatePicker = React.forwardRef(function (_a, r
5214
5348
  });
5215
5349
  }
5216
5350
  setInputValue(finalValue);
5217
- }, [setInputValue, type, time, setValue, availableDate, open, onValueChangeByUser, name, onRequestSearchSubmit]);
5351
+ }, [setInputValue, type, time, updateValue, availableDate, open, onValueChangeByUser, name, onRequestSearchSubmit]);
5218
5352
  var handleContainerFocus = useCallback(function () {
5219
5353
  if (closeTimeoutRef.current) {
5220
5354
  clearTimeout(closeTimeoutRef.current);
@@ -5662,15 +5796,32 @@ var PrivateStaticDateTimePicker = React.forwardRef(function (_a, ref) {
5662
5796
  /********************************************************************************************************************
5663
5797
  * State - value
5664
5798
  * ******************************************************************************************************************/
5665
- var _o = useAutoUpdateRefState(initValue, getFinalValue$7), valueRef = _o[0], value = _o[1], setValue = _o[2];
5799
+ var _o = useAutoUpdateRefState(initValue, getFinalValue$7), valueRef = _o[0], value = _o[1], _setValue = _o[2];
5666
5800
  var _p = useAutoUpdateState(value), inputValue = _p[0], setInputValue = _p[1];
5667
- useFirstSkipEffect(function () {
5801
+ var updateValue = useCallback(function (newValue) {
5802
+ var finalValue = _setValue(newValue);
5668
5803
  if (error)
5669
- validate(value);
5804
+ validate(finalValue);
5670
5805
  if (onChange)
5671
- onChange(value);
5672
- onValueChange(name, value);
5673
- }, [value]);
5806
+ onChange(finalValue);
5807
+ onValueChange(name, finalValue);
5808
+ if (type !== 'time' && time && finalValue && (availableDate[0] || availableDate[1])) {
5809
+ var availableDateVal = getAvailableDateVal(availableDate, type, time);
5810
+ var valueVal = getDateValForAvailableDate(finalValue, type, time);
5811
+ var timeError_1 = null;
5812
+ if (availableDateVal[0] && valueVal < availableDateVal[0]) {
5813
+ timeError_1 = 'minDate';
5814
+ }
5815
+ if (timeError_1 == null && availableDateVal[1] && valueVal > availableDateVal[1]) {
5816
+ timeError_1 = 'maxDate';
5817
+ }
5818
+ setTimeError(timeError_1);
5819
+ }
5820
+ else {
5821
+ setTimeError(null);
5822
+ }
5823
+ return finalValue;
5824
+ }, [_setValue, availableDate, error, name, onChange, onValueChange, time, type, validate]);
5674
5825
  /********************************************************************************************************************
5675
5826
  * Effect
5676
5827
  * ******************************************************************************************************************/
@@ -5697,24 +5848,6 @@ var PrivateStaticDateTimePicker = React.forwardRef(function (_a, ref) {
5697
5848
  }
5698
5849
  }
5699
5850
  }, [open]);
5700
- useEffect(function () {
5701
- if (type !== 'time' && time && value && (availableDate[0] || availableDate[1])) {
5702
- var availableDateVal = getAvailableDateVal(availableDate, type, time);
5703
- var valueVal = getDateValForAvailableDate(value, type, time);
5704
- var timeError_1 = null;
5705
- if (availableDateVal[0] && valueVal < availableDateVal[0]) {
5706
- timeError_1 = 'minDate';
5707
- }
5708
- if (timeError_1 == null && availableDateVal[1] && valueVal > availableDateVal[1]) {
5709
- timeError_1 = 'maxDate';
5710
- }
5711
- setTimeError(timeError_1);
5712
- }
5713
- else {
5714
- setTimeError(null);
5715
- }
5716
- // eslint-disable-next-line react-hooks/exhaustive-deps
5717
- }, [value]);
5718
5851
  /********************************************************************************************************************
5719
5852
  * Function - focus
5720
5853
  * ******************************************************************************************************************/
@@ -5731,9 +5864,9 @@ var PrivateStaticDateTimePicker = React.forwardRef(function (_a, ref) {
5731
5864
  getType: function () { return 'default'; },
5732
5865
  getName: function () { return name; },
5733
5866
  getReset: function () { return getFinalValue$7(initValue); },
5734
- reset: function () { return setValue(initValue); },
5867
+ reset: function () { return updateValue(initValue); },
5735
5868
  getValue: function () { return valueRef.current; },
5736
- setValue: setValue,
5869
+ setValue: updateValue,
5737
5870
  getData: function () { return dataRef.current; },
5738
5871
  setData: setData,
5739
5872
  isExceptValue: function () { return !!exceptValue; },
@@ -5791,9 +5924,9 @@ var PrivateStaticDateTimePicker = React.forwardRef(function (_a, ref) {
5791
5924
  setDisabled,
5792
5925
  setErrorErrorHelperText,
5793
5926
  setHidden,
5794
- setValue,
5795
5927
  time,
5796
5928
  type,
5929
+ updateValue,
5797
5930
  validate,
5798
5931
  valueRef,
5799
5932
  ]);
@@ -5802,16 +5935,16 @@ var PrivateStaticDateTimePicker = React.forwardRef(function (_a, ref) {
5802
5935
  * ******************************************************************************************************************/
5803
5936
  var handleChange = useCallback(function (unit, newValue, keyboardInputValue) {
5804
5937
  var _a, _b, _c;
5805
- var updateValue = true;
5938
+ var isUpdateValue = true;
5806
5939
  if (notEmpty(keyboardInputValue)) {
5807
5940
  if (newValue) {
5808
5941
  if (!newValue.isValid()) {
5809
- updateValue = false;
5942
+ isUpdateValue = false;
5810
5943
  }
5811
5944
  }
5812
5945
  }
5813
5946
  var finalValue = newValue;
5814
- if (updateValue) {
5947
+ if (isUpdateValue) {
5815
5948
  if (type !== 'time' && finalValue != null && keyboardInputValue == null) {
5816
5949
  var checkResult = checkDateAvailable(finalValue, availableDate, type, time);
5817
5950
  if (checkResult !== 'available') {
@@ -5837,7 +5970,7 @@ var PrivateStaticDateTimePicker = React.forwardRef(function (_a, ref) {
5837
5970
  if (time === unit)
5838
5971
  setOpen(false);
5839
5972
  }
5840
- setValue(finalValue);
5973
+ updateValue(finalValue);
5841
5974
  nextTick(function () {
5842
5975
  onValueChangeByUser(name, finalValue);
5843
5976
  if (runOnRequestSearchSubmit_1) {
@@ -5862,7 +5995,7 @@ var PrivateStaticDateTimePicker = React.forwardRef(function (_a, ref) {
5862
5995
  }
5863
5996
  }
5864
5997
  setInputValue(finalValue);
5865
- }, [setInputValue, type, time, setValue, availableDate, open, onValueChangeByUser, name, onRequestSearchSubmit]);
5998
+ }, [setInputValue, type, time, updateValue, availableDate, open, onValueChangeByUser, name, onRequestSearchSubmit]);
5866
5999
  var handleContainerFocus = useCallback(function () {
5867
6000
  if (closeTimeoutRef.current) {
5868
6001
  clearTimeout(closeTimeoutRef.current);
@@ -7732,14 +7865,16 @@ var FormDateRangePicker = React.forwardRef(function (_a, ref) {
7732
7865
  /********************************************************************************************************************
7733
7866
  * value
7734
7867
  * ******************************************************************************************************************/
7735
- var _w = useAutoUpdateRefState(initValue, getFinalValue$6), valueRef = _w[0], value = _w[1], setValue = _w[2];
7736
- useFirstSkipEffect(function () {
7868
+ var _w = useAutoUpdateRefState(initValue, getFinalValue$6), valueRef = _w[0], value = _w[1], _setValue = _w[2];
7869
+ var updateValue = useCallback(function (newValue) {
7870
+ var finalValue = _setValue(newValue);
7737
7871
  if (error || fromError || toError)
7738
- validate(value);
7872
+ validate(finalValue);
7739
7873
  if (onChange)
7740
- onChange(value);
7741
- onValueChange(name, value);
7742
- }, [value]);
7874
+ onChange(finalValue);
7875
+ onValueChange(name, finalValue);
7876
+ return finalValue;
7877
+ }, [_setValue, error, fromError, name, onChange, onValueChange, toError, validate]);
7743
7878
  /********************************************************************************************************************
7744
7879
  * Effect
7745
7880
  * ******************************************************************************************************************/
@@ -7782,11 +7917,11 @@ var FormDateRangePicker = React.forwardRef(function (_a, ref) {
7782
7917
  * Event Handler
7783
7918
  * ******************************************************************************************************************/
7784
7919
  var handleChange = useCallback(function (newValue) {
7785
- setValue(newValue);
7920
+ updateValue(newValue);
7786
7921
  setOpen(false);
7787
7922
  setFromErrorErrorHelperText(false, undefined);
7788
7923
  setToErrorErrorHelperText(false, undefined);
7789
- }, [setFromErrorErrorHelperText, setToErrorErrorHelperText, setValue]);
7924
+ }, [setFromErrorErrorHelperText, setToErrorErrorHelperText, updateValue]);
7790
7925
  var handleValueChange = useCallback(function (selectType, newValue, fromInput) {
7791
7926
  var _a;
7792
7927
  var finalValue;
@@ -7851,12 +7986,12 @@ var FormDateRangePicker = React.forwardRef(function (_a, ref) {
7851
7986
  }
7852
7987
  break;
7853
7988
  }
7854
- setValue(finalValue);
7989
+ updateValue(finalValue);
7855
7990
  nextTick(function () {
7856
7991
  onValueChangeByUser(name, finalValue);
7857
7992
  });
7858
7993
  }, [
7859
- setValue,
7994
+ updateValue,
7860
7995
  value,
7861
7996
  setFromErrorErrorHelperText,
7862
7997
  activeMonth,
@@ -7960,15 +8095,15 @@ var FormDateRangePicker = React.forwardRef(function (_a, ref) {
7960
8095
  getType: function () { return 'FormDateRangePicker'; },
7961
8096
  getName: function () { return name; },
7962
8097
  getReset: function () { return getFinalValue$6(initValue); },
7963
- reset: function () { return setValue(initValue); },
8098
+ reset: function () { return updateValue(initValue); },
7964
8099
  getValue: function () { return valueRef.current; },
7965
- setValue: setValue,
8100
+ setValue: updateValue,
7966
8101
  getData: function () { return dataRef.current; },
7967
8102
  setData: setData,
7968
8103
  getFromValue: function () { return valueRef.current[0]; },
7969
- setFromValue: function (value) { return setValue([value, valueRef.current[1]]); },
8104
+ setFromValue: function (value) { return updateValue([value, valueRef.current[1]]); },
7970
8105
  getToValue: function () { return valueRef.current[1]; },
7971
- setToValue: function (value) { return setValue([valueRef.current[0], value]); },
8106
+ setToValue: function (value) { return updateValue([valueRef.current[0], value]); },
7972
8107
  isExceptValue: function () { return !!exceptValue; },
7973
8108
  isDisabled: function () { return !!disabledRef.current; },
7974
8109
  setDisabled: setDisabled,
@@ -8033,7 +8168,7 @@ var FormDateRangePicker = React.forwardRef(function (_a, ref) {
8033
8168
  setDisabled,
8034
8169
  setErrorErrorHelperText,
8035
8170
  setHidden,
8036
- setValue,
8171
+ updateValue,
8037
8172
  validate,
8038
8173
  valueRef,
8039
8174
  ]);
@@ -8235,14 +8370,16 @@ var FormFile = React.forwardRef(function (_a, ref) {
8235
8370
  /********************************************************************************************************************
8236
8371
  * State - value
8237
8372
  * ******************************************************************************************************************/
8238
- var _m = useAutoUpdateRefState(initValue, getFinalValue$5), valueRef = _m[0], value = _m[1], setValue = _m[2];
8239
- useFirstSkipEffect(function () {
8373
+ var _m = useAutoUpdateRefState(initValue, getFinalValue$5), valueRef = _m[0], value = _m[1], _setValue = _m[2];
8374
+ var updateValue = useCallback(function (newValue) {
8375
+ var finalValue = _setValue(newValue);
8240
8376
  if (error)
8241
- validate(value);
8377
+ validate(finalValue);
8242
8378
  if (onChange)
8243
- onChange(value);
8244
- onValueChange(name, value);
8245
- }, [value]);
8379
+ onChange(finalValue);
8380
+ onValueChange(name, finalValue);
8381
+ return finalValue;
8382
+ }, [_setValue, error, name, onChange, onValueChange, validate]);
8246
8383
  /********************************************************************************************************************
8247
8384
  * Function - focus
8248
8385
  * ******************************************************************************************************************/
@@ -8268,9 +8405,9 @@ var FormFile = React.forwardRef(function (_a, ref) {
8268
8405
  getType: function () { return 'FormFile'; },
8269
8406
  getName: function () { return name; },
8270
8407
  getReset: function () { return getFinalValue$5(initValue); },
8271
- reset: function () { return setValue(initValue); },
8408
+ reset: function () { return updateValue(initValue); },
8272
8409
  getValue: function () { return valueRef.current; },
8273
- setValue: setValue,
8410
+ setValue: updateValue,
8274
8411
  getData: function () { return dataRef.current; },
8275
8412
  setData: setData,
8276
8413
  isExceptValue: function () { return !!exceptValue; },
@@ -8321,7 +8458,7 @@ var FormFile = React.forwardRef(function (_a, ref) {
8321
8458
  setDisabled,
8322
8459
  setErrorErrorHelperText,
8323
8460
  setHidden,
8324
- setValue,
8461
+ updateValue,
8325
8462
  validate,
8326
8463
  valueRef,
8327
8464
  ]);
@@ -8371,7 +8508,7 @@ var FormFile = React.forwardRef(function (_a, ref) {
8371
8508
  var file_1 = target.files[0];
8372
8509
  fileSizeCheck(file_1).then(function () {
8373
8510
  onFile(file_1).then(function (url) {
8374
- setValue(url);
8511
+ updateValue(url);
8375
8512
  nextTick(function () {
8376
8513
  if (onValueChangeByUser)
8377
8514
  onValueChangeByUser(name, url);
@@ -8379,21 +8516,21 @@ var FormFile = React.forwardRef(function (_a, ref) {
8379
8516
  });
8380
8517
  });
8381
8518
  }
8382
- }, [fileSizeCheck, name, onFile, onValueChangeByUser, setValue]);
8519
+ }, [fileSizeCheck, name, onFile, onValueChangeByUser, updateValue]);
8383
8520
  var handleLinkClick = useCallback(function () {
8384
8521
  setIsOpenLinkDialog(true);
8385
8522
  }, []);
8386
8523
  var handleRemoveClick = useCallback(function () {
8387
- setValue('');
8524
+ updateValue('');
8388
8525
  nextTick(function () {
8389
8526
  if (onValueChangeByUser)
8390
8527
  onValueChangeByUser(name, '');
8391
8528
  });
8392
- }, [name, onValueChangeByUser, setValue]);
8529
+ }, [name, onValueChangeByUser, updateValue]);
8393
8530
  var handleLinkDialogConfirm = useCallback(function (url) {
8394
8531
  if (onLink) {
8395
8532
  onLink(url).then(function (finalUrl) {
8396
- setValue(finalUrl);
8533
+ updateValue(finalUrl);
8397
8534
  nextTick(function () {
8398
8535
  if (onValueChangeByUser)
8399
8536
  onValueChangeByUser(name, finalUrl);
@@ -8401,13 +8538,13 @@ var FormFile = React.forwardRef(function (_a, ref) {
8401
8538
  });
8402
8539
  }
8403
8540
  else {
8404
- setValue(url);
8541
+ updateValue(url);
8405
8542
  nextTick(function () {
8406
8543
  if (onValueChangeByUser)
8407
8544
  onValueChangeByUser(name, url);
8408
8545
  });
8409
8546
  }
8410
- }, [name, onLink, onValueChangeByUser, setValue]);
8547
+ }, [name, onLink, onValueChangeByUser, updateValue]);
8411
8548
  /********************************************************************************************************************
8412
8549
  * Render
8413
8550
  * ******************************************************************************************************************/
@@ -8415,7 +8552,9 @@ var FormFile = React.forwardRef(function (_a, ref) {
8415
8552
  preview,
8416
8553
  React.createElement("div", null, error ? errorHelperText : helperText)), hideLabel: !hideUrl, style: { width: fullWidth ? '100%' : undefined }, control: React.createElement("div", { className: 'control-wrap' },
8417
8554
  !hideUrl && (React.createElement("div", { className: 'file-name-wrap' },
8418
- React.createElement(TextField, { ref: innerRef, inputRef: textFieldRef, className: 'file-name', variant: variant, label: labelIcon ? (React.createElement(React.Fragment, null,
8555
+ React.createElement(TextField, { ref: function (ref) {
8556
+ innerRef.current = ref;
8557
+ }, inputRef: textFieldRef, className: 'file-name', variant: variant, label: labelIcon ? (React.createElement(React.Fragment, null,
8419
8558
  React.createElement(PdgIcon, { style: { verticalAlign: 'middle', marginRight: 4 } }, labelIcon),
8420
8559
  React.createElement("span", { style: { verticalAlign: 'middle' } }, initLabel))) : (initLabel), size: size, required: required, value: value || '', focused: focused, disabled: disabled, fullWidth: true, error: error, slotProps: {
8421
8560
  inputLabel: labelShrink ? { shrink: labelShrink } : undefined,
@@ -8460,11 +8599,13 @@ styleInject(css_248z);var getFinalValue$4 = function (value) { return value || '
8460
8599
  /********************************************************************************************************************
8461
8600
  * value
8462
8601
  * ******************************************************************************************************************/
8463
- var _d = useAutoUpdateState(initValue, getFinalValue$4), value = _d[0], setValue = _d[1];
8464
- useFirstSkipEffect(function () {
8602
+ var _d = useAutoUpdateState(initValue, getFinalValue$4), value = _d[0], _setValue = _d[1];
8603
+ var updateValue = useCallback(function (newValue) {
8604
+ var finalValue = _setValue(newValue);
8465
8605
  if (onChange)
8466
- onChange(value);
8467
- }, [value]);
8606
+ onChange(finalValue);
8607
+ return finalValue;
8608
+ }, [_setValue, onChange]);
8468
8609
  /********************************************************************************************************************
8469
8610
  * Function
8470
8611
  * ******************************************************************************************************************/
@@ -8533,8 +8674,8 @@ styleInject(css_248z);var getFinalValue$4 = function (value) { return value || '
8533
8674
  * Event Handler
8534
8675
  * ******************************************************************************************************************/
8535
8676
  var handleChange = useCallback(function (value) {
8536
- setValue(value);
8537
- }, [setValue]);
8677
+ updateValue(value);
8678
+ }, [updateValue]);
8538
8679
  var handleFile = useCallback(function (file) {
8539
8680
  return new Promise(function (resolve, reject) {
8540
8681
  imageSizeCheck(file)
@@ -8670,14 +8811,16 @@ var FormMonthPicker = React.forwardRef(function (_a, ref) {
8670
8811
  /********************************************************************************************************************
8671
8812
  * value
8672
8813
  * ******************************************************************************************************************/
8673
- var _p = useAutoUpdateRefState(initValue, getFinalValue$3), valueRef = _p[0], value = _p[1], setValue = _p[2];
8674
- useFirstSkipEffect(function () {
8814
+ var _p = useAutoUpdateRefState(initValue, getFinalValue$3), valueRef = _p[0], value = _p[1], _setValue = _p[2];
8815
+ var updateValue = useCallback(function (newValue) {
8816
+ var finalValue = _setValue(newValue);
8675
8817
  if (error)
8676
- validate(value);
8818
+ validate(finalValue);
8677
8819
  if (onChange)
8678
- onChange(value);
8679
- onValueChange(name, value);
8680
- }, [value]);
8820
+ onChange(finalValue);
8821
+ onValueChange(name, finalValue);
8822
+ return finalValue;
8823
+ }, [_setValue, error, name, onChange, onValueChange, validate]);
8681
8824
  /********************************************************************************************************************
8682
8825
  * Memo
8683
8826
  * ******************************************************************************************************************/
@@ -8760,14 +8903,14 @@ var FormMonthPicker = React.forwardRef(function (_a, ref) {
8760
8903
  getType: function () { return 'FormMonthPicker'; },
8761
8904
  getName: function () { return name; },
8762
8905
  getReset: function () { return getFinalValue$3(initValue); },
8763
- reset: function () { return setValue(initValue); },
8906
+ reset: function () { return updateValue(initValue); },
8764
8907
  getValue: function () { return valueRef.current; },
8765
- setValue: setValue,
8908
+ setValue: updateValue,
8766
8909
  getData: function () { return dataRef.current; },
8767
8910
  setData: setData,
8768
8911
  getYear: function () { return (valueRef.current ? valueRef.current.year : null); },
8769
8912
  setYear: function (year) {
8770
- setValue(year === null
8913
+ updateValue(year === null
8771
8914
  ? null
8772
8915
  : valueRef.current
8773
8916
  ? { year: year, month: valueRef.current.month }
@@ -8775,7 +8918,7 @@ var FormMonthPicker = React.forwardRef(function (_a, ref) {
8775
8918
  },
8776
8919
  getMonth: function () { return (valueRef.current ? valueRef.current.month : null); },
8777
8920
  setMonth: function (month) {
8778
- setValue(month === null
8921
+ updateValue(month === null
8779
8922
  ? null
8780
8923
  : valueRef.current
8781
8924
  ? { year: valueRef.current.year, month: month }
@@ -8839,7 +8982,7 @@ var FormMonthPicker = React.forwardRef(function (_a, ref) {
8839
8982
  setDisabled,
8840
8983
  setErrorErrorHelperText,
8841
8984
  setHidden,
8842
- setValue,
8985
+ updateValue,
8843
8986
  validate,
8844
8987
  valueRef,
8845
8988
  ]);
@@ -8872,13 +9015,13 @@ var FormMonthPicker = React.forwardRef(function (_a, ref) {
8872
9015
  }
8873
9016
  }, []);
8874
9017
  var handleContainerChange = useCallback(function (newValue, isMonthSelect) {
8875
- setValue(newValue);
9018
+ updateValue(newValue);
8876
9019
  if (isMonthSelect)
8877
9020
  setOpen(false);
8878
9021
  nextTick(function () {
8879
9022
  onValueChangeByUser(name, newValue);
8880
9023
  });
8881
- }, [name, onValueChangeByUser, setValue]);
9024
+ }, [name, onValueChangeByUser, updateValue]);
8882
9025
  var handleInputDatePickerFocus = useCallback(function () {
8883
9026
  if (readOnly || disabled)
8884
9027
  return;
@@ -8925,7 +9068,7 @@ var FormMonthPicker = React.forwardRef(function (_a, ref) {
8925
9068
  React.createElement(PrivateMonthPicker, { minValue: minValue, maxValue: maxValue, disablePast: disablePast, disableFuture: disableFuture, value: value, onChange: handleContainerChange })) },
8926
9069
  React.createElement("div", null,
8927
9070
  React.createElement(PrivateInputDatePicker, __assign({}, inputDatePickerProps, { style: inputWidth != null
8928
- ? __assign({ width: inputWidth }, initStyle) : __assign({ width: fullWidth ? undefined : 150 }, initStyle), sx: sx, value: valueDate, label: label, labelIcon: labelIcon, error: error, focused: focused, required: required, readOnly: readOnly, readOnlyInput: readOnlyInput, icon: icon, startAdornment: startAdornment, endAdornment: endAdornment, inputRef: inputRef, onChange: function (v) { return setValue(v ? dateToValue$3(v) : v); }, onFocus: handleInputDatePickerFocus, onError: function (reason) { return (inputDatePickerErrorRef.current = reason); }, shouldDisableYear: handleInputDatePickerShouldDisableYear })))),
9071
+ ? __assign({ width: inputWidth }, initStyle) : __assign({ width: fullWidth ? undefined : 150 }, initStyle), sx: sx, value: valueDate, label: label, labelIcon: labelIcon, error: error, focused: focused, required: required, readOnly: readOnly, readOnlyInput: readOnlyInput, icon: icon, startAdornment: startAdornment, endAdornment: endAdornment, inputRef: inputRef, onChange: function (v) { return updateValue(v ? dateToValue$3(v) : v); }, onFocus: handleInputDatePickerFocus, onError: function (reason) { return (inputDatePickerErrorRef.current = reason); }, shouldDisableYear: handleInputDatePickerShouldDisableYear })))),
8929
9072
  !formColWithHelperText && (!!helperText || (error && !!errorHelperText)) && (React.createElement(FormHelperText, { error: error, style: { marginLeft: variant === 'standard' ? 0 : 14 } }, error ? errorHelperText : helperText))))));
8930
9073
  });
8931
9074
  FormMonthPicker.displayName = 'FormMonthPicker';var DEFAULT_VALUE$1 = [null, null];
@@ -9045,14 +9188,16 @@ var FormMonthRangePicker = React.forwardRef(function (_a, ref) {
9045
9188
  /********************************************************************************************************************
9046
9189
  * State - value
9047
9190
  * ******************************************************************************************************************/
9048
- var _v = useAutoUpdateRefState(initValue, getFinalValue$2), valueRef = _v[0], value = _v[1], setValue = _v[2];
9049
- useFirstSkipEffect(function () {
9191
+ var _v = useAutoUpdateRefState(initValue, getFinalValue$2), valueRef = _v[0], value = _v[1], _setValue = _v[2];
9192
+ var updateValue = useCallback(function (newValue) {
9193
+ var finalValue = _setValue(newValue);
9050
9194
  if (error || fromError || toError)
9051
- validate(value);
9195
+ validate(finalValue);
9052
9196
  if (onChange)
9053
- onChange(value);
9054
- onValueChange(name, value);
9055
- }, [value]);
9197
+ onChange(finalValue);
9198
+ onValueChange(name, finalValue);
9199
+ return finalValue;
9200
+ }, [_setValue, error, fromError, name, onChange, onValueChange, toError, validate]);
9056
9201
  /********************************************************************************************************************
9057
9202
  * Memo
9058
9203
  * ******************************************************************************************************************/
@@ -9124,18 +9269,18 @@ var FormMonthRangePicker = React.forwardRef(function (_a, ref) {
9124
9269
  getType: function () { return 'FormMonthRangePicker'; },
9125
9270
  getName: function () { return name; },
9126
9271
  getReset: function () { return getFinalValue$2(initValue); },
9127
- reset: function () { return setValue(initValue); },
9272
+ reset: function () { return updateValue(initValue); },
9128
9273
  getValue: function () { return valueRef.current; },
9129
- setValue: setValue,
9274
+ setValue: updateValue,
9130
9275
  getData: function () { return dataRef.current; },
9131
9276
  setData: setData,
9132
9277
  getFromValue: function () { return valueRef.current[0]; },
9133
- setFromValue: function (value) { return setValue([value, valueRef.current[1]]); },
9278
+ setFromValue: function (value) { return updateValue([value, valueRef.current[1]]); },
9134
9279
  getToValue: function () { return valueRef.current[1]; },
9135
- setToValue: function (value) { return setValue([valueRef.current[0], value]); },
9280
+ setToValue: function (value) { return updateValue([valueRef.current[0], value]); },
9136
9281
  getFromYear: function () { return (valueRef.current[0] ? valueRef.current[0].year : null); },
9137
9282
  setFromYear: function (year) {
9138
- setValue([
9283
+ updateValue([
9139
9284
  year === null
9140
9285
  ? null
9141
9286
  : valueRef.current[0]
@@ -9146,7 +9291,7 @@ var FormMonthRangePicker = React.forwardRef(function (_a, ref) {
9146
9291
  },
9147
9292
  getFromMonth: function () { return (valueRef.current[0] ? valueRef.current[0].month : null); },
9148
9293
  setFromMonth: function (month) {
9149
- setValue([
9294
+ updateValue([
9150
9295
  month === null
9151
9296
  ? null
9152
9297
  : valueRef.current[0]
@@ -9157,7 +9302,7 @@ var FormMonthRangePicker = React.forwardRef(function (_a, ref) {
9157
9302
  },
9158
9303
  getToYear: function () { return (valueRef.current[1] ? valueRef.current[1].year : null); },
9159
9304
  setToYear: function (year) {
9160
- setValue([
9305
+ updateValue([
9161
9306
  valueRef.current[0],
9162
9307
  year === null
9163
9308
  ? null
@@ -9168,7 +9313,7 @@ var FormMonthRangePicker = React.forwardRef(function (_a, ref) {
9168
9313
  },
9169
9314
  getToMonth: function () { return (valueRef.current[1] ? valueRef.current[1].month : null); },
9170
9315
  setToMonth: function (month) {
9171
- setValue([
9316
+ updateValue([
9172
9317
  valueRef.current[0],
9173
9318
  month === null
9174
9319
  ? null
@@ -9245,7 +9390,7 @@ var FormMonthRangePicker = React.forwardRef(function (_a, ref) {
9245
9390
  setDisabled,
9246
9391
  setErrorErrorHelperText,
9247
9392
  setHidden,
9248
- setValue,
9393
+ updateValue,
9249
9394
  validate,
9250
9395
  valueRef,
9251
9396
  ]);
@@ -9253,7 +9398,7 @@ var FormMonthRangePicker = React.forwardRef(function (_a, ref) {
9253
9398
  * Event Handler
9254
9399
  * ******************************************************************************************************************/
9255
9400
  var handleContainerChange = useCallback(function (newValue, selectType, isMonthSelect) {
9256
- setValue(newValue);
9401
+ updateValue(newValue);
9257
9402
  if (selectType === 'start' && isMonthSelect) {
9258
9403
  nextTick(function () {
9259
9404
  var _a;
@@ -9266,7 +9411,7 @@ var FormMonthRangePicker = React.forwardRef(function (_a, ref) {
9266
9411
  nextTick(function () {
9267
9412
  onValueChangeByUser(name, newValue);
9268
9413
  });
9269
- }, [name, onValueChangeByUser, setValue]);
9414
+ }, [name, onValueChangeByUser, updateValue]);
9270
9415
  var handleInputDatePickerChange = useCallback(function (selectType, date) {
9271
9416
  if (date == null || date.isValid()) {
9272
9417
  if (selectType === 'start') {
@@ -9284,7 +9429,7 @@ var FormMonthRangePicker = React.forwardRef(function (_a, ref) {
9284
9429
  nextTick(function () {
9285
9430
  onValueChangeByUser(name, newValue_1);
9286
9431
  });
9287
- setValue(newValue_1);
9432
+ updateValue(newValue_1);
9288
9433
  }
9289
9434
  else {
9290
9435
  var newValue_2 = [valueRef.current[0], date ? dateToValue$2(date) : null];
@@ -9301,10 +9446,10 @@ var FormMonthRangePicker = React.forwardRef(function (_a, ref) {
9301
9446
  nextTick(function () {
9302
9447
  onValueChangeByUser(name, newValue_2);
9303
9448
  });
9304
- setValue(newValue_2);
9449
+ updateValue(newValue_2);
9305
9450
  }
9306
9451
  }
9307
- }, [valueRef, dateInfo, fromError, setValue, validate, onValueChangeByUser, name, toError]);
9452
+ }, [valueRef, dateInfo, fromError, updateValue, validate, onValueChangeByUser, name, toError]);
9308
9453
  var handleInputDatePickerFocus = useCallback(function (selectType) {
9309
9454
  var _a;
9310
9455
  if (readOnly || disabled)
@@ -9451,14 +9596,16 @@ var FormYearPicker = React.forwardRef(function (_a, ref) {
9451
9596
  /********************************************************************************************************************
9452
9597
  * value
9453
9598
  * ******************************************************************************************************************/
9454
- var _m = useAutoUpdateRefState(initValue, getFinalValue$1), valueRef = _m[0], value = _m[1], setValue = _m[2];
9455
- useFirstSkipEffect(function () {
9599
+ var _m = useAutoUpdateRefState(initValue, getFinalValue$1), valueRef = _m[0], value = _m[1], _setValue = _m[2];
9600
+ var updateValue = useCallback(function (newValue) {
9601
+ var finalValue = _setValue(newValue);
9456
9602
  if (error)
9457
- validate(value);
9603
+ validate(finalValue);
9458
9604
  if (onChange)
9459
- onChange(value);
9460
- onValueChange(name, value);
9461
- }, [value]);
9605
+ onChange(finalValue);
9606
+ onValueChange(name, finalValue);
9607
+ return finalValue;
9608
+ }, [_setValue, error, name, onChange, onValueChange, validate]);
9462
9609
  /********************************************************************************************************************
9463
9610
  * Memo
9464
9611
  * ******************************************************************************************************************/
@@ -9515,9 +9662,9 @@ var FormYearPicker = React.forwardRef(function (_a, ref) {
9515
9662
  getType: function () { return 'FormYearPicker'; },
9516
9663
  getName: function () { return name; },
9517
9664
  getReset: function () { return getFinalValue$1(initValue); },
9518
- reset: function () { return setValue(initValue); },
9665
+ reset: function () { return updateValue(initValue); },
9519
9666
  getValue: function () { return valueRef.current; },
9520
- setValue: setValue,
9667
+ setValue: updateValue,
9521
9668
  getData: function () { return dataRef.current; },
9522
9669
  setData: setData,
9523
9670
  isExceptValue: function () { return !!exceptValue; },
@@ -9568,7 +9715,7 @@ var FormYearPicker = React.forwardRef(function (_a, ref) {
9568
9715
  setDisabled,
9569
9716
  setErrorErrorHelperText,
9570
9717
  setHidden,
9571
- setValue,
9718
+ updateValue,
9572
9719
  validate,
9573
9720
  valueRef,
9574
9721
  ]);
@@ -9601,20 +9748,20 @@ var FormYearPicker = React.forwardRef(function (_a, ref) {
9601
9748
  }
9602
9749
  }, []);
9603
9750
  var handleContainerChange = useCallback(function (newValue, isClick) {
9604
- setValue(newValue);
9751
+ updateValue(newValue);
9605
9752
  if (isClick)
9606
9753
  setOpen(false);
9607
9754
  nextTick(function () {
9608
9755
  onValueChangeByUser(name, newValue);
9609
9756
  });
9610
- }, [name, onValueChangeByUser, setValue]);
9757
+ }, [name, onValueChangeByUser, updateValue]);
9611
9758
  var handleInputDatePickerChange = useCallback(function (v) {
9612
9759
  var newValue = v ? dateToValue$1(v) : v;
9613
- setValue(newValue);
9760
+ updateValue(newValue);
9614
9761
  nextTick(function () {
9615
9762
  onValueChangeByUser(name, newValue);
9616
9763
  });
9617
- }, [name, onValueChangeByUser, setValue]);
9764
+ }, [name, onValueChangeByUser, updateValue]);
9618
9765
  var handleInputDatePickerFocus = useCallback(function () {
9619
9766
  if (readOnly || disabled)
9620
9767
  return;
@@ -9760,14 +9907,16 @@ var getFinalValue = function (value) {
9760
9907
  /********************************************************************************************************************
9761
9908
  * State - value
9762
9909
  * ******************************************************************************************************************/
9763
- var _u = useAutoUpdateRefState(initValue, getFinalValue), valueRef = _u[0], value = _u[1], setValue = _u[2];
9764
- useFirstSkipEffect(function () {
9910
+ var _u = useAutoUpdateRefState(initValue, getFinalValue), valueRef = _u[0], value = _u[1], _setValue = _u[2];
9911
+ var updateValue = useCallback(function (newValue) {
9912
+ var finalValue = _setValue(newValue);
9765
9913
  if (error || fromError || toError)
9766
- validate(value);
9914
+ validate(finalValue);
9767
9915
  if (onChange)
9768
- onChange(value);
9769
- onValueChange(name, value);
9770
- }, [value]);
9916
+ onChange(finalValue);
9917
+ onValueChange(name, finalValue);
9918
+ return finalValue;
9919
+ }, [_setValue, error, fromError, name, onChange, onValueChange, toError, validate]);
9771
9920
  /********************************************************************************************************************
9772
9921
  * Memo
9773
9922
  * ******************************************************************************************************************/
@@ -9814,15 +9963,15 @@ var getFinalValue = function (value) {
9814
9963
  getType: function () { return 'FormYearRangePicker'; },
9815
9964
  getName: function () { return name; },
9816
9965
  getReset: function () { return getFinalValue(initValue); },
9817
- reset: function () { return setValue(initValue); },
9966
+ reset: function () { return updateValue(initValue); },
9818
9967
  getValue: function () { return valueRef.current; },
9819
- setValue: setValue,
9968
+ setValue: updateValue,
9820
9969
  getData: function () { return dataRef.current; },
9821
9970
  setData: setData,
9822
9971
  getFromValue: function () { return valueRef.current[0]; },
9823
- setFromValue: function (value) { return setValue([value, valueRef.current[1]]); },
9972
+ setFromValue: function (value) { return updateValue([value, valueRef.current[1]]); },
9824
9973
  getToValue: function () { return valueRef.current[1]; },
9825
- setToValue: function (value) { return setValue([valueRef.current[0], value]); },
9974
+ setToValue: function (value) { return updateValue([valueRef.current[0], value]); },
9826
9975
  isExceptValue: function () { return !!exceptValue; },
9827
9976
  isDisabled: function () { return !!disabledRef.current; },
9828
9977
  setDisabled: setDisabled,
@@ -9881,7 +10030,7 @@ var getFinalValue = function (value) {
9881
10030
  setDisabled,
9882
10031
  setErrorErrorHelperText,
9883
10032
  setHidden,
9884
- setValue,
10033
+ updateValue,
9885
10034
  validate,
9886
10035
  valueRef,
9887
10036
  ]);
@@ -9889,7 +10038,7 @@ var getFinalValue = function (value) {
9889
10038
  * Event Handler
9890
10039
  * ******************************************************************************************************************/
9891
10040
  var handleContainerChange = useCallback(function (newValue, selectType) {
9892
- setValue(newValue);
10041
+ updateValue(newValue);
9893
10042
  if (selectType === 'start') {
9894
10043
  nextTick(function () {
9895
10044
  var _a;
@@ -9903,7 +10052,7 @@ var getFinalValue = function (value) {
9903
10052
  nextTick(function () {
9904
10053
  onValueChangeByUser(name, newValue);
9905
10054
  });
9906
- }, [setValue, name, onValueChangeByUser]);
10055
+ }, [updateValue, name, onValueChangeByUser]);
9907
10056
  var handleInputDatePickerChange = useCallback(function (selectType, date) {
9908
10057
  if (date == null || date.isValid()) {
9909
10058
  if (selectType === 'start') {
@@ -9919,7 +10068,7 @@ var getFinalValue = function (value) {
9919
10068
  nextTick(function () {
9920
10069
  onValueChangeByUser(name, newValue_1);
9921
10070
  });
9922
- setValue(newValue_1);
10071
+ updateValue(newValue_1);
9923
10072
  }
9924
10073
  else {
9925
10074
  var newValue_2 = [valueRef.current[0], date ? dateToValue(date) : null];
@@ -9934,10 +10083,10 @@ var getFinalValue = function (value) {
9934
10083
  nextTick(function () {
9935
10084
  onValueChangeByUser(name, newValue_2);
9936
10085
  });
9937
- setValue(newValue_2);
10086
+ updateValue(newValue_2);
9938
10087
  }
9939
10088
  }
9940
- }, [valueRef, minYear, maxYear, fromError, setValue, validate, onValueChangeByUser, name, toError]);
10089
+ }, [valueRef, minYear, maxYear, fromError, updateValue, validate, onValueChangeByUser, name, toError]);
9941
10090
  var handleInputDatePickerFocus = useCallback(function (selectType) {
9942
10091
  var _a;
9943
10092
  if (readOnly || disabled)
@@ -10078,14 +10227,16 @@ FormYearRangePicker.displayName = 'FormYearRangePicker';var FormSwitch = React.f
10078
10227
  var finalValue = value || false;
10079
10228
  return onValue ? onValue(finalValue) : finalValue;
10080
10229
  }, [onValue]);
10081
- var _j = useAutoUpdateRefState(initValue, getFinalValue), valueRef = _j[0], value = _j[1], setValue = _j[2];
10082
- useFirstSkipEffect(function () {
10230
+ var _j = useAutoUpdateRefState(initValue, getFinalValue), valueRef = _j[0], value = _j[1], _setValue = _j[2];
10231
+ var updateValue = useCallback(function (newValue) {
10232
+ var finalValue = _setValue(newValue);
10083
10233
  if (error)
10084
- validate(value);
10234
+ validate(finalValue);
10085
10235
  if (onChange)
10086
- onChange(value);
10087
- onValueChange(name, value);
10088
- }, [value]);
10236
+ onChange(finalValue);
10237
+ onValueChange(name, finalValue);
10238
+ return finalValue;
10239
+ }, [_setValue, error, name, onChange, onValueChange, validate]);
10089
10240
  /********************************************************************************************************************
10090
10241
  * Function
10091
10242
  * ******************************************************************************************************************/
@@ -10105,9 +10256,9 @@ FormYearRangePicker.displayName = 'FormYearRangePicker';var FormSwitch = React.f
10105
10256
  getType: function () { return 'FormSwitch'; },
10106
10257
  getName: function () { return name; },
10107
10258
  getReset: function () { return getFinalValue(initValue); },
10108
- reset: function () { return setValue(initValue); },
10259
+ reset: function () { return updateValue(initValue); },
10109
10260
  getValue: function () { return valueRef.current; },
10110
- setValue: setValue,
10261
+ setValue: updateValue,
10111
10262
  getData: function () { return dataRef.current; },
10112
10263
  setData: setData,
10113
10264
  isExceptValue: function () { return !!exceptValue; },
@@ -10159,7 +10310,7 @@ FormYearRangePicker.displayName = 'FormYearRangePicker';var FormSwitch = React.f
10159
10310
  setDisabled,
10160
10311
  setErrorErrorHelperText,
10161
10312
  setHidden,
10162
- setValue,
10313
+ updateValue,
10163
10314
  validate,
10164
10315
  valueRef,
10165
10316
  ]);
@@ -10171,13 +10322,13 @@ FormYearRangePicker.displayName = 'FormYearRangePicker';var FormSwitch = React.f
10171
10322
  e.preventDefault();
10172
10323
  }
10173
10324
  else {
10174
- var finalValue_1 = setValue(checked);
10325
+ var finalValue_1 = updateValue(checked);
10175
10326
  nextTick(function () {
10176
10327
  onValueChangeByUser(name, finalValue_1);
10177
10328
  onRequestSearchSubmit(name, finalValue_1);
10178
10329
  });
10179
10330
  }
10180
- }, [readOnly, setValue, onValueChangeByUser, name, onRequestSearchSubmit]);
10331
+ }, [readOnly, updateValue, onValueChangeByUser, name, onRequestSearchSubmit]);
10181
10332
  /********************************************************************************************************************
10182
10333
  * Render
10183
10334
  * ******************************************************************************************************************/