@pdg/react-form 1.0.16 → 1.0.18

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 (7) hide show
  1. package/dist/FormCommon/FormLabel/FormLabel.style.d.ts +3 -0
  2. package/dist/FormItemCustom/FormAutocomplete/FormAutocomplete.types.d.ts +2 -1
  3. package/dist/index.esm.js +667 -623
  4. package/dist/index.esm.js.map +1 -1
  5. package/dist/index.js +666 -622
  6. package/dist/index.js.map +1 -1
  7. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -106,112 +106,7 @@ function __makeTemplateObject(cooked, raw) {
106
106
  }());
107
107
  } (classnames$1));
108
108
 
109
- var classNames$1 = classnames$1.exports;function useFirstSkipEffect$1(effect, deps) {
110
- var firstRef = React.useRef(true);
111
- React.useEffect(function () {
112
- if (firstRef.current) {
113
- firstRef.current = false;
114
- }
115
- else {
116
- effect();
117
- }
118
- }, deps);
119
- }var isSame$2 = function (v1, v2) {
120
- if (v1 === v2)
121
- return true;
122
- if (typeof v1 !== typeof v2)
123
- return false;
124
- if (v1 == null || v2 == null)
125
- return false;
126
- if (Array.isArray(v1) && Array.isArray(v2)) {
127
- if (v1.length !== v2.length)
128
- return false;
129
- for (var i = 0; i < v1.length; i += 1) {
130
- if (v1[i] !== v2[i])
131
- return false;
132
- }
133
- }
134
- else {
135
- return v1 === v2;
136
- }
137
- return true;
138
- };function useAutoUpdateState$1(p1, p2) {
139
- var state = typeof p1 === 'function' ? undefined : p1;
140
- var finalStateCallback = typeof p1 === 'function' ? p1 : p2;
141
- var _a = React.useState(0), setUpdateKey = _a[1];
142
- var _initState = React.useState(function () {
143
- return finalStateCallback ? finalStateCallback(state) : state;
144
- })[0];
145
- var _state = React.useRef(_initState);
146
- var forceUpdate = React.useCallback(function () {
147
- setUpdateKey(function (updateKey) { return updateKey + 1; });
148
- }, []);
149
- useFirstSkipEffect$1(function () {
150
- var newState = finalStateCallback ? finalStateCallback(state) : state;
151
- if (!isSame$2(newState, _state.current)) {
152
- _state.current = newState;
153
- forceUpdate();
154
- }
155
- }, [state]);
156
- useFirstSkipEffect$1(function () {
157
- var newState = finalStateCallback ? finalStateCallback(_state.current) : _state.current;
158
- if (!isSame$2(newState, _state.current)) {
159
- _state.current = newState;
160
- forceUpdate();
161
- }
162
- }, [finalStateCallback]);
163
- var setState = React.useCallback(function (newState) {
164
- var finalNewState = typeof newState === 'function' ? newState(_state.current) : newState;
165
- if (!isSame$2(_state.current, finalNewState)) {
166
- _state.current = finalNewState;
167
- forceUpdate();
168
- }
169
- }, []);
170
- return [_state.current, setState];
171
- }function useFirstSkipLayoutEffect(effect, deps) {
172
- var firstRef = React.useRef(true);
173
- React.useLayoutEffect(function () {
174
- if (firstRef.current) {
175
- firstRef.current = false;
176
- }
177
- else {
178
- effect();
179
- }
180
- }, deps);
181
- }function useAutoUpdateLayoutState(p1, p2) {
182
- var state = typeof p1 === 'function' ? undefined : p1;
183
- var finalStateCallback = typeof p1 === 'function' ? p1 : p2;
184
- var _a = React.useState(0), setUpdateKey = _a[1];
185
- var _initState = React.useState(function () {
186
- return finalStateCallback ? finalStateCallback(state, 0) : state;
187
- })[0];
188
- var _state = React.useRef(_initState);
189
- var forceUpdate = React.useCallback(function () {
190
- setUpdateKey(function (updateKey) { return updateKey + 1; });
191
- }, []);
192
- useFirstSkipLayoutEffect(function () {
193
- var newState = finalStateCallback ? finalStateCallback(state) : state;
194
- if (!isSame$2(newState, _state.current)) {
195
- _state.current = newState;
196
- forceUpdate();
197
- }
198
- }, [state]);
199
- useFirstSkipLayoutEffect(function () {
200
- var newState = finalStateCallback ? finalStateCallback(_state.current) : _state.current;
201
- if (!isSame$2(newState, _state.current)) {
202
- _state.current = newState;
203
- forceUpdate();
204
- }
205
- }, [finalStateCallback]);
206
- var setState = React.useCallback(function (newState) {
207
- var finalNewState = typeof newState === 'function' ? newState(_state.current) : newState;
208
- if (!isSame$2(_state.current, finalNewState)) {
209
- _state.current = finalNewState;
210
- forceUpdate();
211
- }
212
- }, []);
213
- return [_state.current, setState];
214
- }var empty$1 = function (v) {
109
+ var classNames$1 = classnames$1.exports;var empty$1 = function (v) {
215
110
  var result = false;
216
111
  if (v == null) {
217
112
  result = true;
@@ -232,7 +127,7 @@ var classNames$1 = classnames$1.exports;function useFirstSkipEffect$1(effect, de
232
127
  var notEmpty = function (v) {
233
128
  return !empty$1(v);
234
129
  };
235
- var isSame$1 = function (v1, v2) {
130
+ var isSame$2 = function (v1, v2) {
236
131
  if (v1 === v2)
237
132
  return true;
238
133
  if (typeof v1 !== typeof v2)
@@ -587,15 +482,15 @@ function checkDateAvailable(date, availableDate, type, time) {
587
482
  //----------------------------------------------------------------------------------------------------------------
588
483
  onSubmit = _a.onSubmit, onValueChange = _a.onValueChange, onValueChangeByUser = _a.onValueChangeByUser;
589
484
  var _b = useFormState(), formId = _b.id, formVariant = _b.variant, formSize = _b.size, formColor = _b.color, formSpacing = _b.spacing, formFormColGap = _b.formColGap, formFocused = _b.focused, formLabelShrink = _b.labelShrink, formFullWidth = _b.fullWidth, formAddValueItem = _b.onAddValueItem, formRemoveValueItem = _b.onRemoveValueItem, formValueChange = _b.onValueChange, formValueChangeByUser = _b.onValueChangeByUser, otherFormState = __rest$2(_b, ["id", "variant", "size", "color", "spacing", "formColGap", "focused", "labelShrink", "fullWidth", "onAddValueItem", "onRemoveValueItem", "onValueChange", "onValueChangeByUser"]);
590
- // State - FormState -----------------------------------------------------------------------------------------------
591
- var variant = useAutoUpdateState$1(initVariant || formVariant)[0];
592
- var size = useAutoUpdateState$1(initSize || formSize)[0];
593
- var color = useAutoUpdateState$1(initColor || formColor)[0];
594
- var spacing = useAutoUpdateState$1(initSpacing == null ? formSpacing : initSpacing)[0];
595
- var formColGap = useAutoUpdateState$1(initFormColGap == null ? formFormColGap : initFormColGap)[0];
596
- var focused = useAutoUpdateState$1(initFocused || formFocused)[0];
597
- var labelShrink = useAutoUpdateState$1(initLabelShrink || formLabelShrink)[0];
598
- var fullWidth = useAutoUpdateState$1(initFullWidth == null ? formFullWidth : initFullWidth)[0];
485
+ // Memo - FormState ------------------------------------------------------------------------------------------------
486
+ var variant = React.useMemo(function () { return (initVariant == null ? formVariant : initVariant); }, [initVariant, formVariant]);
487
+ var size = React.useMemo(function () { return (initSize == null ? formSize : initSize); }, [initSize, formSize]);
488
+ var color = React.useMemo(function () { return (initColor == null ? formColor : initColor); }, [initColor, formColor]);
489
+ var spacing = React.useMemo(function () { return initSpacing || formSpacing; }, [initSpacing, formSpacing]);
490
+ var formColGap = React.useMemo(function () { return (initFormColGap == null ? formFormColGap : initFormColGap); }, [initFormColGap, formFormColGap]);
491
+ var focused = React.useMemo(function () { return (initFocused == null ? formFocused : initFocused); }, [initFocused, formFocused]);
492
+ var labelShrink = React.useMemo(function () { return (initLabelShrink == null ? formLabelShrink : initLabelShrink); }, [initLabelShrink, formLabelShrink]);
493
+ var fullWidth = React.useMemo(function () { return (initFullWidth == null ? formFullWidth : initFullWidth); }, [initFullWidth, formFullWidth]);
599
494
  // Ref -------------------------------------------------------------------------------------------------------------
600
495
  var formRef = React.useRef(null);
601
496
  // State -----------------------------------------------------------------------------------------------------------
@@ -685,7 +580,7 @@ function checkDateAvailable(date, availableDate, type, time) {
685
580
  }
686
581
  });
687
582
  return data;
688
- }, [valueItems, getItemFormValue]);
583
+ }, [valueItems, appendFormValueData]);
689
584
  // Function - submit -----------------------------------------------------------------------------------------------
690
585
  var submit = React.useCallback(function () {
691
586
  var isAllValid = true;
@@ -919,11 +814,9 @@ Form.displayName = 'Form';
919
814
  Form.defaultProps = FormDefaultProps;var FormButtonDefaultProps = {
920
815
  type: 'button',
921
816
  };var FormIconDefaultProps = {};var FormIcon = React__default["default"].forwardRef(function (_a, ref) {
922
- // State - children ------------------------------------------------------------------------------------------------
817
+ // Memo --------------------------------------------------------------------------------------------------------------
923
818
  var className = _a.className, initChildren = _a.children, props = __rest$2(_a, ["className", "children"]);
924
- var children = useAutoUpdateState$1(React.useCallback(function () {
925
- return initChildren.replace(/[A-Z]/g, function (letter, idx) { return "".concat(idx > 0 ? '_' : '').concat(letter.toLowerCase()); });
926
- }, [initChildren]))[0];
819
+ var children = React.useMemo(function () { return initChildren.replace(/[A-Z]/g, function (letter, idx) { return "".concat(idx > 0 ? '_' : '').concat(letter.toLowerCase()); }); }, [initChildren]);
927
820
  // Render ----------------------------------------------------------------------------------------------------------
928
821
  return (React__default["default"].createElement(material.Icon, __assign$4({ ref: ref }, props, { className: classNames$1('FormIcon', className) }), children));
929
822
  });
@@ -932,12 +825,12 @@ FormIcon.defaultProps = FormIconDefaultProps;var FormButton = React__default["de
932
825
  // FormState -------------------------------------------------------------------------------------------------------
933
826
  var initSize = _a.size, initColor = _a.color, initVariant = _a.variant, initFullWidth = _a.fullWidth, children = _a.children, className = _a.className, type = _a.type, icon = _a.icon, startIcon = _a.startIcon, endIcon = _a.endIcon, onClick = _a.onClick, props = __rest$2(_a, ["size", "color", "variant", "fullWidth", "children", "className", "type", "icon", "startIcon", "endIcon", "onClick"]);
934
827
  var _b = useFormState(), formSize = _b.size, formColor = _b.color, formFullWidth = _b.fullWidth;
935
- // State - FormState -----------------------------------------------------------------------------------------------
936
- var size = useAutoUpdateState$1(initSize || formSize)[0];
937
- var color = useAutoUpdateState$1(initColor || formColor)[0];
938
- var fullWidth = useAutoUpdateState$1(initFullWidth == null ? formFullWidth : initFullWidth)[0];
939
- // State - variant -------------------------------------------------------------------------------------------------
940
- var variant = useAutoUpdateState$1(React.useCallback(function () {
828
+ // Memo - FormState ------------------------------------------------------------------------------------------------
829
+ var size = React.useMemo(function () { return (initSize == null ? formSize : initSize); }, [initSize, formSize]);
830
+ var color = React.useMemo(function () { return (initColor == null ? formColor : initColor); }, [initColor, formColor]);
831
+ var fullWidth = React.useMemo(function () { return (initFullWidth == null ? formFullWidth : initFullWidth); }, [initFullWidth, formFullWidth]);
832
+ // Memo ------------------------------------------------------------------------------------------------------------
833
+ var variant = React.useMemo(function () {
941
834
  if (initVariant) {
942
835
  return initVariant;
943
836
  }
@@ -949,18 +842,23 @@ FormIcon.defaultProps = FormIconDefaultProps;var FormButton = React__default["de
949
842
  return 'outlined';
950
843
  }
951
844
  }
952
- }, [initVariant, type]))[0];
845
+ }, [initVariant, type]);
953
846
  // Render ----------------------------------------------------------------------------------------------------------
954
847
  return (React__default["default"].createElement(material.Button, __assign$4({ ref: ref, className: classNames$1(className, 'FormButton'), type: type, variant: variant, size: size, color: color, fullWidth: fullWidth, onClick: onClick, startIcon: startIcon ? React__default["default"].createElement(FormIcon, { sx: { mr: -0.5 } }, startIcon) : undefined, endIcon: endIcon ? React__default["default"].createElement(FormIcon, { sx: { ml: -0.5 } }, endIcon) : undefined }, props),
955
848
  icon && (React__default["default"].createElement(FormIcon, { fontSize: size, color: 'inherit', sx: { mr: children ? 0.5 : undefined } }, icon)),
956
849
  children));
957
850
  });
958
851
  FormButton.displayName = 'FormButton';
959
- FormButton.defaultProps = FormButtonDefaultProps;var FormLabelDefaultProps = {};var FormLabel = React__default["default"].forwardRef(function (_a, ref) {
852
+ FormButton.defaultProps = FormButtonDefaultProps;var FormLabelDefaultProps = {};var IconFormIcon = material.styled(FormIcon)(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n vertical-align: middle;\n margin-right: 3px;\n margin-top: -4px;\n margin-bottom: -2px;\n"], ["\n vertical-align: middle;\n margin-right: 3px;\n margin-top: -4px;\n margin-bottom: -2px;\n"])));
853
+ var ChildrenSpan = material.styled('span')(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n vertical-align: middle;\n"], ["\n vertical-align: middle;\n"])));
854
+ var templateObject_1$4, templateObject_2;var FormLabel = React__default["default"].forwardRef(function (_a, ref) {
855
+ // Memo --------------------------------------------------------------------------------------------------------------
960
856
  var children = _a.children, icon = _a.icon, size = _a.size, style = _a.style, props = __rest$2(_a, ["children", "icon", "size", "style"]);
961
- return (React__default["default"].createElement(material.InputLabel, __assign$4({ ref: ref, shrink: true, className: 'FormItemBase-InputLabel', size: size === 'medium' ? 'normal' : size }, props, { style: __assign$4({ height: 20, transform: size === 'small' ? 'translate(0, -1.5px) scale(0.7)' : undefined }, style) }), icon ? (React__default["default"].createElement(React__default["default"].Fragment, null,
962
- React__default["default"].createElement(FormIcon, { style: { verticalAlign: 'middle', marginRight: 3, marginTop: -4, marginBottom: -2 } }, icon),
963
- React__default["default"].createElement("span", { style: { verticalAlign: 'middle' } }, children))) : (children)));
857
+ var finalProps = React.useMemo(function () { return (__assign$4(__assign$4({ shrink: true, className: 'FormItemBase-InputLabel', size: size === 'medium' ? 'normal' : size }, props), { style: __assign$4({ height: 20, transform: size === 'small' ? 'translate(0, -1.5px) scale(0.7)' : undefined }, style) })); }, [props, size, style]);
858
+ // Render ------------------------------------------------------------------------------------------------------------
859
+ return (React__default["default"].createElement(material.InputLabel, __assign$4({ ref: ref }, finalProps), icon ? (React__default["default"].createElement(React__default["default"].Fragment, null,
860
+ React__default["default"].createElement(IconFormIcon, null, icon),
861
+ React__default["default"].createElement(ChildrenSpan, null, children))) : (children)));
964
862
  });
965
863
  FormLabel.displayName = 'FormLabel';
966
864
  FormLabel.defaultProps = FormLabelDefaultProps;var FormBlockDefaultProps = {};var FormDividerDefaultProps = {
@@ -975,26 +873,25 @@ var FormDivider = React__default["default"].forwardRef(function (_a, ref) {
975
873
  //----------------------------------------------------------------------------------------------------------------
976
874
  className = _a.className, initStyle = _a.style, sx = _a.sx;
977
875
  var formSize = useFormState().size;
978
- // State - FormState -----------------------------------------------------------------------------------------------
979
- var size = useAutoUpdateState$1(initSize || formSize)[0];
980
- // State - style ---------------------------------------------------------------------------------------------------
981
- var style = useAutoUpdateState$1(React.useCallback(function () {
876
+ // Memo - FormState ------------------------------------------------------------------------------------------------
877
+ var size = React.useMemo(function () { return (initSize == null ? formSize : initSize); }, [initSize, formSize]);
878
+ // Memo --------------------------------------------------------------------------------------------------------------
879
+ var style = React.useMemo(function () {
982
880
  if (hidden) {
983
881
  return __assign$4(__assign$4({}, initStyle), { display: 'none' });
984
882
  }
985
883
  else {
986
884
  return initStyle;
987
885
  }
988
- }, [initStyle, hidden]))[0];
989
- // State - lineStyle -----------------------------------------------------------------------------------------------
990
- var lineStyle = useAutoUpdateState$1(React.useCallback(function () {
886
+ }, [hidden, initStyle]);
887
+ var lineStyle = React.useMemo(function () {
991
888
  if (lineVerticalMargin) {
992
889
  return __assign$4(__assign$4({}, DEFAULT_LINE_STYLE), { marginTop: lineVerticalMargin, marginBottom: lineVerticalMargin });
993
890
  }
994
891
  else {
995
892
  return DEFAULT_LINE_STYLE;
996
893
  }
997
- }, [lineVerticalMargin]))[0];
894
+ }, [lineVerticalMargin]);
998
895
  // Event Handler -----------------------------------------------------------------------------------------------------
999
896
  var handleClick = React.useCallback(function () {
1000
897
  if (collapse) {
@@ -1023,7 +920,79 @@ var FormDivider = React__default["default"].forwardRef(function (_a, ref) {
1023
920
  collapse && (React__default["default"].createElement(FormIcon, { sx: { opacity: 0.6, ml: 1 } }, collapseIn ? 'KeyboardDoubleArrowUp' : 'KeyboardDoubleArrowDown')))));
1024
921
  });
1025
922
  FormDivider.displayName = 'FormDivider.';
1026
- FormDivider.defaultProps = FormDividerDefaultProps;var StyledWrapGrid$1 = material.styled(material.Grid)(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n width: 100%;\n"], ["\n width: 100%;\n"])));
923
+ FormDivider.defaultProps = FormDividerDefaultProps;function useFirstSkipEffect$1(effect, deps) {
924
+ var firstRef = React.useRef(true);
925
+ React.useEffect(function () {
926
+ if (firstRef.current) {
927
+ firstRef.current = false;
928
+ }
929
+ else {
930
+ effect();
931
+ }
932
+ }, deps);
933
+ }var isSame$1 = function (v1, v2) {
934
+ if (v1 === v2)
935
+ return true;
936
+ if (typeof v1 !== typeof v2)
937
+ return false;
938
+ if (v1 == null || v2 == null)
939
+ return false;
940
+ if (Array.isArray(v1) && Array.isArray(v2)) {
941
+ if (v1.length !== v2.length)
942
+ return false;
943
+ for (var i = 0; i < v1.length; i += 1) {
944
+ if (v1[i] !== v2[i])
945
+ return false;
946
+ }
947
+ }
948
+ else {
949
+ return v1 === v2;
950
+ }
951
+ return true;
952
+ };function useFirstSkipLayoutEffect(effect, deps) {
953
+ var firstRef = React.useRef(true);
954
+ React.useLayoutEffect(function () {
955
+ if (firstRef.current) {
956
+ firstRef.current = false;
957
+ }
958
+ else {
959
+ effect();
960
+ }
961
+ }, deps);
962
+ }function useAutoUpdateLayoutState(p1, p2) {
963
+ var state = typeof p1 === 'function' ? undefined : p1;
964
+ var finalStateCallback = typeof p1 === 'function' ? p1 : p2;
965
+ var _a = React.useState(0), setUpdateKey = _a[1];
966
+ var _initState = React.useState(function () {
967
+ return finalStateCallback ? finalStateCallback(state, 0) : state;
968
+ })[0];
969
+ var _state = React.useRef(_initState);
970
+ var forceUpdate = React.useCallback(function () {
971
+ setUpdateKey(function (updateKey) { return updateKey + 1; });
972
+ }, []);
973
+ useFirstSkipLayoutEffect(function () {
974
+ var newState = finalStateCallback ? finalStateCallback(state) : state;
975
+ if (!isSame$1(newState, _state.current)) {
976
+ _state.current = newState;
977
+ forceUpdate();
978
+ }
979
+ }, [state]);
980
+ useFirstSkipLayoutEffect(function () {
981
+ var newState = finalStateCallback ? finalStateCallback(_state.current) : _state.current;
982
+ if (!isSame$1(newState, _state.current)) {
983
+ _state.current = newState;
984
+ forceUpdate();
985
+ }
986
+ }, [finalStateCallback]);
987
+ var setState = React.useCallback(function (newState) {
988
+ var finalNewState = typeof newState === 'function' ? newState(_state.current) : newState;
989
+ if (!isSame$1(_state.current, finalNewState)) {
990
+ _state.current = finalNewState;
991
+ forceUpdate();
992
+ }
993
+ }, []);
994
+ return [_state.current, setState];
995
+ }var StyledWrapGrid$1 = material.styled(material.Grid)(templateObject_1$2 || (templateObject_1$2 = __makeTemplateObject(["\n width: 100%;\n"], ["\n width: 100%;\n"])));
1027
996
  var templateObject_1$2;var FormBlock = React__default["default"].forwardRef(function (_a, ref) {
1028
997
  // FormState -------------------------------------------------------------------------------------------------------
1029
998
  var initVariant = _a.variant, initSize = _a.size, initColor = _a.color, initSpacing = _a.spacing, initFocused = _a.focused, initLabelShrink = _a.labelShrink, initFullWidth = _a.fullWidth,
@@ -1034,29 +1003,29 @@ var templateObject_1$2;var FormBlock = React__default["default"].forwardRef(func
1034
1003
  //----------------------------------------------------------------------------------------------------------------
1035
1004
  children = _a.children, className = _a.className, initStyle = _a.style, sx = _a.sx;
1036
1005
  var _b = useFormState(), formVariant = _b.variant, formSize = _b.size, formColor = _b.color, formSpacing = _b.spacing, formFocused = _b.focused, formLabelShrink = _b.labelShrink, formFullWidth = _b.fullWidth, otherFormState = __rest$2(_b, ["variant", "size", "color", "spacing", "focused", "labelShrink", "fullWidth"]);
1037
- // State - FormState -----------------------------------------------------------------------------------------------
1038
- var variant = useAutoUpdateState$1(initVariant || formVariant)[0];
1039
- var size = useAutoUpdateState$1(initSize || formSize)[0];
1040
- var color = useAutoUpdateState$1(initColor || formColor)[0];
1041
- var spacing = useAutoUpdateState$1(initSpacing == null ? formSpacing : initSpacing)[0];
1042
- var focused = useAutoUpdateState$1(initFocused || formFocused)[0];
1043
- var labelShrink = useAutoUpdateState$1(initLabelShrink || formLabelShrink)[0];
1044
- var fullWidth = useAutoUpdateState$1(initFullWidth == null ? formFullWidth : initFullWidth)[0];
1006
+ // Memo - FormState ------------------------------------------------------------------------------------------------
1007
+ var variant = React.useMemo(function () { return (initVariant == null ? formVariant : initVariant); }, [initVariant, formVariant]);
1008
+ var size = React.useMemo(function () { return (initSize == null ? formSize : initSize); }, [initSize, formSize]);
1009
+ var color = React.useMemo(function () { return (initColor == null ? formColor : initColor); }, [initColor, formColor]);
1010
+ var spacing = React.useMemo(function () { return initSpacing || formSpacing; }, [initSpacing, formSpacing]);
1011
+ var focused = React.useMemo(function () { return (initFocused == null ? formFocused : initFocused); }, [initFocused, formFocused]);
1012
+ var labelShrink = React.useMemo(function () { return (initLabelShrink == null ? formLabelShrink : initLabelShrink); }, [initLabelShrink, formLabelShrink]);
1013
+ var fullWidth = React.useMemo(function () { return (initFullWidth == null ? formFullWidth : initFullWidth); }, [initFullWidth, formFullWidth]);
1045
1014
  // State -------------------------------------------------------------------------------------------------------------
1046
- var _c = React.useState(initCollapseIn), collapseIn = _c[0], setCollapseIn = _c[1];
1047
- // State - style ---------------------------------------------------------------------------------------------------
1048
- var style = useAutoUpdateState$1(React.useCallback(function () {
1015
+ var _c = useAutoUpdateLayoutState(initCollapseIn), collapseIn = _c[0], setCollapseIn = _c[1];
1016
+ // Memo --------------------------------------------------------------------------------------------------------------
1017
+ var style = React.useMemo(function () {
1049
1018
  if (hidden) {
1050
1019
  return __assign$4(__assign$4({}, initStyle), { display: 'none' });
1051
1020
  }
1052
1021
  else {
1053
1022
  return initStyle;
1054
1023
  }
1055
- }, [initStyle, hidden]))[0];
1024
+ }, [hidden, initStyle]);
1056
1025
  // Effect ------------------------------------------------------------------------------------------------------------
1057
1026
  React.useEffect(function () {
1058
1027
  setCollapseIn(initCollapseIn);
1059
- }, [initCollapseIn]);
1028
+ }, [initCollapseIn, setCollapseIn]);
1060
1029
  // Memo --------------------------------------------------------------------------------------------------------------
1061
1030
  var Container = React.useMemo(function () {
1062
1031
  return collapse ? material.Collapse : React__default["default"].Fragment;
@@ -1087,25 +1056,25 @@ var templateObject_1$1;var FormRow = React__default["default"].forwardRef(functi
1087
1056
  //----------------------------------------------------------------------------------------------------------------
1088
1057
  children = _a.children, className = _a.className, initStyle = _a.style, sx = _a.sx;
1089
1058
  var _b = useFormState(), formVariant = _b.variant, formSize = _b.size, formColor = _b.color, formSpacing = _b.spacing, formFocused = _b.focused, formLabelShrink = _b.labelShrink, formFullWidth = _b.fullWidth, otherFormState = __rest$2(_b, ["variant", "size", "color", "spacing", "focused", "labelShrink", "fullWidth"]);
1090
- // State - FormState -----------------------------------------------------------------------------------------------
1091
- var variant = useAutoUpdateState$1(initVariant || formVariant)[0];
1092
- var size = useAutoUpdateState$1(initSize || formSize)[0];
1093
- var color = useAutoUpdateState$1(initColor || formColor)[0];
1094
- var spacing = useAutoUpdateState$1(initSpacing == null ? formSpacing : initSpacing)[0];
1095
- var focused = useAutoUpdateState$1(initFocused || formFocused)[0];
1096
- var labelShrink = useAutoUpdateState$1(initLabelShrink || formLabelShrink)[0];
1097
- var fullWidth = useAutoUpdateState$1(initFullWidth == null ? formFullWidth : initFullWidth)[0];
1059
+ // Memo - FormState ------------------------------------------------------------------------------------------------
1060
+ var variant = React.useMemo(function () { return (initVariant == null ? formVariant : initVariant); }, [initVariant, formVariant]);
1061
+ var size = React.useMemo(function () { return (initSize == null ? formSize : initSize); }, [initSize, formSize]);
1062
+ var color = React.useMemo(function () { return (initColor == null ? formColor : initColor); }, [initColor, formColor]);
1063
+ var spacing = React.useMemo(function () { return initSpacing || formSpacing; }, [initSpacing, formSpacing]);
1064
+ var focused = React.useMemo(function () { return (initFocused == null ? formFocused : initFocused); }, [initFocused, formFocused]);
1065
+ var labelShrink = React.useMemo(function () { return (initLabelShrink == null ? formLabelShrink : initLabelShrink); }, [initLabelShrink, formLabelShrink]);
1066
+ var fullWidth = React.useMemo(function () { return (initFullWidth == null ? formFullWidth : initFullWidth); }, [initFullWidth, formFullWidth]);
1098
1067
  // State -----------------------------------------------------------------------------------------------------------
1099
1068
  var formCols = React.useState({})[0];
1100
1069
  var _c = React.useState(12), formColAutoXs = _c[0], setFormColAutoXs = _c[1];
1101
- // State - style ---------------------------------------------------------------------------------------------------
1102
- var style = useAutoUpdateState$1(React.useCallback(function () {
1070
+ // Memo --------------------------------------------------------------------------------------------------------------
1071
+ var style = React.useMemo(function () {
1103
1072
  var style = __assign$4({ width: '100%' }, initStyle);
1104
1073
  if (hidden) {
1105
1074
  style.display = 'none';
1106
1075
  }
1107
1076
  return style;
1108
- }, [initStyle, hidden]))[0];
1077
+ }, [hidden, initStyle]);
1109
1078
  // Function - makeFormColXs ----------------------------------------------------------------------------------------
1110
1079
  var makeFormColXs = React.useCallback(function () {
1111
1080
  var formColKeys = Object.keys(formCols);
@@ -1119,16 +1088,16 @@ var templateObject_1$1;var FormRow = React__default["default"].forwardRef(functi
1119
1088
  }
1120
1089
  });
1121
1090
  setFormColAutoXs(autoXsCount === 0 ? autoXs : autoXs / autoXsCount);
1122
- }, []);
1091
+ }, [formCols]);
1123
1092
  // Event Handler ---------------------------------------------------------------------------------------------------
1124
1093
  var handleAddFormCol = React.useCallback(function (id, xs) {
1125
1094
  formCols[id] = xs;
1126
1095
  makeFormColXs();
1127
- }, []);
1096
+ }, [formCols, makeFormColXs]);
1128
1097
  var handleRemoveFormCol = React.useCallback(function (id) {
1129
1098
  delete formCols[id];
1130
1099
  makeFormColXs();
1131
- }, []);
1100
+ }, [formCols, makeFormColXs]);
1132
1101
  //------------------------------------------------------------------------------------------------------------------
1133
1102
  return (React__default["default"].createElement(FormContext.Provider, { value: __assign$4({ variant: variant, size: size, color: color, spacing: spacing, focused: focused, labelShrink: labelShrink, fullWidth: fullWidth, formColAutoXs: formColAutoXs, onAddFormCol: handleAddFormCol, onRemoveFormCol: handleRemoveFormCol }, otherFormState) },
1134
1103
  React__default["default"].createElement(material.Grid, { item: true, ref: ref, xs: 12, className: classNames$1(className, 'FormRow'), style: style, sx: sx },
@@ -1996,20 +1965,20 @@ function useResizeDetector(props) {
1996
1965
  var id = React.useId();
1997
1966
  // FormState -------------------------------------------------------------------------------------------------------
1998
1967
  var _b = useFormState(), formVariant = _b.variant, formSize = _b.size, formColor = _b.color, formSpacing = _b.spacing, formFormColGap = _b.formColGap, formFocused = _b.focused, formLabelShrink = _b.labelShrink, formFullWidth = _b.fullWidth, formColAutoXs = _b.formColAutoXs, onAddFormCol = _b.onAddFormCol, onRemoveFormCol = _b.onRemoveFormCol, otherFormState = __rest$2(_b, ["variant", "size", "color", "spacing", "formColGap", "focused", "labelShrink", "fullWidth", "formColAutoXs", "onAddFormCol", "onRemoveFormCol"]);
1999
- // State - FormState -----------------------------------------------------------------------------------------------
2000
- var variant = useAutoUpdateState$1(initVariant || formVariant)[0];
2001
- var size = useAutoUpdateState$1(initSize || formSize)[0];
2002
- var color = useAutoUpdateState$1(initColor || formColor)[0];
2003
- var spacing = useAutoUpdateState$1(initSpacing == null ? formSpacing : initSpacing)[0];
2004
- var focused = useAutoUpdateState$1(initFocused || formFocused)[0];
2005
- var labelShrink = useAutoUpdateState$1(initLabelShrink || formLabelShrink)[0];
2006
- var fullWidth = useAutoUpdateState$1(initFullWidth == null ? formFullWidth : initFullWidth)[0];
2007
- // State - Gap -----------------------------------------------------------------------------------------------------
2008
- var gap = useAutoUpdateState$1(initGap == null ? formFormColGap : initGap)[0];
1968
+ // Memo - FormState ------------------------------------------------------------------------------------------------
1969
+ var variant = React.useMemo(function () { return (initVariant == null ? formVariant : initVariant); }, [initVariant, formVariant]);
1970
+ var size = React.useMemo(function () { return (initSize == null ? formSize : initSize); }, [initSize, formSize]);
1971
+ var color = React.useMemo(function () { return (initColor == null ? formColor : initColor); }, [initColor, formColor]);
1972
+ var spacing = React.useMemo(function () { return initSpacing || formSpacing; }, [initSpacing, formSpacing]);
1973
+ var focused = React.useMemo(function () { return (initFocused == null ? formFocused : initFocused); }, [initFocused, formFocused]);
1974
+ var labelShrink = React.useMemo(function () { return (initLabelShrink == null ? formLabelShrink : initLabelShrink); }, [initLabelShrink, formLabelShrink]);
1975
+ var fullWidth = React.useMemo(function () { return (initFullWidth == null ? formFullWidth : initFullWidth); }, [initFullWidth, formFullWidth]);
1976
+ // Memo --------------------------------------------------------------------------------------------------------------
1977
+ var gap = React.useMemo(function () { return (initGap == null ? formFormColGap : initGap); }, [formFormColGap, initGap]);
2009
1978
  // ResizeDetector --------------------------------------------------------------------------------------------------
2010
1979
  var _c = useResizeDetector(), formColWidth = _c.width, resizeDetectorRef = _c.ref;
2011
1980
  // State - style ---------------------------------------------------------------------------------------------------
2012
- var style = useAutoUpdateState$1(React.useCallback(function () {
1981
+ var style = useAutoUpdateLayoutState(React.useCallback(function () {
2013
1982
  if (hidden) {
2014
1983
  return __assign$4(__assign$4({}, initStyle), { display: 'none' });
2015
1984
  }
@@ -2025,6 +1994,7 @@ function useResizeDetector(props) {
2025
1994
  if (onRemoveFormCol)
2026
1995
  onRemoveFormCol(id);
2027
1996
  };
1997
+ // eslint-disable-next-line react-hooks/exhaustive-deps
2028
1998
  }, [xs]);
2029
1999
  // Effect ----------------------------------------------------------------------------------------------------------
2030
2000
  React.useEffect(function () {
@@ -2036,6 +2006,7 @@ function useResizeDetector(props) {
2036
2006
  ref.current = resizeDetectorRef.current;
2037
2007
  }
2038
2008
  }
2009
+ // eslint-disable-next-line react-hooks/exhaustive-deps
2039
2010
  }, []);
2040
2011
  // Render ----------------------------------------------------------------------------------------------------------
2041
2012
  return (React__default["default"].createElement(FormContextProvider, { value: __assign$4({ variant: variant, size: size, color: color, spacing: spacing, focused: focused, labelShrink: labelShrink, fullWidth: fullWidth, formColXs: xs || formColAutoXs || 12, formColWidth: formColWidth, formColWithLabel: !!label, formColWithHelperText: !!helperText }, otherFormState) },
@@ -2093,29 +2064,29 @@ styleInject(css_248z$j);var FormTextField = React__default["default"].forwardRef
2093
2064
  var inputRef = React.useRef(null);
2094
2065
  // FormState -------------------------------------------------------------------------------------------------------
2095
2066
  var _c = useFormState(), formVariant = _c.variant, formSize = _c.size, formColor = _c.color, formFocused = _c.focused, formLabelShrink = _c.labelShrink, formFullWidth = _c.fullWidth, formColWithHelperText = _c.formColWithHelperText, onAddValueItem = _c.onAddValueItem, onRemoveValueItem = _c.onRemoveValueItem, onValueChange = _c.onValueChange, onValueChangeByUser = _c.onValueChangeByUser, onRequestSearchSubmit = _c.onRequestSearchSubmit;
2096
- // State - FormState -----------------------------------------------------------------------------------------------
2097
- var variant = useAutoUpdateState$1(initVariant || formVariant)[0];
2098
- var size = useAutoUpdateState$1(initSize || formSize)[0];
2099
- var color = useAutoUpdateState$1(initColor || formColor)[0];
2100
- var focused = useAutoUpdateState$1(initFocused || formFocused)[0];
2101
- var labelShrink = useAutoUpdateState$1(initLabelShrink || formLabelShrink)[0];
2102
- var fullWidth = useAutoUpdateState$1(initFullWidth == null ? formFullWidth : initFullWidth)[0];
2067
+ // Memo - FormState ------------------------------------------------------------------------------------------------
2068
+ var variant = React.useMemo(function () { return (initVariant == null ? formVariant : initVariant); }, [initVariant, formVariant]);
2069
+ var size = React.useMemo(function () { return (initSize == null ? formSize : initSize); }, [initSize, formSize]);
2070
+ var color = React.useMemo(function () { return (initColor == null ? formColor : initColor); }, [initColor, formColor]);
2071
+ var focused = React.useMemo(function () { return (initFocused == null ? formFocused : initFocused); }, [initFocused, formFocused]);
2072
+ var labelShrink = React.useMemo(function () { return (initLabelShrink == null ? formLabelShrink : initLabelShrink); }, [initLabelShrink, formLabelShrink]);
2073
+ var fullWidth = React.useMemo(function () { return (initFullWidth == null ? formFullWidth : initFullWidth); }, [initFullWidth, formFullWidth]);
2103
2074
  // State -----------------------------------------------------------------------------------------------------------
2104
- var _d = useAutoUpdateState$1(initError), error = _d[0], setError = _d[1];
2105
- var _e = useAutoUpdateState$1(initHelperText), helperText = _e[0], setHelperText = _e[1];
2075
+ var _d = useAutoUpdateLayoutState(initError), error = _d[0], setError = _d[1];
2076
+ var _e = useAutoUpdateLayoutState(initHelperText), helperText = _e[0], setHelperText = _e[1];
2106
2077
  var _f = React.useState(false), showClear = _f[0], setShowClear = _f[1];
2107
- var _g = useAutoUpdateState$1(initDisabled), disabled = _g[0], setDisabled = _g[1];
2108
- // State - muiInputLabelProps --------------------------------------------------------------------------------------
2109
- var muiInputLabelProps = useAutoUpdateState$1(React.useCallback(function () {
2078
+ var _g = useAutoUpdateLayoutState(initDisabled), disabled = _g[0], setDisabled = _g[1];
2079
+ // Memo - muiInputLabelProps ---------------------------------------------------------------------------------------
2080
+ var muiInputLabelProps = React.useMemo(function () {
2110
2081
  if (labelShrink || placeholder) {
2111
2082
  return __assign$4(__assign$4({}, initMuiInputLabelProps), { shrink: true });
2112
2083
  }
2113
2084
  else {
2114
2085
  return initMuiInputLabelProps;
2115
2086
  }
2116
- }, [initMuiInputLabelProps, labelShrink, placeholder]))[0];
2117
- // State - inputProps ----------------------------------------------------------------------------------------------
2118
- var inputProps = useAutoUpdateState$1(React.useCallback(function () {
2087
+ }, [initMuiInputLabelProps, labelShrink, placeholder]);
2088
+ // Memo - inputProps -----------------------------------------------------------------------------------------------
2089
+ var inputProps = React.useMemo(function () {
2119
2090
  if (readOnly != null || maxLength != null) {
2120
2091
  var finalInputProps = __assign$4(__assign$4({}, initInputProps), { readOnly: readOnly, maxLength: maxLength });
2121
2092
  if (readOnly) {
@@ -2126,30 +2097,31 @@ styleInject(css_248z$j);var FormTextField = React__default["default"].forwardRef
2126
2097
  else {
2127
2098
  return initInputProps;
2128
2099
  }
2129
- }, [initInputProps, readOnly, maxLength]))[0];
2130
- // State - style ---------------------------------------------------------------------------------------------------
2131
- var style = useAutoUpdateState$1(React.useCallback(function () {
2100
+ }, [initInputProps, readOnly, maxLength]);
2101
+ // Memo - style ----------------------------------------------------------------------------------------------------
2102
+ var style = React.useMemo(function () {
2132
2103
  if (width != null) {
2133
2104
  return __assign$4(__assign$4({}, initStyle), { width: width });
2134
2105
  }
2135
2106
  else {
2136
2107
  return initStyle;
2137
2108
  }
2138
- }, [initStyle, width]))[0];
2139
- // State - label ---------------------------------------------------------------------------------------------------
2140
- var label = useAutoUpdateState$1(React.useCallback(function () {
2109
+ }, [initStyle, width]);
2110
+ // Memo - label ----------------------------------------------------------------------------------------------------
2111
+ var label = React.useMemo(function () {
2141
2112
  return labelIcon ? (React__default["default"].createElement(React__default["default"].Fragment, null,
2142
2113
  React__default["default"].createElement(FormIcon, { style: { verticalAlign: 'middle', marginRight: 4 } }, labelIcon),
2143
2114
  React__default["default"].createElement("span", { style: { verticalAlign: 'middle' } }, initLabel))) : (initLabel);
2144
- }, [initLabel, labelIcon]))[0];
2115
+ }, [initLabel, labelIcon]);
2145
2116
  // Function - getFinalValue ----------------------------------------------------------------------------------------
2146
2117
  var getFinalValue = React.useCallback(function (value) {
2147
2118
  return onValue ? onValue(value) : value;
2148
2119
  }, [onValue]);
2149
2120
  // State - value ---------------------------------------------------------------------------------------------------
2150
- var _h = useAutoUpdateState$1(initValue, getFinalValue), value = _h[0], setValue = _h[1];
2121
+ var _h = useAutoUpdateLayoutState(initValue, getFinalValue), value = _h[0], setValue = _h[1];
2151
2122
  React.useEffect(function () {
2152
2123
  setShowClear(clear ? notEmpty(value) : false);
2124
+ // eslint-disable-next-line react-hooks/exhaustive-deps
2153
2125
  }, [value]);
2154
2126
  useFirstSkipEffect$1(function () {
2155
2127
  if (error)
@@ -2170,6 +2142,11 @@ styleInject(css_248z$j);var FormTextField = React__default["default"].forwardRef
2170
2142
  (_b = inputRef.current) === null || _b === void 0 ? void 0 : _b.focus();
2171
2143
  }
2172
2144
  }, [initInputRef, inputRef]);
2145
+ // Function - setErrorHelperText -----------------------------------------------------------------------------------
2146
+ var setErrorHelperText = React.useCallback(function (error, helperText) {
2147
+ setError(error);
2148
+ setHelperText(helperText);
2149
+ }, [setError, setHelperText]);
2173
2150
  // Function - validate ---------------------------------------------------------------------------------------------
2174
2151
  var validate = React.useCallback(function (value) {
2175
2152
  if (required && empty$1(value)) {
@@ -2197,14 +2174,9 @@ styleInject(css_248z$j);var FormTextField = React__default["default"].forwardRef
2197
2174
  }
2198
2175
  setErrorHelperText(false, initHelperText);
2199
2176
  return true;
2200
- }, [required, validPattern, invalidPattern, onValidate, initHelperText]);
2201
- // Function - setErrorHelperText -----------------------------------------------------------------------------------
2202
- var setErrorHelperText = React.useCallback(function (error, helperText) {
2203
- setError(error);
2204
- setHelperText(helperText);
2205
- }, []);
2206
- // State - muiInputProps -------------------------------------------------------------------------------------------
2207
- var muiInputProps = useAutoUpdateState$1(React.useCallback(function () {
2177
+ }, [required, validPattern, invalidPattern, onValidate, setErrorHelperText, initHelperText]);
2178
+ // Memo - muiInputProps --------------------------------------------------------------------------------------------
2179
+ var muiInputProps = React.useMemo(function () {
2208
2180
  var muiInputProps = __assign$4({}, initMuiInputProps);
2209
2181
  if (startAdornment || icon || muiInputProps.startAdornment) {
2210
2182
  muiInputProps.startAdornment = (React__default["default"].createElement(React__default["default"].Fragment, null,
@@ -2233,21 +2205,22 @@ styleInject(css_248z$j);var FormTextField = React__default["default"].forwardRef
2233
2205
  }
2234
2206
  return muiInputProps;
2235
2207
  }, [
2236
- initMuiInputProps,
2237
- icon,
2238
- getFinalValue,
2239
- startAdornment,
2240
- endAdornment,
2241
2208
  clear,
2242
- readOnly,
2243
2209
  disabled,
2244
- showClear,
2210
+ endAdornment,
2245
2211
  focus,
2212
+ getFinalValue,
2213
+ icon,
2214
+ initMuiInputProps,
2246
2215
  name,
2247
2216
  noFormValueItem,
2248
- onValueChangeByUser,
2249
2217
  onRequestSearchSubmit,
2250
- ]))[0];
2218
+ onValueChangeByUser,
2219
+ readOnly,
2220
+ setValue,
2221
+ showClear,
2222
+ startAdornment,
2223
+ ]);
2251
2224
  // Effect ----------------------------------------------------------------------------------------------------------
2252
2225
  React.useEffect(function () {
2253
2226
  if (value !== initValue) {
@@ -2255,6 +2228,7 @@ styleInject(css_248z$j);var FormTextField = React__default["default"].forwardRef
2255
2228
  onChange(value);
2256
2229
  onValueChange(name, value);
2257
2230
  }
2231
+ // eslint-disable-next-line react-hooks/exhaustive-deps
2258
2232
  }, []);
2259
2233
  // Commands --------------------------------------------------------------------------------------------------------
2260
2234
  React.useLayoutEffect(function () {
@@ -2323,6 +2297,11 @@ styleInject(css_248z$j);var FormTextField = React__default["default"].forwardRef
2323
2297
  noFormValueItem,
2324
2298
  onAddValueItem,
2325
2299
  onRemoveValueItem,
2300
+ id,
2301
+ setValue,
2302
+ setDisabled,
2303
+ setErrorHelperText,
2304
+ initHelperText,
2326
2305
  ]);
2327
2306
  // Event Handler ---------------------------------------------------------------------------------------------------
2328
2307
  var handleChange = React.useCallback(function (e) {
@@ -2336,7 +2315,7 @@ styleInject(css_248z$j);var FormTextField = React__default["default"].forwardRef
2336
2315
  }
2337
2316
  });
2338
2317
  }
2339
- }, [name, getFinalValue, select, noFormValueItem, onValueChangeByUser, onRequestSearchSubmit]);
2318
+ }, [getFinalValue, setValue, noFormValueItem, onValueChangeByUser, name, select, onRequestSearchSubmit]);
2340
2319
  var handleBlur = React.useCallback(function (e) {
2341
2320
  if (error)
2342
2321
  validate(value);
@@ -2351,7 +2330,7 @@ styleInject(css_248z$j);var FormTextField = React__default["default"].forwardRef
2351
2330
  }
2352
2331
  if (onKeyDown)
2353
2332
  onKeyDown(e);
2354
- }, [select, multiline, name, value, noFormValueItem, onRequestSearchSubmit]);
2333
+ }, [select, multiline, noFormValueItem, onKeyDown, onRequestSearchSubmit, name, value]);
2355
2334
  // Render ----------------------------------------------------------------------------------------------------------
2356
2335
  return (React__default["default"].createElement(material.TextField, __assign$4({}, props, { variant: variant, size: size, color: color, focused: focused || undefined, name: name, label: label, placeholder: placeholder, className: classNames$1(className, 'FormValueItem', 'FormTextField', "variant-".concat(variant)), inputRef: initInputRef ? initInputRef : inputRef, value: value, required: required, fullWidth: !width && fullWidth, error: error, helperText: formColWithHelperText ? undefined : helperText, FormHelperTextProps: { component: 'div' }, disabled: disabled, InputProps: muiInputProps, InputLabelProps: muiInputLabelProps, inputProps: ((_b = initInputProps === null || initInputProps === void 0 ? void 0 : initInputProps.className) === null || _b === void 0 ? void 0 : _b.includes('FormTag-Input')) ? initInputProps : inputProps, style: style, select: select, SelectProps: SelectProps, multiline: multiline, onChange: handleChange, onBlur: handleBlur, onKeyDown: handleKeyDown })));
2357
2336
  });
@@ -2382,7 +2361,7 @@ styleInject(css_248z$h);var FormTag = React__default["default"].forwardRef(funct
2382
2361
  var className = _a.className, name = _a.name, initValue = _a.value, exceptValue = _a.exceptValue, required = _a.required, readOnly = _a.readOnly, maxLength = _a.maxLength, disabled = _a.disabled, initFullWidth = _a.fullWidth, initError = _a.error, initHelperText = _a.helperText, formValueSeparator = _a.formValueSeparator, formValueSort = _a.formValueSort, onValidate = _a.onValidate, onKeyDown = _a.onKeyDown, onChange = _a.onChange, onValue = _a.onValue, onBlur = _a.onBlur, props = __rest$2(_a, ["className", "name", "value", "exceptValue", "required", "readOnly", "maxLength", "disabled", "fullWidth", "error", "helperText", "formValueSeparator", "formValueSort", "onValidate", "onKeyDown", "onChange", "onValue", "onBlur"]);
2383
2362
  var _b = useFormState(), formFullWidth = _b.fullWidth, onAddValueItem = _b.onAddValueItem, onValueChange = _b.onValueChange, onValueChangeByUser = _b.onValueChangeByUser, onRequestSearchSubmit = _b.onRequestSearchSubmit, otherFormState = __rest$2(_b, ["fullWidth", "onAddValueItem", "onValueChange", "onValueChangeByUser", "onRequestSearchSubmit"]);
2384
2363
  // State - FormState -----------------------------------------------------------------------------------------------
2385
- var fullWidth = useAutoUpdateState$1(initFullWidth == null ? formFullWidth : initFullWidth)[0];
2364
+ var fullWidth = useAutoUpdateLayoutState(initFullWidth == null ? formFullWidth : initFullWidth)[0];
2386
2365
  // Function - getFinalValue ----------------------------------------------------------------------------------------
2387
2366
  var getFinalValue = React.useCallback(function (value) {
2388
2367
  var finalValue;
@@ -2400,7 +2379,7 @@ styleInject(css_248z$h);var FormTag = React__default["default"].forwardRef(funct
2400
2379
  var _c = React.useState(function () {
2401
2380
  return new Set(getFinalValue(initValue));
2402
2381
  }), valueSet = _c[0], setValueSet = _c[1];
2403
- var _d = useAutoUpdateState$1(initValue, getFinalValue), value = _d[0], setValue = _d[1];
2382
+ var _d = useAutoUpdateLayoutState(initValue, getFinalValue), value = _d[0], setValue = _d[1];
2404
2383
  useFirstSkipEffect$1(function () {
2405
2384
  if (error)
2406
2385
  validate(value);
@@ -2410,16 +2389,22 @@ styleInject(css_248z$h);var FormTag = React__default["default"].forwardRef(funct
2410
2389
  }, [value]);
2411
2390
  //------------------------------------------------------------------------------------------------------------------
2412
2391
  var _e = React.useState(''), inputValue = _e[0], setInputValue = _e[1];
2413
- var _f = useAutoUpdateState$1(initError), error = _f[0], setError = _f[1];
2414
- var _g = useAutoUpdateState$1(initHelperText), helperText = _g[0], setHelperText = _g[1];
2392
+ var _f = useAutoUpdateLayoutState(initError), error = _f[0], setError = _f[1];
2393
+ var _g = useAutoUpdateLayoutState(initHelperText), helperText = _g[0], setHelperText = _g[1];
2415
2394
  // Effect ----------------------------------------------------------------------------------------------------------
2416
2395
  React.useEffect(function () {
2417
- if (!isSame$1(value, initValue)) {
2396
+ if (!isSame$2(value, initValue)) {
2418
2397
  if (onChange)
2419
2398
  onChange(value);
2420
2399
  onValueChange(name, value);
2421
2400
  }
2401
+ // eslint-disable-next-line react-hooks/exhaustive-deps
2422
2402
  }, []);
2403
+ // Function - setErrorHelperText -----------------------------------------------------------------------------------
2404
+ var setErrorHelperText = React.useCallback(function (error, helperText) {
2405
+ setError(error);
2406
+ setHelperText(helperText);
2407
+ }, [setError, setHelperText]);
2423
2408
  // Function - validate ---------------------------------------------------------------------------------------------
2424
2409
  var validate = React.useCallback(function (value) {
2425
2410
  if (required && empty$1(value)) {
@@ -2435,12 +2420,7 @@ styleInject(css_248z$h);var FormTag = React__default["default"].forwardRef(funct
2435
2420
  }
2436
2421
  setErrorHelperText(false, initHelperText);
2437
2422
  return true;
2438
- }, [required, onValidate, initHelperText]);
2439
- // Function - setErrorHelperText -----------------------------------------------------------------------------------
2440
- var setErrorHelperText = React.useCallback(function (error, helperText) {
2441
- setError(error);
2442
- setHelperText(helperText);
2443
- }, []);
2423
+ }, [required, onValidate, setErrorHelperText, initHelperText]);
2444
2424
  // Function - getExtraCommands -------------------------------------------------------------------------------------
2445
2425
  var getExtraCommands = React.useCallback(function () {
2446
2426
  return {
@@ -2456,13 +2436,13 @@ styleInject(css_248z$h);var FormTag = React__default["default"].forwardRef(funct
2456
2436
  setValue(lastValue);
2457
2437
  }, getValue: function () { return lastValue; }, setValue: function (newValue) {
2458
2438
  var finalValue = getFinalValue(newValue);
2459
- if (!isSame$1(lastValue, finalValue)) {
2439
+ if (!isSame$2(lastValue, finalValue)) {
2460
2440
  lastValue = finalValue;
2461
2441
  setValueSet(new Set(lastValue));
2462
2442
  setValue(lastValue);
2463
2443
  }
2464
2444
  }, validate: function () { return validate(value); } }), getExtraCommands());
2465
- }, [initValue, value, getFinalValue, validate, getExtraCommands]);
2445
+ }, [value, getExtraCommands, getFinalValue, initValue, setValue, validate]);
2466
2446
  // Function - appendTag, removeTag ---------------------------------------------------------------------------------
2467
2447
  var appendTag = React.useCallback(function (tag) {
2468
2448
  if (valueSet.has(tag)) {
@@ -2479,7 +2459,7 @@ styleInject(css_248z$h);var FormTag = React__default["default"].forwardRef(funct
2479
2459
  onRequestSearchSubmit(name, finalValue_1);
2480
2460
  });
2481
2461
  }
2482
- }, [valueSet, name, getFinalValue, onValueChangeByUser, onRequestSearchSubmit]);
2462
+ }, [valueSet, getFinalValue, setValue, onValueChangeByUser, name, onRequestSearchSubmit]);
2483
2463
  var removeTag = React.useCallback(function (tag) {
2484
2464
  if (valueSet.has(tag)) {
2485
2465
  valueSet.delete(tag);
@@ -2490,7 +2470,7 @@ styleInject(css_248z$h);var FormTag = React__default["default"].forwardRef(funct
2490
2470
  onRequestSearchSubmit(name, finalValue_2);
2491
2471
  });
2492
2472
  }
2493
- }, [valueSet, name, getFinalValue, onValueChangeByUser, onRequestSearchSubmit]);
2473
+ }, [valueSet, getFinalValue, setValue, onValueChangeByUser, name, onRequestSearchSubmit]);
2494
2474
  // Event Handler ---------------------------------------------------------------------------------------------------
2495
2475
  var handleAddValueItem = React.useCallback(function (id, commands) {
2496
2476
  onAddValueItem(id, getCommands(commands));
@@ -2528,7 +2508,7 @@ styleInject(css_248z$h);var FormTag = React__default["default"].forwardRef(funct
2528
2508
  }
2529
2509
  if (onBlur)
2530
2510
  onBlur(e);
2531
- }, [inputValue, onBlur]);
2511
+ }, [appendTag, inputValue, onBlur]);
2532
2512
  var handleRenderTags = React.useCallback(function (tags) {
2533
2513
  return tags.map(function (tag) { return (React__default["default"].createElement(material.Chip, { className: 'MuiAutocomplete-tag', key: tag, label: tag, size: 'small', disabled: disabled, onDelete: readOnly || disabled ? undefined : function () { return removeTag(tag); } })); });
2534
2514
  }, [disabled, readOnly, removeTag]);
@@ -2573,8 +2553,8 @@ var FormPassword = React__default["default"].forwardRef(function (_a, ref) {
2573
2553
  var className = _a.className, initMuiInputProps = _a.InputProps, eye = _a.eye, onChange = _a.onChange, props = __rest$2(_a, ["className", "InputProps", "eye", "onChange"]);
2574
2554
  var _b = React.useState('password'), type = _b[0], setType = _b[1];
2575
2555
  var _c = React.useState(notEmpty(props.value)), showEye = _c[0], setShowEye = _c[1];
2576
- // State - muiInputProps -------------------------------------------------------------------------------------------
2577
- var muiInputProps = useAutoUpdateState$1(React.useCallback(function () {
2556
+ // Memo --------------------------------------------------------------------------------------------------------------
2557
+ var muiInputProps = React.useMemo(function () {
2578
2558
  if (eye) {
2579
2559
  var newProps = __assign$4({}, initMuiInputProps);
2580
2560
  newProps.endAdornment = (React__default["default"].createElement(React__default["default"].Fragment, null,
@@ -2589,7 +2569,7 @@ var FormPassword = React__default["default"].forwardRef(function (_a, ref) {
2589
2569
  else {
2590
2570
  return initMuiInputProps;
2591
2571
  }
2592
- }, [initMuiInputProps, type, eye, showEye]))[0];
2572
+ }, [eye, initMuiInputProps, showEye, type]);
2593
2573
  // Event Handler ---------------------------------------------------------------------------------------------------
2594
2574
  var handleChange = React.useCallback(function (value) {
2595
2575
  setShowEye(notEmpty(value));
@@ -4075,9 +4055,9 @@ NumberFormat.defaultProps = defaultProps;var NumberFormatCustom = React__default
4075
4055
  } })));
4076
4056
  });
4077
4057
  NumberFormatCustom.displayName = 'NumberFormatCustom';var FormNumberDefaultProps = __assign$4({}, FormTextDefaultProps);var FormNumber = React__default["default"].forwardRef(function (_a, ref) {
4078
- // State - muiInputProps -------------------------------------------------------------------------------------------
4058
+ // Memo --------------------------------------------------------------------------------------------------------------
4079
4059
  var className = _a.className, allowLeadingZeros = _a.allowLeadingZeros, allowNegative = _a.allowNegative, thousandSeparator = _a.thousandSeparator, allowDecimal = _a.allowDecimal, decimalScale = _a.decimalScale, prefix = _a.prefix, suffix = _a.suffix, readOnly = _a.readOnly, initMuiInputProps = _a.InputProps, props = __rest$2(_a, ["className", "allowLeadingZeros", "allowNegative", "thousandSeparator", "allowDecimal", "decimalScale", "prefix", "suffix", "readOnly", "InputProps"]);
4080
- var muiInputProps = useAutoUpdateState$1(React.useCallback(function () {
4060
+ var muiInputProps = React.useMemo(function () {
4081
4061
  var inputProps = {
4082
4062
  allowLeadingZeros: allowLeadingZeros,
4083
4063
  allowNegative: allowNegative,
@@ -4095,7 +4075,17 @@ NumberFormatCustom.displayName = 'NumberFormatCustom';var FormNumberDefaultProps
4095
4075
  inputProps.decimalScale = 0;
4096
4076
  }
4097
4077
  return __assign$4(__assign$4({}, initMuiInputProps), { inputComponent: NumberFormatCustom, inputProps: inputProps });
4098
- }, [initMuiInputProps, allowLeadingZeros, allowNegative, thousandSeparator, allowDecimal, decimalScale]))[0];
4078
+ }, [
4079
+ allowDecimal,
4080
+ allowLeadingZeros,
4081
+ allowNegative,
4082
+ decimalScale,
4083
+ initMuiInputProps,
4084
+ prefix,
4085
+ readOnly,
4086
+ suffix,
4087
+ thousandSeparator,
4088
+ ]);
4099
4089
  // Render ----------------------------------------------------------------------------------------------------------
4100
4090
  return React__default["default"].createElement(FormText, __assign$4({ ref: ref, className: classNames$1(className, 'FormNumber'), InputProps: muiInputProps }, props));
4101
4091
  });
@@ -4122,16 +4112,16 @@ styleInject(css_248z$d);var FormSelect = React__default["default"].forwardRef(fu
4122
4112
  // FormState -------------------------------------------------------------------------------------------------------
4123
4113
  var className = _a.className, name = _a.name, initItems = _a.items, initFullWidth = _a.fullWidth, onLoadItems = _a.onLoadItems, readOnly = _a.readOnly, multiple = _a.multiple, checkbox = _a.checkbox, placeholder = _a.placeholder, initStartAdornment = _a.startAdornment, initValue = _a.value, initInputLabelProps = _a.InputLabelProps, initSelectProps = _a.SelectProps, formValueSeparator = _a.formValueSeparator, formValueSort = _a.formValueSort, width = _a.width, minWidth = _a.minWidth, initLoading = _a.loading, onChange = _a.onChange, onValue = _a.onValue, props = __rest$2(_a, ["className", "name", "items", "fullWidth", "onLoadItems", "readOnly", "multiple", "checkbox", "placeholder", "startAdornment", "value", "InputLabelProps", "SelectProps", "formValueSeparator", "formValueSort", "width", "minWidth", "loading", "onChange", "onValue"]);
4124
4114
  var _b = useFormState(), formFullWidth = _b.fullWidth, onAddValueItem = _b.onAddValueItem, onValueChange = _b.onValueChange, otherFormState = __rest$2(_b, ["fullWidth", "onAddValueItem", "onValueChange"]);
4125
- // State - FormState -----------------------------------------------------------------------------------------------
4126
- var fullWidth = useAutoUpdateState$1(initFullWidth == null ? formFullWidth : initFullWidth)[0];
4115
+ // Memo - FormState ------------------------------------------------------------------------------------------------
4116
+ var fullWidth = React.useMemo(function () { return (initFullWidth == null ? formFullWidth : initFullWidth); }, [initFullWidth, formFullWidth]);
4127
4117
  // State -----------------------------------------------------------------------------------------------------------
4128
4118
  var emptyValue = React.useState([])[0];
4129
4119
  var _c = React.useState({}), itemValueLabels = _c[0], setItemValueLabels = _c[1];
4130
4120
  var _d = React.useState(false), hasEmptyValue = _d[0], setHasEmptyValue = _d[1];
4131
4121
  var _e = React.useState(false), isOnGetItemLoading = _e[0], setIsOnGetItemLoading = _e[1];
4132
4122
  var _f = React.useState(initLoading), loading = _f[0], setLoading = _f[1];
4133
- // State - startAdornment ------------------------------------------------------------------------------------------
4134
- var startAdornment = useAutoUpdateState$1(React.useCallback(function () {
4123
+ // Memo --------------------------------------------------------------------------------------------------------------
4124
+ var startAdornment = React.useMemo(function () {
4135
4125
  if (isOnGetItemLoading || loading) {
4136
4126
  return (React__default["default"].createElement(React__default["default"].Fragment, null,
4137
4127
  initStartAdornment,
@@ -4140,9 +4130,9 @@ styleInject(css_248z$d);var FormSelect = React__default["default"].forwardRef(fu
4140
4130
  else {
4141
4131
  return initStartAdornment;
4142
4132
  }
4143
- }, [initStartAdornment, isOnGetItemLoading, loading]))[0];
4133
+ }, [initStartAdornment, isOnGetItemLoading, loading]);
4144
4134
  // State - items ---------------------------------------------------------------------------------------------------
4145
- var _g = useAutoUpdateState$1(initItems), items = _g[0], setItems = _g[1];
4135
+ var _g = useAutoUpdateLayoutState(initItems), items = _g[0], setItems = _g[1];
4146
4136
  React.useEffect(function () {
4147
4137
  if (items) {
4148
4138
  setItemValueLabels(items.reduce(function (res, item) {
@@ -4159,8 +4149,8 @@ styleInject(css_248z$d);var FormSelect = React__default["default"].forwardRef(fu
4159
4149
  setHasEmptyValue(false);
4160
4150
  }
4161
4151
  }, [items]);
4162
- // State - itemsValues ---------------------------------------------------------------------------------------------
4163
- var itemsValues = useAutoUpdateState$1(React.useCallback(function () {
4152
+ // Memo --------------------------------------------------------------------------------------------------------------
4153
+ var itemsValues = React.useMemo(function () {
4164
4154
  if (items) {
4165
4155
  return items.reduce(function (res, _a) {
4166
4156
  var value = _a.value;
@@ -4171,9 +4161,9 @@ styleInject(css_248z$d);var FormSelect = React__default["default"].forwardRef(fu
4171
4161
  else {
4172
4162
  return {};
4173
4163
  }
4174
- }, [items]))[0];
4164
+ }, [items]);
4175
4165
  // State - inputLabelProps -----------------------------------------------------------------------------------------
4176
- var inputLabelProps = useAutoUpdateState$1(React.useCallback(function () {
4166
+ var inputLabelProps = useAutoUpdateLayoutState(React.useCallback(function () {
4177
4167
  if (hasEmptyValue || (!hasEmptyValue && placeholder)) {
4178
4168
  return __assign$4(__assign$4({}, initInputLabelProps), { shrink: true });
4179
4169
  }
@@ -4230,19 +4220,19 @@ styleInject(css_248z$d);var FormSelect = React__default["default"].forwardRef(fu
4230
4220
  return onValue ? onValue(finalValue) : finalValue;
4231
4221
  }, [multiple, formValueSeparator, itemsValues, onValue]);
4232
4222
  // State - value ---------------------------------------------------------------------------------------------------
4233
- var _h = useAutoUpdateState$1(initValue, getFinalValue), value = _h[0], setValue = _h[1];
4223
+ var _h = useAutoUpdateLayoutState(initValue, getFinalValue), value = _h[0], setValue = _h[1];
4234
4224
  useFirstSkipEffect$1(function () {
4235
4225
  if (onChange)
4236
4226
  onChange(value);
4237
4227
  onValueChange(name, value);
4238
4228
  }, [value]);
4239
4229
  // State - isSelectedPlaceholder -----------------------------------------------------------------------------------
4240
- var isSelectedPlaceholder = useAutoUpdateState$1(React.useCallback(function () {
4230
+ var isSelectedPlaceholder = useAutoUpdateLayoutState(React.useCallback(function () {
4241
4231
  return notEmpty(items) && empty$1(value) && !!placeholder && !hasEmptyValue;
4242
4232
  }, [items, value, placeholder, hasEmptyValue]))[0];
4243
4233
  // Effect ----------------------------------------------------------------------------------------------------------
4244
4234
  React.useEffect(function () {
4245
- if (!isSame$1(value, initValue)) {
4235
+ if (!isSame$2(value, initValue)) {
4246
4236
  if (onChange)
4247
4237
  onChange(value);
4248
4238
  onValueChange(name, value);
@@ -4254,9 +4244,10 @@ styleInject(css_248z$d);var FormSelect = React__default["default"].forwardRef(fu
4254
4244
  setIsOnGetItemLoading(false);
4255
4245
  });
4256
4246
  }
4247
+ // eslint-disable-next-line react-hooks/exhaustive-deps
4257
4248
  }, []);
4258
- // State - selectProps ---------------------------------------------------------------------------------------------
4259
- var selectProps = useAutoUpdateState$1(React.useCallback(function () {
4249
+ // Memo --------------------------------------------------------------------------------------------------------------
4250
+ var selectProps = React.useMemo(function () {
4260
4251
  var _a;
4261
4252
  var finalSelectProps = __assign$4(__assign$4({}, initSelectProps), { displayEmpty: true, multiple: !!multiple });
4262
4253
  if (multiple) {
@@ -4282,16 +4273,7 @@ styleInject(css_248z$d);var FormSelect = React__default["default"].forwardRef(fu
4282
4273
  }
4283
4274
  finalSelectProps.MenuProps = __assign$4(__assign$4({}, finalSelectProps.MenuProps), { className: classNames$1((_a = finalSelectProps.MenuProps) === null || _a === void 0 ? void 0 : _a.className, 'FormSelect-Menu-Popover') });
4284
4275
  return finalSelectProps;
4285
- }, [
4286
- initSelectProps,
4287
- multiple,
4288
- itemValueLabels,
4289
- minWidth,
4290
- width,
4291
- hasEmptyValue,
4292
- placeholder,
4293
- isSelectedPlaceholder,
4294
- ]))[0];
4276
+ }, [initSelectProps, isSelectedPlaceholder, itemValueLabels, minWidth, multiple, placeholder, width]);
4295
4277
  // Function - getExtraCommands -------------------------------------------------------------------------------------
4296
4278
  var getBaseCommands = React.useCallback(function () {
4297
4279
  var lastValue = value;
@@ -4307,7 +4289,7 @@ styleInject(css_248z$d);var FormSelect = React__default["default"].forwardRef(fu
4307
4289
  setValue(lastValue);
4308
4290
  },
4309
4291
  };
4310
- }, [value, initValue, getFinalValue]);
4292
+ }, [value, getFinalValue, initValue, setValue]);
4311
4293
  var getExtraCommands = React.useCallback(function () {
4312
4294
  var lastItems = items;
4313
4295
  var lastLoading = loading;
@@ -4326,7 +4308,7 @@ styleInject(css_248z$d);var FormSelect = React__default["default"].forwardRef(fu
4326
4308
  setLoading(lastLoading);
4327
4309
  },
4328
4310
  };
4329
- }, [items, loading, formValueSeparator, formValueSort, multiple]);
4311
+ }, [items, loading, formValueSeparator, formValueSort, setItems, multiple]);
4330
4312
  // Event Handler ---------------------------------------------------------------------------------------------------
4331
4313
  var handleRef = React.useCallback(function (commands) {
4332
4314
  if (ref) {
@@ -4383,13 +4365,13 @@ styleInject(css_248z$c);var FormItemBase = React__default["default"].forwardRef(
4383
4365
  //----------------------------------------------------------------------------------------------------------------
4384
4366
  className = _a.className, style = _a.style, sx = _a.sx;
4385
4367
  var _b = useFormState(), formVariant = _b.variant, formSize = _b.size, formColor = _b.color, formFullWidth = _b.fullWidth, formColWithLabel = _b.formColWithLabel, formColWithHelperText = _b.formColWithHelperText;
4386
- // State - FormState -----------------------------------------------------------------------------------------------
4387
- var variant = useAutoUpdateState$1(initVariant || formVariant)[0];
4388
- var size = useAutoUpdateState$1(initSize || formSize)[0];
4389
- var color = useAutoUpdateState$1(initColor || formColor)[0];
4390
- var fullWidth = useAutoUpdateState$1(initFullWidth == null ? formFullWidth : initFullWidth)[0];
4391
- // State - wrapStyle -----------------------------------------------------------------------------------------------
4392
- var wrapStyle = useAutoUpdateState$1(React.useCallback(function () {
4368
+ // Memo - FormState ------------------------------------------------------------------------------------------------
4369
+ var variant = React.useMemo(function () { return (initVariant == null ? formVariant : initVariant); }, [initVariant, formVariant]);
4370
+ var size = React.useMemo(function () { return (initSize == null ? formSize : initSize); }, [initSize, formSize]);
4371
+ var color = React.useMemo(function () { return (initColor == null ? formColor : initColor); }, [initColor, formColor]);
4372
+ var fullWidth = React.useMemo(function () { return (initFullWidth == null ? formFullWidth : initFullWidth); }, [initFullWidth, formFullWidth]);
4373
+ // Memo --------------------------------------------------------------------------------------------------------------
4374
+ var wrapStyle = React.useMemo(function () {
4393
4375
  var wrapStyle = {
4394
4376
  display: fullWidth ? 'block' : 'inline-flex',
4395
4377
  width: fullWidth ? '100%' : undefined,
@@ -4398,7 +4380,7 @@ styleInject(css_248z$c);var FormItemBase = React__default["default"].forwardRef(
4398
4380
  wrapStyle.marginTop = -20;
4399
4381
  }
4400
4382
  return wrapStyle;
4401
- }, [formColWithLabel]))[0];
4383
+ }, [formColWithLabel, fullWidth]);
4402
4384
  // State - inputHeight ---------------------------------------------------------------------------------------------
4403
4385
  var _c = React.useState(0), inputHeight = _c[0], setInputHeight = _c[1];
4404
4386
  var inputResizeDetectorRef = useResizeDetector({
@@ -4417,8 +4399,8 @@ styleInject(css_248z$c);var FormItemBase = React__default["default"].forwardRef(
4417
4399
  setRealControlHeight(realControlResizeDetectorRef.current.getBoundingClientRect().height);
4418
4400
  },
4419
4401
  }).ref;
4420
- // State - bottomMargin --------------------------------------------------------------------------------------------
4421
- var bottomMargin = useAutoUpdateState$1(React.useCallback(function () {
4402
+ // Memo ------------------------------------------------------------------------------------------------------------
4403
+ var bottomMargin = React.useMemo(function () {
4422
4404
  var realHeight = realControlHeight || 0;
4423
4405
  var height = controlHeight || 0;
4424
4406
  var checkInputHeight = variant === 'standard' ? inputHeight + 16 : inputHeight;
@@ -4432,9 +4414,8 @@ styleInject(css_248z$c);var FormItemBase = React__default["default"].forwardRef(
4432
4414
  }
4433
4415
  }
4434
4416
  return bottomMargin;
4435
- }, [variant, realControlHeight, controlHeight, inputHeight, label, formColWithLabel]))[0];
4436
- // State - controlMarginTop ----------------------------------------------------------------------------------------
4437
- var controlMarginTop = useAutoUpdateState$1(React.useCallback(function () {
4417
+ }, [variant, realControlHeight, controlHeight, inputHeight]);
4418
+ var controlMarginTop = React.useMemo(function () {
4438
4419
  var topMargin = 0;
4439
4420
  if (inputHeight && controlHeight && controlVerticalCenter) {
4440
4421
  topMargin = inputHeight / 2 - controlHeight / 2;
@@ -4462,7 +4443,7 @@ styleInject(css_248z$c);var FormItemBase = React__default["default"].forwardRef(
4462
4443
  break;
4463
4444
  }
4464
4445
  return controlMarginTop;
4465
- }, [inputHeight, controlHeight, controlVerticalCenter, size, label, formColWithLabel]))[0];
4446
+ }, [controlHeight, controlVerticalCenter, formColWithLabel, inputHeight, label, size, variant]);
4466
4447
  // Render ----------------------------------------------------------------------------------------------------------
4467
4448
  return (React__default["default"].createElement("div", { style: wrapStyle },
4468
4449
  React__default["default"].createElement(material.FormControl, { ref: ref, variant: 'standard', className: classNames$1(className, 'FormItemBase', !!label && 'with-label', "variant-".concat(variant), controlVerticalCenter && 'control-vertical-center', !!error && 'error'), style: style, color: color, error: error, focused: focused, sx: sx },
@@ -4491,25 +4472,25 @@ FormItemBase.displayName = 'FormItemBase';var FormCheckbox = React__default["def
4491
4472
  var id = React.useId();
4492
4473
  // FormState -------------------------------------------------------------------------------------------------------
4493
4474
  var _b = useFormState(), formVariant = _b.variant, formSize = _b.size, formColor = _b.color, formFocused = _b.focused, formFullWidth = _b.fullWidth, onAddValueItem = _b.onAddValueItem, onRemoveValueItem = _b.onRemoveValueItem, onValueChange = _b.onValueChange, onValueChangeByUser = _b.onValueChangeByUser, onRequestSearchSubmit = _b.onRequestSearchSubmit;
4494
- // State - FormState ------------------------------------------------------------------------------------------------------------------
4495
- var variant = useAutoUpdateState$1(initVariant || formVariant)[0];
4496
- var size = useAutoUpdateState$1(initSize || formSize)[0];
4497
- var color = useAutoUpdateState$1(initColor || formColor)[0];
4498
- var focused = useAutoUpdateState$1(initFocused || formFocused)[0];
4499
- var fullWidth = useAutoUpdateState$1(initFullWidth == null ? formFullWidth : initFullWidth)[0];
4475
+ // Memo - FormState ------------------------------------------------------------------------------------------------
4476
+ var variant = React.useMemo(function () { return (initVariant == null ? formVariant : initVariant); }, [initVariant, formVariant]);
4477
+ var size = React.useMemo(function () { return (initSize == null ? formSize : initSize); }, [initSize, formSize]);
4478
+ var color = React.useMemo(function () { return (initColor == null ? formColor : initColor); }, [initColor, formColor]);
4479
+ var focused = React.useMemo(function () { return (initFocused == null ? formFocused : initFocused); }, [initFocused, formFocused]);
4480
+ var fullWidth = React.useMemo(function () { return (initFullWidth == null ? formFullWidth : initFullWidth); }, [initFullWidth, formFullWidth]);
4500
4481
  // Ref -------------------------------------------------------------------------------------------------------------
4501
4482
  var inputRef = React.useRef(null);
4502
4483
  var actionRef = React.useRef(null);
4503
4484
  // ResizeDetector --------------------------------------------------------------------------------------------------
4504
4485
  var _c = useResizeDetector(), width = _c.width, height = _c.height, resizeDetectorRef = _c.ref;
4505
4486
  // State -----------------------------------------------------------------------------------------------------------
4506
- var _d = useAutoUpdateState$1(initValue), value = _d[0], setValue = _d[1];
4507
- var _e = useAutoUpdateState$1(initUncheckedValue), uncheckedValue = _e[0], setUncheckedValue = _e[1];
4508
- var _f = useAutoUpdateState$1(initError), error = _f[0], setError = _f[1];
4509
- var _g = useAutoUpdateState$1(initHelperText), helperText = _g[0], setHelperText = _g[1];
4510
- var _h = useAutoUpdateState$1(initDisabled), disabled = _h[0], setDisabled = _h[1];
4487
+ var _d = useAutoUpdateLayoutState(initValue), value = _d[0], setValue = _d[1];
4488
+ var _e = useAutoUpdateLayoutState(initUncheckedValue), uncheckedValue = _e[0], setUncheckedValue = _e[1];
4489
+ var _f = useAutoUpdateLayoutState(initError), error = _f[0], setError = _f[1];
4490
+ var _g = useAutoUpdateLayoutState(initHelperText), helperText = _g[0], setHelperText = _g[1];
4491
+ var _h = useAutoUpdateLayoutState(initDisabled), disabled = _h[0], setDisabled = _h[1];
4511
4492
  // State - checked -------------------------------------------------------------------------------------------------
4512
- var _j = useAutoUpdateState$1(initChecked), checked = _j[0], setChecked = _j[1];
4493
+ var _j = useAutoUpdateLayoutState(initChecked), checked = _j[0], setChecked = _j[1];
4513
4494
  useFirstSkipEffect$1(function () {
4514
4495
  if (error)
4515
4496
  validate(checked);
@@ -4517,10 +4498,8 @@ FormItemBase.displayName = 'FormItemBase';var FormCheckbox = React__default["def
4517
4498
  onChange(!!checked);
4518
4499
  onValueChange(name, !!checked);
4519
4500
  }, [checked]);
4520
- // State - style ---------------------------------------------------------------------------------------------------
4521
- var style = useAutoUpdateState$1(React.useCallback(function () {
4522
- return __assign$4({ width: fullWidth ? '100%' : width || 100, paddingLeft: 3 }, initStyle);
4523
- }, [initStyle, fullWidth, width]))[0];
4501
+ // Memo --------------------------------------------------------------------------------------------------------------
4502
+ var style = React.useMemo(function () { return (__assign$4({ width: fullWidth ? '100%' : width || 100, paddingLeft: 3 }, initStyle)); }, [initStyle, fullWidth, width]);
4524
4503
  // Function - focus ------------------------------------------------------------------------------------------------
4525
4504
  var focus = React.useCallback(function () {
4526
4505
  var _a, _b, _c, _d;
@@ -4537,6 +4516,11 @@ FormItemBase.displayName = 'FormItemBase';var FormCheckbox = React__default["def
4537
4516
  (_d = actionRef.current) === null || _d === void 0 ? void 0 : _d.focusVisible();
4538
4517
  }
4539
4518
  }, [initInputRef, inputRef, initAction, actionRef]);
4519
+ // Function - setErrorHelperText -----------------------------------------------------------------------------------
4520
+ var setErrorHelperText = React.useCallback(function (error, helperText) {
4521
+ setError(error);
4522
+ setHelperText(helperText);
4523
+ }, [setError, setHelperText]);
4540
4524
  // Function - validate ---------------------------------------------------------------------------------------------
4541
4525
  var validate = React.useCallback(function (checked) {
4542
4526
  if (onValidate) {
@@ -4548,12 +4532,7 @@ FormItemBase.displayName = 'FormItemBase';var FormCheckbox = React__default["def
4548
4532
  }
4549
4533
  setErrorHelperText(false, initHelperText);
4550
4534
  return true;
4551
- }, [onValidate, initHelperText]);
4552
- // Function - setErrorHelperText -----------------------------------------------------------------------------------
4553
- var setErrorHelperText = React.useCallback(function (error, helperText) {
4554
- setError(error);
4555
- setHelperText(helperText);
4556
- }, []);
4535
+ }, [onValidate, setErrorHelperText, initHelperText]);
4557
4536
  // Commands --------------------------------------------------------------------------------------------------------
4558
4537
  React.useLayoutEffect(function () {
4559
4538
  var lastChecked = checked;
@@ -4630,6 +4609,12 @@ FormItemBase.displayName = 'FormItemBase';var FormCheckbox = React__default["def
4630
4609
  disabled,
4631
4610
  validate,
4632
4611
  initHelperText,
4612
+ id,
4613
+ setChecked,
4614
+ setValue,
4615
+ setUncheckedValue,
4616
+ setDisabled,
4617
+ setErrorHelperText,
4633
4618
  ]);
4634
4619
  // Event Handler ---------------------------------------------------------------------------------------------------
4635
4620
  var handleChange = React.useCallback(function (e, checked) {
@@ -4643,7 +4628,7 @@ FormItemBase.displayName = 'FormItemBase';var FormCheckbox = React__default["def
4643
4628
  onRequestSearchSubmit(name, checked);
4644
4629
  });
4645
4630
  }
4646
- }, [readOnly, name, onValueChangeByUser, onRequestSearchSubmit]);
4631
+ }, [readOnly, setChecked, onValueChangeByUser, name, onRequestSearchSubmit]);
4647
4632
  // Render ----------------------------------------------------------------------------------------------------------
4648
4633
  return (React__default["default"].createElement(FormItemBase, { variant: variant, size: size, color: color, focused: focused, className: classNames$1(className, 'FormValueItem', 'FormCheckbox'), labelIcon: labelIcon, label: label, error: error, fullWidth: fullWidth, helperText: helperText, helperTextProps: { style: { marginLeft: 2 } }, style: style, sx: sx, controlHeight: height || (size === 'small' ? 35 : 39), controlVerticalCenter: true, control: React__default["default"].createElement(material.FormControlLabel, { ref: resizeDetectorRef, control: React__default["default"].createElement(material.Checkbox, __assign$4({ name: name, color: color, size: size, inputRef: initInputRef ? initInputRef : inputRef, action: initAction ? initAction : actionRef, checked: !!checked, checkedIcon: React__default["default"].createElement(iconsMaterial.CheckBox, { color: error ? 'error' : undefined }), icon: React__default["default"].createElement(iconsMaterial.CheckBoxOutlineBlank, { color: error ? 'error' : undefined }), onChange: handleChange, disabled: disabled || readOnly }, props)), label: React__default["default"].createElement(material.Typography, { color: error ? 'error' : undefined, whiteSpace: 'nowrap' }, text) }) }));
4649
4634
  });
@@ -4663,25 +4648,26 @@ var FormRadioGroup = React__default["default"].forwardRef(function (_a, ref) {
4663
4648
  var id = React.useId();
4664
4649
  // FormState -------------------------------------------------------------------------------------------------------
4665
4650
  var _b = useFormState(), formVariant = _b.variant, formSize = _b.size, formColor = _b.color, formFocused = _b.focused, formFullWidth = _b.fullWidth, onAddValueItem = _b.onAddValueItem, onRemoveValueItem = _b.onRemoveValueItem, onValueChange = _b.onValueChange, onValueChangeByUser = _b.onValueChangeByUser, onRequestSearchSubmit = _b.onRequestSearchSubmit;
4651
+ // Memo - FormState ------------------------------------------------------------------------------------------------
4652
+ var variant = React.useMemo(function () { return (initVariant == null ? formVariant : initVariant); }, [initVariant, formVariant]);
4653
+ var size = React.useMemo(function () { return (initSize == null ? formSize : initSize); }, [initSize, formSize]);
4654
+ var color = React.useMemo(function () { return (initColor == null ? formColor : initColor); }, [initColor, formColor]);
4655
+ var focused = React.useMemo(function () { return (initFocused == null ? formFocused : initFocused); }, [initFocused, formFocused]);
4666
4656
  // State - FormState -----------------------------------------------------------------------------------------------
4667
- var variant = useAutoUpdateState$1(initVariant || formVariant)[0];
4668
- var size = useAutoUpdateState$1(initSize || formSize)[0];
4669
- var color = useAutoUpdateState$1(initColor || formColor)[0];
4670
- var focused = useAutoUpdateState$1(initFocused || formFocused)[0];
4671
- var _c = useAutoUpdateState$1(initFullWidth == null ? formFullWidth : initFullWidth), fullWidth = _c[0], setFullWidth = _c[1];
4657
+ var _c = useAutoUpdateLayoutState(initFullWidth == null ? formFullWidth : initFullWidth), fullWidth = _c[0], setFullWidth = _c[1];
4672
4658
  // Theme -----------------------------------------------------------------------------------------------------------
4673
4659
  var theme = material.useTheme();
4674
4660
  // Ref -------------------------------------------------------------------------------------------------------------
4675
4661
  var baseRef = React.useRef(null);
4676
4662
  var firstInputRef = React.useRef(null);
4677
4663
  // State -----------------------------------------------------------------------------------------------------------
4678
- var _d = useAutoUpdateState$1(initItems), items = _d[0], setItems = _d[1];
4679
- var _e = useAutoUpdateState$1(initError), error = _e[0], setError = _e[1];
4680
- var _f = useAutoUpdateState$1(initHelperText), helperText = _f[0], setHelperText = _f[1];
4681
- var _g = useAutoUpdateState$1(initDisabled), disabled = _g[0], setDisabled = _g[1];
4664
+ var _d = useAutoUpdateLayoutState(initItems), items = _d[0], setItems = _d[1];
4665
+ var _e = useAutoUpdateLayoutState(initError), error = _e[0], setError = _e[1];
4666
+ var _f = useAutoUpdateLayoutState(initHelperText), helperText = _f[0], setHelperText = _f[1];
4667
+ var _g = useAutoUpdateLayoutState(initDisabled), disabled = _g[0], setDisabled = _g[1];
4682
4668
  var _h = React.useState(false), isOnGetItemLoading = _h[0], setIsOnGetItemLoading = _h[1];
4683
- var _j = useAutoUpdateState$1(initLoading), loading = _j[0], setLoading = _j[1];
4684
- var _k = useAutoUpdateState$1(initWidth || '100%'), width = _k[0], setWidth = _k[1];
4669
+ var _j = useAutoUpdateLayoutState(initLoading), loading = _j[0], setLoading = _j[1];
4670
+ var _k = useAutoUpdateLayoutState(initWidth || '100%'), width = _k[0], setWidth = _k[1];
4685
4671
  var _l = React.useState(), formColWrapRect = _l[0], setFormColWrapRect = _l[1];
4686
4672
  // State - radioGroupNoWrapRect (ResizeDetector) -------------------------------------------------------------------
4687
4673
  var _m = React.useState(), radioGroupNoWrapRect = _m[0], setRadioGroupNoWrapRect = _m[1];
@@ -4700,7 +4686,7 @@ var FormRadioGroup = React__default["default"].forwardRef(function (_a, ref) {
4700
4686
  return onValue ? onValue(value) : value;
4701
4687
  }, [onValue]);
4702
4688
  // State - value ---------------------------------------------------------------------------------------------------
4703
- var _p = useAutoUpdateState$1(initValue, getFinalValue), value = _p[0], setValue = _p[1];
4689
+ var _p = useAutoUpdateLayoutState(initValue, getFinalValue), value = _p[0], setValue = _p[1];
4704
4690
  useFirstSkipEffect$1(function () {
4705
4691
  if (error)
4706
4692
  validate(value);
@@ -4709,10 +4695,8 @@ var FormRadioGroup = React__default["default"].forwardRef(function (_a, ref) {
4709
4695
  if (onValueChange)
4710
4696
  onValueChange(name, value);
4711
4697
  }, [value]);
4712
- // State - style ---------------------------------------------------------------------------------------------------
4713
- var style = useAutoUpdateState$1(React.useCallback(function () {
4714
- return __assign$4({ width: width, paddingLeft: PADDING_LEFT }, initStyle);
4715
- }, [initStyle, width]))[0];
4698
+ // Memo --------------------------------------------------------------------------------------------------------------
4699
+ var style = React.useMemo(function () { return (__assign$4({ width: width, paddingLeft: PADDING_LEFT }, initStyle)); }, [initStyle, width]);
4716
4700
  // Effect ----------------------------------------------------------------------------------------------------------
4717
4701
  React.useEffect(function () {
4718
4702
  if (value !== initValue) {
@@ -4721,6 +4705,7 @@ var FormRadioGroup = React__default["default"].forwardRef(function (_a, ref) {
4721
4705
  if (onValueChange)
4722
4706
  onValueChange(name, value);
4723
4707
  }
4708
+ // eslint-disable-next-line react-hooks/exhaustive-deps
4724
4709
  }, []);
4725
4710
  React.useEffect(function () {
4726
4711
  if (!fullWidth || initWidth) {
@@ -4750,6 +4735,7 @@ var FormRadioGroup = React__default["default"].forwardRef(function (_a, ref) {
4750
4735
  };
4751
4736
  }
4752
4737
  }
4738
+ // eslint-disable-next-line react-hooks/exhaustive-deps
4753
4739
  }, [fullWidth, initWidth]);
4754
4740
  React.useEffect(function () {
4755
4741
  var width;
@@ -4774,12 +4760,18 @@ var FormRadioGroup = React__default["default"].forwardRef(function (_a, ref) {
4774
4760
  }
4775
4761
  setWidth(width);
4776
4762
  setFullWidth(fullWidth);
4763
+ // eslint-disable-next-line react-hooks/exhaustive-deps
4777
4764
  }, [initWidth, formFullWidth, initFullWidth, formColWrapRect, radioGroupNoWrapRect]);
4778
4765
  // Function - focus ------------------------------------------------------------------------------------------------
4779
4766
  var focus = React.useCallback(function () {
4780
4767
  var _a;
4781
4768
  (_a = firstInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
4782
4769
  }, []);
4770
+ // Function - setErrorHelperText -----------------------------------------------------------------------------------
4771
+ var setErrorHelperText = React.useCallback(function (error, helperText) {
4772
+ setError(error);
4773
+ setHelperText(helperText);
4774
+ }, [setError, setHelperText]);
4783
4775
  // Function - validate ---------------------------------------------------------------------------------------------
4784
4776
  var validate = React.useCallback(function (value) {
4785
4777
  if (required && empty$1(value)) {
@@ -4795,12 +4787,7 @@ var FormRadioGroup = React__default["default"].forwardRef(function (_a, ref) {
4795
4787
  }
4796
4788
  setErrorHelperText(false, initHelperText);
4797
4789
  return true;
4798
- }, [required, onValidate, initHelperText]);
4799
- // Function - setErrorHelperText -----------------------------------------------------------------------------------
4800
- var setErrorHelperText = React.useCallback(function (error, helperText) {
4801
- setError(error);
4802
- setHelperText(helperText);
4803
- }, []);
4790
+ }, [required, onValidate, setErrorHelperText, initHelperText]);
4804
4791
  // Commands --------------------------------------------------------------------------------------------------------
4805
4792
  React.useLayoutEffect(function () {
4806
4793
  var lastValue = value;
@@ -4877,6 +4864,13 @@ var FormRadioGroup = React__default["default"].forwardRef(function (_a, ref) {
4877
4864
  ref,
4878
4865
  onAddValueItem,
4879
4866
  onRemoveValueItem,
4867
+ id,
4868
+ setValue,
4869
+ setDisabled,
4870
+ setErrorHelperText,
4871
+ initHelperText,
4872
+ setItems,
4873
+ setLoading,
4880
4874
  ]);
4881
4875
  React.useEffect(function () {
4882
4876
  if (onLoadItems) {
@@ -4886,6 +4880,7 @@ var FormRadioGroup = React__default["default"].forwardRef(function (_a, ref) {
4886
4880
  setIsOnGetItemLoading(false);
4887
4881
  });
4888
4882
  }
4883
+ // eslint-disable-next-line react-hooks/exhaustive-deps
4889
4884
  }, []);
4890
4885
  // Event Handler ---------------------------------------------------------------------------------------------------
4891
4886
  var handleChange = React.useCallback(function (e) {
@@ -4912,7 +4907,7 @@ var FormRadioGroup = React__default["default"].forwardRef(function (_a, ref) {
4912
4907
  });
4913
4908
  }
4914
4909
  }
4915
- }, [readOnly, value, items, name, getFinalValue, onValueChangeByUser, onRequestSearchSubmit]);
4910
+ }, [readOnly, items, getFinalValue, value, setValue, onValueChangeByUser, name, onRequestSearchSubmit]);
4916
4911
  // Render ----------------------------------------------------------------------------------------------------------
4917
4912
  return (React__default["default"].createElement(FormItemBase, { focused: focused, ref: baseRef, className: classNames$1(className, 'FormValueItem', 'FormRadioGroup'), variant: variant, size: size, color: color, labelIcon: labelIcon, label: label, fullWidth: fullWidth, required: required, error: error, helperText: helperText, helperTextProps: { style: { marginLeft: 2 } }, style: style, sx: sx, controlHeight: height || (size === 'small' ? 35 : 39), controlVerticalCenter: true, control: React__default["default"].createElement(React__default["default"].Fragment, null,
4918
4913
  !fullWidth && !isOnGetItemLoading && !loading && items && (React__default["default"].createElement("div", { ref: resizeWidthDetectorRef, style: {
@@ -4959,12 +4954,13 @@ styleInject(css_248z$b);var FormToggleButtonGroup = React__default["default"].fo
4959
4954
  var labelId = React.useId();
4960
4955
  // FormState -------------------------------------------------------------------------------------------------------
4961
4956
  var _b = useFormState(), formVariant = _b.variant, formSize = _b.size, formColor = _b.color, formFocused = _b.focused, formFullWidth = _b.fullWidth, formColWidth = _b.formColWidth, onAddValueItem = _b.onAddValueItem, onRemoveValueItem = _b.onRemoveValueItem, onValueChange = _b.onValueChange, onValueChangeByUser = _b.onValueChangeByUser, onRequestSearchSubmit = _b.onRequestSearchSubmit;
4957
+ // Memo - FormState ------------------------------------------------------------------------------------------------
4958
+ var variant = React.useMemo(function () { return (initVariant == null ? formVariant : initVariant); }, [initVariant, formVariant]);
4959
+ var size = React.useMemo(function () { return (initSize == null ? formSize : initSize); }, [initSize, formSize]);
4960
+ var color = React.useMemo(function () { return (initColor == null ? formColor : initColor); }, [initColor, formColor]);
4961
+ var fullWidth = React.useMemo(function () { return (initFullWidth == null ? formFullWidth : initFullWidth); }, [initFullWidth, formFullWidth]);
4962
4962
  // State - FormState -----------------------------------------------------------------------------------------------
4963
- var variant = useAutoUpdateState$1(initVariant || formVariant)[0];
4964
- var size = useAutoUpdateState$1(initSize || formSize)[0];
4965
- var color = useAutoUpdateState$1(initColor || formColor)[0];
4966
- var _c = useAutoUpdateState$1(initFocused || formFocused), focused = _c[0], setFocused = _c[1];
4967
- var fullWidth = useAutoUpdateState$1(initFullWidth == null ? formFullWidth : initFullWidth)[0];
4963
+ var _c = useAutoUpdateLayoutState(initFocused == null ? formFocused : initFocused), focused = _c[0], setFocused = _c[1];
4968
4964
  // Theme -----------------------------------------------------------------------------------------------------------
4969
4965
  var theme = material.useTheme();
4970
4966
  // State - width (ResizeDetector) ----------------------------------------------------------------------------------
@@ -4985,13 +4981,13 @@ styleInject(css_248z$b);var FormToggleButtonGroup = React__default["default"].fo
4985
4981
  }).ref;
4986
4982
  // State -----------------------------------------------------------------------------------------------------------
4987
4983
  var _f = React.useState(false), isOnGetItemLoading = _f[0], setIsOnGetItemLoading = _f[1];
4988
- var _g = useAutoUpdateState$1(initItems), items = _g[0], setItems = _g[1];
4989
- var _h = useAutoUpdateState$1(initError), error = _h[0], setError = _h[1];
4990
- var _j = useAutoUpdateState$1(initHelperText), helperText = _j[0], setHelperText = _j[1];
4991
- var _k = useAutoUpdateState$1(initLoading), loading = _k[0], setLoading = _k[1];
4992
- var _l = useAutoUpdateState$1(initDisabled), disabled = _l[0], setDisabled = _l[1];
4993
- // State - itemsValues-----------------------------------------------------------------------------------------------------------
4994
- var itemsValues = useAutoUpdateState$1(React.useCallback(function () {
4984
+ var _g = useAutoUpdateLayoutState(initItems), items = _g[0], setItems = _g[1];
4985
+ var _h = useAutoUpdateLayoutState(initError), error = _h[0], setError = _h[1];
4986
+ var _j = useAutoUpdateLayoutState(initHelperText), helperText = _j[0], setHelperText = _j[1];
4987
+ var _k = useAutoUpdateLayoutState(initLoading), loading = _k[0], setLoading = _k[1];
4988
+ var _l = useAutoUpdateLayoutState(initDisabled), disabled = _l[0], setDisabled = _l[1];
4989
+ // Memo --------------------------------------------------------------------------------------------------------------
4990
+ var itemsValues = React.useMemo(function () {
4995
4991
  if (items) {
4996
4992
  return items.reduce(function (res, _a) {
4997
4993
  var value = _a.value;
@@ -5002,9 +4998,8 @@ styleInject(css_248z$b);var FormToggleButtonGroup = React__default["default"].fo
5002
4998
  else {
5003
4999
  return {};
5004
5000
  }
5005
- }, [items]))[0];
5006
- // State - style ---------------------------------------------------------------------------------------------------
5007
- var style = useAutoUpdateState$1(React.useCallback(function () {
5001
+ }, [items]);
5002
+ var style = React.useMemo(function () {
5008
5003
  var finalWidth;
5009
5004
  if (initWidth) {
5010
5005
  finalWidth = initWidth;
@@ -5026,7 +5021,7 @@ styleInject(css_248z$b);var FormToggleButtonGroup = React__default["default"].fo
5026
5021
  }
5027
5022
  }
5028
5023
  return __assign$4({ width: finalWidth }, initStyle);
5029
- }, [initStyle, initWidth, fullWidth, isOnGetItemLoading, width, formColWidth]))[0];
5024
+ }, [formColWidth, fullWidth, initStyle, initWidth, isOnGetItemLoading, width]);
5030
5025
  // Function - getFinalValue ----------------------------------------------------------------------------------------
5031
5026
  var getFinalValue = React.useCallback(function (value) {
5032
5027
  var finalValue = value;
@@ -5076,7 +5071,7 @@ styleInject(css_248z$b);var FormToggleButtonGroup = React__default["default"].fo
5076
5071
  return onValue ? onValue(finalValue) : finalValue;
5077
5072
  }, [multiple, formValueSeparator, itemsValues, onValue]);
5078
5073
  // State - value ---------------------------------------------------------------------------------------------------
5079
- var _m = useAutoUpdateState$1(initValue, getFinalValue), value = _m[0], setValue = _m[1];
5074
+ var _m = useAutoUpdateLayoutState(initValue, getFinalValue), value = _m[0], setValue = _m[1];
5080
5075
  // Effect ----------------------------------------------------------------------------------------------------------
5081
5076
  React.useEffect(function () {
5082
5077
  if (value !== initValue) {
@@ -5091,6 +5086,7 @@ styleInject(css_248z$b);var FormToggleButtonGroup = React__default["default"].fo
5091
5086
  setIsOnGetItemLoading(false);
5092
5087
  });
5093
5088
  }
5089
+ // eslint-disable-next-line react-hooks/exhaustive-deps
5094
5090
  }, []);
5095
5091
  useFirstSkipEffect$1(function () {
5096
5092
  if (error)
@@ -5118,12 +5114,18 @@ styleInject(css_248z$b);var FormToggleButtonGroup = React__default["default"].fo
5118
5114
  }
5119
5115
  }
5120
5116
  }
5117
+ // eslint-disable-next-line react-hooks/exhaustive-deps
5121
5118
  }, [items, value, multiple, notAllowEmptyValue]);
5122
5119
  // Function - focus ------------------------------------------------------------------------------------------------
5123
5120
  var focus = React.useCallback(function () {
5124
5121
  if (resizeHeightDetectorRef.current)
5125
5122
  resizeHeightDetectorRef.current.focus();
5126
5123
  }, [resizeHeightDetectorRef]);
5124
+ // Function - setErrorHelperText -----------------------------------------------------------------------------------
5125
+ var setErrorHelperText = React.useCallback(function (error, helperText) {
5126
+ setError(error);
5127
+ setHelperText(helperText);
5128
+ }, [setError, setHelperText]);
5127
5129
  // Function - validate ---------------------------------------------------------------------------------------------
5128
5130
  var validate = React.useCallback(function (value) {
5129
5131
  if (required && empty$1(value)) {
@@ -5139,12 +5141,7 @@ styleInject(css_248z$b);var FormToggleButtonGroup = React__default["default"].fo
5139
5141
  }
5140
5142
  setErrorHelperText(false, initHelperText);
5141
5143
  return true;
5142
- }, [required, onValidate, initHelperText]);
5143
- // Function - setErrorHelperText -----------------------------------------------------------------------------------
5144
- var setErrorHelperText = React.useCallback(function (error, helperText) {
5145
- setError(error);
5146
- setHelperText(helperText);
5147
- }, []);
5144
+ }, [required, onValidate, setErrorHelperText, initHelperText]);
5148
5145
  // Commands --------------------------------------------------------------------------------------------------------
5149
5146
  React.useLayoutEffect(function () {
5150
5147
  if (ref || onAddValueItem) {
@@ -5230,6 +5227,14 @@ styleInject(css_248z$b);var FormToggleButtonGroup = React__default["default"].fo
5230
5227
  ref,
5231
5228
  onAddValueItem,
5232
5229
  onRemoveValueItem,
5230
+ loading,
5231
+ id,
5232
+ setValue,
5233
+ setDisabled,
5234
+ setErrorHelperText,
5235
+ initHelperText,
5236
+ setItems,
5237
+ setLoading,
5233
5238
  ]);
5234
5239
  // Event Handler ---------------------------------------------------------------------------------------------------
5235
5240
  var handleChange = React.useCallback(function (e, newValue) {
@@ -5253,7 +5258,7 @@ styleInject(css_248z$b);var FormToggleButtonGroup = React__default["default"].fo
5253
5258
  }
5254
5259
  }
5255
5260
  finalValue_1 = getFinalValue(finalValue_1);
5256
- if (!isSame$1(value, finalValue_1)) {
5261
+ if (!isSame$2(value, finalValue_1)) {
5257
5262
  setValue(finalValue_1);
5258
5263
  nextTick(function () {
5259
5264
  onValueChangeByUser(name, finalValue_1);
@@ -5262,14 +5267,14 @@ styleInject(css_248z$b);var FormToggleButtonGroup = React__default["default"].fo
5262
5267
  }
5263
5268
  }
5264
5269
  }, [
5265
- value,
5266
- multiple,
5267
5270
  readOnly,
5268
5271
  notAllowEmptyValue,
5269
- multiple,
5270
5272
  getFinalValue,
5271
- name,
5273
+ value,
5274
+ multiple,
5275
+ setValue,
5272
5276
  onValueChangeByUser,
5277
+ name,
5273
5278
  onRequestSearchSubmit,
5274
5279
  ]);
5275
5280
  // Render ----------------------------------------------------------------------------------------------------------
@@ -5327,17 +5332,18 @@ FormToggleButtonGroup.defaultProps = FormToggleButtonGroupDefaultProps;var FormR
5327
5332
  var id = React.useId();
5328
5333
  // FormState -------------------------------------------------------------------------------------------------------
5329
5334
  var _b = useFormState(), formVariant = _b.variant, formSize = _b.size, formColor = _b.color, formFocused = _b.focused, onAddValueItem = _b.onAddValueItem, onRemoveValueItem = _b.onRemoveValueItem, onValueChange = _b.onValueChange, onValueChangeByUser = _b.onValueChangeByUser, onRequestSearchSubmit = _b.onRequestSearchSubmit;
5335
+ // Memo - FormState ------------------------------------------------------------------------------------------------
5336
+ var variant = React.useMemo(function () { return (initVariant == null ? formVariant : initVariant); }, [initVariant, formVariant]);
5337
+ var size = React.useMemo(function () { return (initSize == null ? formSize : initSize); }, [initSize, formSize]);
5338
+ var color = React.useMemo(function () { return (initColor == null ? formColor : initColor); }, [initColor, formColor]);
5330
5339
  // State - FormState -----------------------------------------------------------------------------------------------
5331
- var variant = useAutoUpdateState$1(initVariant || formVariant)[0];
5332
- var size = useAutoUpdateState$1(initSize || formSize)[0];
5333
- var color = useAutoUpdateState$1(initColor || formColor)[0];
5334
- var _c = useAutoUpdateState$1(initFocused || formFocused), focused = _c[0], setFocused = _c[1];
5340
+ var _c = useAutoUpdateLayoutState(initFocused == null ? formFocused : initFocused), focused = _c[0], setFocused = _c[1];
5335
5341
  // Ref -------------------------------------------------------------------------------------------------------------
5336
5342
  var inputRef = React.useRef();
5337
5343
  // State -----------------------------------------------------------------------------------------------------------
5338
- var _d = useAutoUpdateState$1(initError), error = _d[0], setError = _d[1];
5339
- var _e = useAutoUpdateState$1(initHelperText), helperText = _e[0], setHelperText = _e[1];
5340
- var _f = useAutoUpdateState$1(initDisabled), disabled = _f[0], setDisabled = _f[1];
5344
+ var _d = useAutoUpdateLayoutState(initError), error = _d[0], setError = _d[1];
5345
+ var _e = useAutoUpdateLayoutState(initHelperText), helperText = _e[0], setHelperText = _e[1];
5346
+ var _f = useAutoUpdateLayoutState(initDisabled), disabled = _f[0], setDisabled = _f[1];
5341
5347
  // State - width, height -------------------------------------------------------------------------------------------
5342
5348
  var _g = useResizeDetector(), width = _g.width, height = _g.height, resizeDetectorRef = _g.ref;
5343
5349
  // Function - getFinalValue ----------------------------------------------------------------------------------------
@@ -5345,7 +5351,7 @@ FormToggleButtonGroup.defaultProps = FormToggleButtonGroupDefaultProps;var FormR
5345
5351
  return onValue ? onValue(value) : value;
5346
5352
  }, [onValue]);
5347
5353
  // State - value ---------------------------------------------------------------------------------------------------
5348
- var _h = useAutoUpdateState$1(initValue || 0, getFinalValue), value = _h[0], setValue = _h[1];
5354
+ var _h = useAutoUpdateLayoutState(initValue || 0, getFinalValue), value = _h[0], setValue = _h[1];
5349
5355
  useFirstSkipEffect$1(function () {
5350
5356
  if (error)
5351
5357
  validate(value);
@@ -5353,10 +5359,8 @@ FormToggleButtonGroup.defaultProps = FormToggleButtonGroupDefaultProps;var FormR
5353
5359
  onChange(value);
5354
5360
  onValueChange(name, value);
5355
5361
  }, [value]);
5356
- // State - style ---------------------------------------------------------------------------------------------------
5357
- var style = useAutoUpdateState$1(React.useCallback(function () {
5358
- return __assign$4({ width: width || 100 }, initStyle);
5359
- }, [initStyle, width]))[0];
5362
+ // Memo --------------------------------------------------------------------------------------------------------------
5363
+ var style = React.useMemo(function () { return (__assign$4({ width: width || 100 }, initStyle)); }, [initStyle, width]);
5360
5364
  // Effect ----------------------------------------------------------------------------------------------------------
5361
5365
  React.useEffect(function () {
5362
5366
  if (value !== initValue) {
@@ -5367,6 +5371,7 @@ FormToggleButtonGroup.defaultProps = FormToggleButtonGroupDefaultProps;var FormR
5367
5371
  if (resizeDetectorRef.current) {
5368
5372
  inputRef.current = resizeDetectorRef.current.querySelector('input');
5369
5373
  }
5374
+ // eslint-disable-next-line react-hooks/exhaustive-deps
5370
5375
  }, []);
5371
5376
  // Function --------------------------------------------------------------------------------------------------------
5372
5377
  var focus = React.useCallback(function () {
@@ -5377,6 +5382,10 @@ FormToggleButtonGroup.defaultProps = FormToggleButtonGroupDefaultProps;var FormR
5377
5382
  (_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.blur();
5378
5383
  });
5379
5384
  }, []);
5385
+ var setErrorHelperText = React.useCallback(function (error, helperText) {
5386
+ setError(error);
5387
+ setHelperText(helperText);
5388
+ }, [setError, setHelperText]);
5380
5389
  var validate = React.useCallback(function (value) {
5381
5390
  if (required && (empty$1(value) || value === 0)) {
5382
5391
  setErrorHelperText(true, '필수 선택 항목입니다.');
@@ -5391,11 +5400,7 @@ FormToggleButtonGroup.defaultProps = FormToggleButtonGroupDefaultProps;var FormR
5391
5400
  }
5392
5401
  setErrorHelperText(false, initHelperText);
5393
5402
  return true;
5394
- }, [required, onValidate, initHelperText]);
5395
- var setErrorHelperText = React.useCallback(function (error, helperText) {
5396
- setError(error);
5397
- setHelperText(helperText);
5398
- }, []);
5403
+ }, [required, onValidate, setErrorHelperText, initHelperText]);
5399
5404
  // Commands --------------------------------------------------------------------------------------------------------
5400
5405
  React.useLayoutEffect(function () {
5401
5406
  var lastValue = value;
@@ -5459,6 +5464,10 @@ FormToggleButtonGroup.defaultProps = FormToggleButtonGroupDefaultProps;var FormR
5459
5464
  ref,
5460
5465
  onAddValueItem,
5461
5466
  onRemoveValueItem,
5467
+ id,
5468
+ setValue,
5469
+ setDisabled,
5470
+ setErrorHelperText,
5462
5471
  ]);
5463
5472
  // Event Handler ---------------------------------------------------------------------------------------------------
5464
5473
  var handleChange = React.useCallback(function (e, value) {
@@ -5473,7 +5482,7 @@ FormToggleButtonGroup.defaultProps = FormToggleButtonGroupDefaultProps;var FormR
5473
5482
  onRequestSearchSubmit(name, finalValue_1);
5474
5483
  });
5475
5484
  }
5476
- }, [readOnly, name, getFinalValue, onValueChangeByUser, onRequestSearchSubmit]);
5485
+ }, [readOnly, getFinalValue, setValue, onValueChangeByUser, name, onRequestSearchSubmit]);
5477
5486
  // Render ----------------------------------------------------------------------------------------------------------
5478
5487
  return (React__default["default"].createElement(FormItemBase, { variant: variant, size: size, color: color, focused: focused, className: classNames$1(className, 'FormValueItem', 'FormRating'), labelIcon: labelIcon, label: label, error: error, fullWidth: false, required: required, helperText: helperText, helperTextProps: { style: { marginLeft: 5 } }, style: style, sx: sx, controlHeight: height || (size === 'small' ? 21 : 26), controlVerticalCenter: true, control: React__default["default"].createElement(material.Rating, { ref: resizeDetectorRef, size: size === 'medium' ? 'large' : 'medium', name: name, precision: precision, highlightSelectedOnly: highlightSelectedOnly, value: value, disabled: disabled || readOnly, max: max, icon: React__default["default"].createElement(FormIcon, { color: color, fontSize: 'inherit' }, icon ? icon : 'Star'), emptyIcon: React__default["default"].createElement(FormIcon, { fontSize: 'inherit' }, emptyIcon ? emptyIcon : 'StarBorder'), onChange: handleChange, onFocus: function () { return setFocused(initFocused || true); }, onBlur: function () { return setFocused(initFocused || false); } }) }));
5479
5488
  });
@@ -7216,16 +7225,17 @@ styleInject(css_248z$a);var FormTextEditor = React__default["default"].forwardRe
7216
7225
  var id = React.useId();
7217
7226
  // FormState -------------------------------------------------------------------------------------------------------
7218
7227
  var _b = useFormState(), formVariant = _b.variant, formSize = _b.size, formColor = _b.color, formFocused = _b.focused, onAddValueItem = _b.onAddValueItem, onValueChange = _b.onValueChange, onRemoveValueItem = _b.onRemoveValueItem, onValueChangeByUser = _b.onValueChangeByUser;
7228
+ // Memo - FormState ------------------------------------------------------------------------------------------------
7229
+ var variant = React.useMemo(function () { return (initVariant == null ? formVariant : initVariant); }, [initVariant, formVariant]);
7230
+ var size = React.useMemo(function () { return (initSize == null ? formSize : initSize); }, [initSize, formSize]);
7231
+ var color = React.useMemo(function () { return (initColor == null ? formColor : initColor); }, [initColor, formColor]);
7219
7232
  // State - FormState -----------------------------------------------------------------------------------------------
7220
- var variant = useAutoUpdateState$1(initVariant || formVariant)[0];
7221
- var size = useAutoUpdateState$1(initSize || formSize)[0];
7222
- var color = useAutoUpdateState$1(initColor || formColor)[0];
7223
- var _c = useAutoUpdateState$1(initFocused || formFocused), focused = _c[0], setFocused = _c[1];
7233
+ var _c = useAutoUpdateLayoutState(initFocused == null ? formFocused : initFocused), focused = _c[0], setFocused = _c[1];
7224
7234
  // Ref -------------------------------------------------------------------------------------------------------------
7225
7235
  var editorRef = React.useRef(null);
7226
7236
  var keyDownTime = React.useRef(0);
7227
7237
  // State - value ---------------------------------------------------------------------------------------------------
7228
- var _d = useAutoUpdateState$1(initValue), value = _d[0], setValue = _d[1];
7238
+ var _d = useAutoUpdateLayoutState(initValue), value = _d[0], setValue = _d[1];
7229
7239
  useFirstSkipEffect$1(function () {
7230
7240
  if (error)
7231
7241
  validate(value);
@@ -7234,10 +7244,10 @@ styleInject(css_248z$a);var FormTextEditor = React__default["default"].forwardRe
7234
7244
  onValueChange(name, value);
7235
7245
  }, [value]);
7236
7246
  // State -----------------------------------------------------------------------------------------------------------
7237
- var _e = useAutoUpdateState$1(initError), error = _e[0], setError = _e[1];
7238
- var _f = useAutoUpdateState$1(initHelperText), helperText = _f[0], setHelperText = _f[1];
7247
+ var _e = useAutoUpdateLayoutState(initError), error = _e[0], setError = _e[1];
7248
+ var _f = useAutoUpdateLayoutState(initHelperText), helperText = _f[0], setHelperText = _f[1];
7239
7249
  var _g = React.useState(false), initialized = _g[0], setInitialized = _g[1];
7240
- var _h = useAutoUpdateState$1(initDisabled), disabled = _h[0], setDisabled = _h[1];
7250
+ var _h = useAutoUpdateLayoutState(initDisabled), disabled = _h[0], setDisabled = _h[1];
7241
7251
  // Function - focus ------------------------------------------------------------------------------------------------
7242
7252
  var focus = React.useCallback(function () {
7243
7253
  var _a, _b;
@@ -7248,6 +7258,11 @@ styleInject(css_248z$a);var FormTextEditor = React__default["default"].forwardRe
7248
7258
  textarea.style.display = 'none';
7249
7259
  }
7250
7260
  }, [editorRef]);
7261
+ // Function - setErrorHelperText -----------------------------------------------------------------------------------
7262
+ var setErrorHelperText = React.useCallback(function (error, helperText) {
7263
+ setError(error);
7264
+ setHelperText(helperText);
7265
+ }, [setError, setHelperText]);
7251
7266
  // Function - validate ---------------------------------------------------------------------------------------------
7252
7267
  var validate = React.useCallback(function (value) {
7253
7268
  var isEmptyValue = false;
@@ -7270,12 +7285,7 @@ styleInject(css_248z$a);var FormTextEditor = React__default["default"].forwardRe
7270
7285
  }
7271
7286
  setErrorHelperText(false, initHelperText);
7272
7287
  return true;
7273
- }, [onValidate, initHelperText]);
7274
- // Function - setErrorHelperText -----------------------------------------------------------------------------------
7275
- var setErrorHelperText = React.useCallback(function (error, helperText) {
7276
- setError(error);
7277
- setHelperText(helperText);
7278
- }, []);
7288
+ }, [required, onValidate, setErrorHelperText, initHelperText]);
7279
7289
  // Commands --------------------------------------------------------------------------------------------------------
7280
7290
  React.useLayoutEffect(function () {
7281
7291
  var lastValue = value;
@@ -7338,6 +7348,10 @@ styleInject(css_248z$a);var FormTextEditor = React__default["default"].forwardRe
7338
7348
  ref,
7339
7349
  onAddValueItem,
7340
7350
  onRemoveValueItem,
7351
+ id,
7352
+ setValue,
7353
+ setDisabled,
7354
+ setErrorHelperText,
7341
7355
  ]);
7342
7356
  // Event Handler ---------------------------------------------------------------------------------------------------
7343
7357
  var handleEditorChange = React.useCallback(function (value) {
@@ -7348,7 +7362,7 @@ styleInject(css_248z$a);var FormTextEditor = React__default["default"].forwardRe
7348
7362
  onValueChangeByUser(name, value);
7349
7363
  });
7350
7364
  }
7351
- }, [name, onValueChangeByUser]);
7365
+ }, [name, onValueChangeByUser, setValue]);
7352
7366
  var handleKeyDown = React.useCallback(function () {
7353
7367
  keyDownTime.current = new Date().getTime();
7354
7368
  }, []);
@@ -7390,7 +7404,7 @@ FormTextEditor.defaultProps = FormTextEditorDefaultProps;var FormAutocompleteDef
7390
7404
  // ID --------------------------------------------------------------------------------------------------------------
7391
7405
  var initVariant = _a.variant, initSize = _a.size, initColor = _a.color, initFocused = _a.focused, initLabelShrink = _a.labelShrink, initFullWidth = _a.fullWidth,
7392
7406
  //----------------------------------------------------------------------------------------------------------------
7393
- name = _a.name, labelIcon = _a.labelIcon, label = _a.label, initLoading = _a.loading, initItems = _a.items, initValue = _a.value, initError = _a.error, initHelperText = _a.helperText, initDisabled = _a.disabled, readOnly = _a.readOnly, required = _a.required, exceptValue = _a.exceptValue, width = _a.width, placeholder = _a.placeholder, initMultiple = _a.multiple, formValueSeparator = _a.formValueSeparator, formValueSort = _a.formValueSort, disablePortal = _a.disablePortal, noOptionsText = _a.noOptionsText, loadingText = _a.loadingText, limitTags = _a.limitTags, openOnFocus = _a.openOnFocus, disableClearable = _a.disableClearable, onLoadItems = _a.onLoadItems, onRenderItem = _a.onRenderItem, onRenderTag = _a.onRenderTag, onAddItem = _a.onAddItem,
7407
+ name = _a.name, labelIcon = _a.labelIcon, label = _a.label, initLoading = _a.loading, initItems = _a.items, initValue = _a.value, initError = _a.error, initHelperText = _a.helperText, initDisabled = _a.disabled, readOnly = _a.readOnly, required = _a.required, exceptValue = _a.exceptValue, width = _a.width, placeholder = _a.placeholder, multiple = _a.multiple, formValueSeparator = _a.formValueSeparator, formValueSort = _a.formValueSort, disablePortal = _a.disablePortal, noOptionsText = _a.noOptionsText, loadingText = _a.loadingText, limitTags = _a.limitTags, openOnFocus = _a.openOnFocus, disableClearable = _a.disableClearable, async = _a.async, onLoadItems = _a.onLoadItems, onRenderItem = _a.onRenderItem, onRenderTag = _a.onRenderTag, onAddItem = _a.onAddItem,
7394
7408
  //----------------------------------------------------------------------------------------------------------------
7395
7409
  onChange = _a.onChange, onValue = _a.onValue, onValidate = _a.onValidate,
7396
7410
  //----------------------------------------------------------------------------------------------------------------
@@ -7398,27 +7412,26 @@ FormTextEditor.defaultProps = FormTextEditorDefaultProps;var FormAutocompleteDef
7398
7412
  var id = React.useId();
7399
7413
  // Ref -------------------------------------------------------------------------------------------------------------
7400
7414
  var textFieldRef = React.useRef(null);
7415
+ var asyncTimerRef = React.useRef(null);
7401
7416
  // FormState -------------------------------------------------------------------------------------------------------
7402
7417
  var _b = useFormState(), formVariant = _b.variant, formSize = _b.size, formColor = _b.color, formFocused = _b.focused, formLabelShrink = _b.labelShrink, formFullWidth = _b.fullWidth, onAddValueItem = _b.onAddValueItem, onRemoveValueItem = _b.onRemoveValueItem, onValueChange = _b.onValueChange, onValueChangeByUser = _b.onValueChangeByUser, onRequestSearchSubmit = _b.onRequestSearchSubmit;
7403
- // State - FormState -----------------------------------------------------------------------------------------------
7404
- var variant = useAutoUpdateState$1(initVariant || formVariant)[0];
7405
- var size = useAutoUpdateState$1(initSize || formSize)[0];
7406
- var color = useAutoUpdateState$1(initColor || formColor)[0];
7407
- var focused = useAutoUpdateState$1(initFocused || formFocused)[0];
7408
- var labelShrink = useAutoUpdateState$1(initLabelShrink || formLabelShrink)[0];
7409
- var fullWidth = useAutoUpdateState$1(initFullWidth == null ? formFullWidth : initFullWidth)[0];
7418
+ // Memo - FormState ------------------------------------------------------------------------------------------------
7419
+ var variant = React.useMemo(function () { return (initVariant == null ? formVariant : initVariant); }, [initVariant, formVariant]);
7420
+ var size = React.useMemo(function () { return (initSize == null ? formSize : initSize); }, [initSize, formSize]);
7421
+ var color = React.useMemo(function () { return (initColor == null ? formColor : initColor); }, [initColor, formColor]);
7422
+ var focused = React.useMemo(function () { return (initFocused == null ? formFocused : initFocused); }, [initFocused, formFocused]);
7423
+ var labelShrink = React.useMemo(function () { return (initLabelShrink == null ? formLabelShrink : initLabelShrink); }, [initLabelShrink, formLabelShrink]);
7424
+ var fullWidth = React.useMemo(function () { return (initFullWidth == null ? formFullWidth : initFullWidth); }, [initFullWidth, formFullWidth]);
7410
7425
  // State -----------------------------------------------------------------------------------------------------------
7411
7426
  var _c = React.useState(false), isOnGetItemLoading = _c[0], setIsOnGetItemLoading = _c[1];
7412
- var _d = useAutoUpdateState$1(initItems), items = _d[0], setItems = _d[1];
7413
- var _e = useAutoUpdateState$1(initError), error = _e[0], setError = _e[1];
7414
- var _f = useAutoUpdateState$1(initHelperText), helperText = _f[0], setHelperText = _f[1];
7415
- var _g = useAutoUpdateState$1(initLoading), loading = _g[0], setLoading = _g[1];
7416
- var _h = useAutoUpdateState$1(initDisabled), disabled = _h[0], setDisabled = _h[1];
7417
- var multiple = useAutoUpdateLayoutState(React.useCallback(function () {
7418
- return initMultiple;
7419
- }, [initMultiple]))[0];
7420
- // State - itemsValues-----------------------------------------------------------------------------------------------------------
7421
- var itemsValues = useAutoUpdateState$1(React.useCallback(function () {
7427
+ var _d = useAutoUpdateLayoutState(initItems), items = _d[0], setItems = _d[1];
7428
+ var _e = useAutoUpdateLayoutState(initError), error = _e[0], setError = _e[1];
7429
+ var _f = useAutoUpdateLayoutState(initHelperText), helperText = _f[0], setHelperText = _f[1];
7430
+ var _g = useAutoUpdateLayoutState(initLoading), loading = _g[0], setLoading = _g[1];
7431
+ var _h = useAutoUpdateLayoutState(initDisabled), disabled = _h[0], setDisabled = _h[1];
7432
+ var _j = React.useState(undefined), inputValue = _j[0], setInputValue = _j[1];
7433
+ // Memo --------------------------------------------------------------------------------------------------------------
7434
+ var itemsValues = React.useMemo(function () {
7422
7435
  if (items) {
7423
7436
  return items.reduce(function (res, _a) {
7424
7437
  var value = _a.value;
@@ -7429,19 +7442,18 @@ FormTextEditor.defaultProps = FormTextEditorDefaultProps;var FormAutocompleteDef
7429
7442
  else {
7430
7443
  return {};
7431
7444
  }
7432
- }, [items]))[0];
7433
- // State - style ---------------------------------------------------------------------------------------------------
7434
- var style = useAutoUpdateState$1(React.useCallback(function () {
7445
+ }, [items]);
7446
+ var style = React.useMemo(function () {
7435
7447
  var style = __assign$4({ minWidth: 120 }, initStyle);
7436
7448
  if (width != null) {
7437
7449
  style.width = width;
7438
7450
  }
7439
7451
  return style;
7440
- }, [initStyle, width]))[0];
7452
+ }, [initStyle, width]);
7441
7453
  // Function - getFinalValue ----------------------------------------------------------------------------------------
7442
7454
  var getFinalValue = React.useCallback(function (value) {
7443
7455
  var finalValue = value;
7444
- if (initMultiple) {
7456
+ if (multiple) {
7445
7457
  if (!Array.isArray(finalValue)) {
7446
7458
  if (finalValue != null && notEmpty(finalValue)) {
7447
7459
  if (typeof finalValue === 'string') {
@@ -7468,7 +7480,7 @@ FormTextEditor.defaultProps = FormTextEditorDefaultProps;var FormAutocompleteDef
7468
7480
  }
7469
7481
  if (notEmpty(itemsValues)) {
7470
7482
  if (finalValue != null && notEmpty(finalValue)) {
7471
- if (initMultiple) {
7483
+ if (multiple) {
7472
7484
  if (Array.isArray(finalValue)) {
7473
7485
  finalValue = finalValue.map(function (v) {
7474
7486
  var realValue = itemsValues[v.toString()];
@@ -7485,13 +7497,13 @@ FormTextEditor.defaultProps = FormTextEditorDefaultProps;var FormAutocompleteDef
7485
7497
  }
7486
7498
  }
7487
7499
  return onValue ? onValue(finalValue) : finalValue;
7488
- }, [initMultiple, formValueSeparator, itemsValues, onValue]);
7500
+ }, [multiple, formValueSeparator, itemsValues, onValue]);
7489
7501
  // State - value ---------------------------------------------------------------------------------------------------
7490
- var _j = useAutoUpdateLayoutState(initValue, getFinalValue), value = _j[0], setValue = _j[1];
7491
- var componentValue = useAutoUpdateLayoutState(React.useCallback(function () {
7502
+ var _k = useAutoUpdateLayoutState(initValue, getFinalValue), value = _k[0], setValue = _k[1];
7503
+ var componentValue = React.useMemo(function () {
7492
7504
  var finalValue = value;
7493
7505
  if (finalValue != null) {
7494
- if (initMultiple) {
7506
+ if (multiple) {
7495
7507
  if (!Array.isArray(finalValue)) {
7496
7508
  finalValue = [finalValue];
7497
7509
  }
@@ -7503,20 +7515,20 @@ FormTextEditor.defaultProps = FormTextEditorDefaultProps;var FormAutocompleteDef
7503
7515
  }
7504
7516
  }
7505
7517
  else {
7506
- finalValue = initMultiple ? [] : undefined;
7518
+ finalValue = multiple ? [] : undefined;
7507
7519
  }
7508
7520
  if (notEmpty(finalValue) && items) {
7509
7521
  if (Array.isArray(finalValue)) {
7510
7522
  return items.filter(function (info) { return Array.isArray(finalValue) && finalValue.includes(info.value); });
7511
7523
  }
7512
7524
  else {
7513
- return items.find(function (info) { return info.value === value; }) || (initMultiple ? [] : null);
7525
+ return items.find(function (info) { return info.value === value; }) || (multiple ? [] : null);
7514
7526
  }
7515
7527
  }
7516
7528
  else {
7517
- return initMultiple ? [] : null;
7529
+ return multiple ? [] : null;
7518
7530
  }
7519
- }, [value, initMultiple, items]))[0];
7531
+ }, [value, multiple, items]);
7520
7532
  // Effect ----------------------------------------------------------------------------------------------------------
7521
7533
  React.useEffect(function () {
7522
7534
  if (value !== initValue) {
@@ -7524,13 +7536,14 @@ FormTextEditor.defaultProps = FormTextEditorDefaultProps;var FormAutocompleteDef
7524
7536
  onChange(value);
7525
7537
  onValueChange(name, value);
7526
7538
  }
7527
- if (onLoadItems) {
7539
+ if (!async && onLoadItems) {
7528
7540
  setIsOnGetItemLoading(true);
7529
7541
  onLoadItems().then(function (items) {
7530
7542
  setItems(items);
7531
7543
  setIsOnGetItemLoading(false);
7532
7544
  });
7533
7545
  }
7546
+ // eslint-disable-next-line react-hooks/exhaustive-deps
7534
7547
  }, []);
7535
7548
  useFirstSkipEffect$1(function () {
7536
7549
  if (error)
@@ -7539,11 +7552,33 @@ FormTextEditor.defaultProps = FormTextEditorDefaultProps;var FormAutocompleteDef
7539
7552
  onChange(value);
7540
7553
  onValueChange(name, value);
7541
7554
  }, [value]);
7555
+ React.useEffect(function () {
7556
+ if (asyncTimerRef.current) {
7557
+ clearTimeout(asyncTimerRef.current);
7558
+ asyncTimerRef.current = null;
7559
+ }
7560
+ if (async && onLoadItems && inputValue != null) {
7561
+ asyncTimerRef.current = setTimeout(function () {
7562
+ asyncTimerRef.current = null;
7563
+ setIsOnGetItemLoading(true);
7564
+ onLoadItems(inputValue).then(function (items) {
7565
+ setItems(items);
7566
+ setIsOnGetItemLoading(false);
7567
+ });
7568
+ }, 300);
7569
+ }
7570
+ // eslint-disable-next-line react-hooks/exhaustive-deps
7571
+ }, [async, inputValue]);
7542
7572
  // Function - focus ------------------------------------------------------------------------------------------------
7543
7573
  var focus = React.useCallback(function () {
7544
7574
  var _a;
7545
7575
  (_a = textFieldRef.current) === null || _a === void 0 ? void 0 : _a.focus();
7546
7576
  }, [textFieldRef]);
7577
+ // Function - setErrorHelperText -----------------------------------------------------------------------------------
7578
+ var setErrorHelperText = React.useCallback(function (error, helperText) {
7579
+ setError(error);
7580
+ setHelperText(helperText);
7581
+ }, [setError, setHelperText]);
7547
7582
  // Function - validate ---------------------------------------------------------------------------------------------
7548
7583
  var validate = React.useCallback(function (value) {
7549
7584
  if (required && empty$1(value)) {
@@ -7559,12 +7594,7 @@ FormTextEditor.defaultProps = FormTextEditorDefaultProps;var FormAutocompleteDef
7559
7594
  }
7560
7595
  setErrorHelperText(false, initHelperText);
7561
7596
  return true;
7562
- }, [required, onValidate, initHelperText]);
7563
- // Function - setErrorHelperText -----------------------------------------------------------------------------------
7564
- var setErrorHelperText = React.useCallback(function (error, helperText) {
7565
- setError(error);
7566
- setHelperText(helperText);
7567
- }, []);
7597
+ }, [required, onValidate, setErrorHelperText, initHelperText]);
7568
7598
  // Commands --------------------------------------------------------------------------------------------------------
7569
7599
  React.useLayoutEffect(function () {
7570
7600
  if (ref || onAddValueItem) {
@@ -7650,6 +7680,14 @@ FormTextEditor.defaultProps = FormTextEditorDefaultProps;var FormAutocompleteDef
7650
7680
  ref,
7651
7681
  onAddValueItem,
7652
7682
  onRemoveValueItem,
7683
+ loading,
7684
+ id,
7685
+ setValue,
7686
+ setDisabled,
7687
+ setErrorHelperText,
7688
+ initHelperText,
7689
+ setItems,
7690
+ setLoading,
7653
7691
  ]);
7654
7692
  // Event Handler ---------------------------------------------------------------------------------------------------
7655
7693
  var handleChange = React.useCallback(function (componentValue, reason, details) {
@@ -7666,7 +7704,7 @@ FormTextEditor.defaultProps = FormTextEditorDefaultProps;var FormAutocompleteDef
7666
7704
  }
7667
7705
  }
7668
7706
  var finalValue = getFinalValue(newValue);
7669
- if (!isSame$1(value, finalValue)) {
7707
+ if (!isSame$2(value, finalValue)) {
7670
7708
  setValue(finalValue);
7671
7709
  nextTick(function () {
7672
7710
  onValueChangeByUser(name, finalValue);
@@ -7694,9 +7732,13 @@ FormTextEditor.defaultProps = FormTextEditorDefaultProps;var FormAutocompleteDef
7694
7732
  else {
7695
7733
  go();
7696
7734
  }
7697
- }, [value, multiple, readOnly, getFinalValue, name, onValueChangeByUser, onRequestSearchSubmit, onAddItem]);
7735
+ }, [multiple, getFinalValue, value, setValue, onValueChangeByUser, name, onRequestSearchSubmit, onAddItem]);
7698
7736
  // Render ----------------------------------------------------------------------------------------------------------
7699
- return (React__default["default"].createElement(material.Autocomplete, { options: items || [], className: classNames$1(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; }, disabled: disabled, readOnly: readOnly, loading: loading || isOnGetItemLoading, loadingText: loadingText, limitTags: limitTags, onChange: function (e, value, reason, details) { return handleChange(value, reason, details); }, renderOption: function (props, option) { return (React__default["default"].createElement("li", __assign$4({}, props, { key: option.value }), onRenderItem ? onRenderItem(option) : option.label)); }, renderTags: function (value, getTagProps) {
7737
+ return (React__default["default"].createElement(material.Autocomplete, { options: items || [], className: classNames$1(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; }, disabled: disabled, readOnly: readOnly, loading: loading || isOnGetItemLoading, loadingText: loadingText, limitTags: limitTags, onChange: function (e, value, reason, details) { return handleChange(value, reason, details); }, renderOption: function (props, option) { return (React__default["default"].createElement("li", __assign$4({}, props, { key: option.value }), onRenderItem ? onRenderItem(option) : option.label)); }, onInputChange: function (event, newInputValue, reason) {
7738
+ if (reason === 'input') {
7739
+ setInputValue(newInputValue);
7740
+ }
7741
+ }, renderTags: function (value, getTagProps) {
7700
7742
  return value.map(function (option, index) { return (React__default["default"].createElement(material.Chip, __assign$4({ size: 'small', label: onRenderTag ? onRenderTag(option) : option.label }, getTagProps({ index: index })))); });
7701
7743
  }, renderInput: function (params) { return (React__default["default"].createElement(FormTextField, __assign$4({}, params, { ref: textFieldRef, name: name, variant: variant, size: size, color: color, labelIcon: labelIcon, label: label, labelShrink: labelShrink, required: required, focused: focused, error: error, helperText: helperText, placeholder: placeholder, noFormValueItem: true, InputProps: __assign$4(__assign$4({}, params.InputProps), { endAdornment: (React__default["default"].createElement(React__default["default"].Fragment, null,
7702
7744
  loading || isOnGetItemLoading ? React__default["default"].createElement(CircularProgress__default["default"], { color: 'inherit', size: 20 }) : null,
@@ -7877,10 +7919,8 @@ IconText.defaultProps = IconTextDefaultProps;var PrivateDatePickerDefaultProps =
7877
7919
  styleInject(css_248z$9);var PrivateToggleButtonDefaultProps = {};var PrivateToggleButton = React__default["default"].forwardRef(function (_a, ref) {
7878
7920
  var children = _a.children, initClassName = _a.className, selected = _a.selected, activated = _a.activated, outlined = _a.outlined, props = __rest$2(_a, ["children", "className", "selected", "activated", "outlined"]);
7879
7921
  var theme = material.useTheme();
7880
- var className = useAutoUpdateState$1(React.useCallback(function () {
7881
- return classNames$1(initClassName, selected && 'selected', activated && 'activated', outlined && 'outlined');
7882
- }, [initClassName, selected, activated, outlined]))[0];
7883
- var sx = useAutoUpdateState$1(React.useCallback(function () {
7922
+ var className = React.useMemo(function () { return classNames$1(initClassName, selected && 'selected', activated && 'activated', outlined && 'outlined'); }, [activated, initClassName, outlined, selected]);
7923
+ var sx = React.useMemo(function () {
7884
7924
  var newSx = {
7885
7925
  color: 'inherit',
7886
7926
  ':hover': {
@@ -7901,7 +7941,7 @@ styleInject(css_248z$9);var PrivateToggleButtonDefaultProps = {};var PrivateTogg
7901
7941
  }
7902
7942
  }
7903
7943
  return newSx;
7904
- }, [selected, activated, outlined]))[0];
7944
+ }, [activated, outlined, selected, theme]);
7905
7945
  return (React__default["default"].createElement(material.Button, __assign$4({}, props, { ref: ref, sx: sx, variant: 'text', className: classNames$1(className, selected && 'selected') }), children));
7906
7946
  });
7907
7947
  PrivateToggleButton.displayName = 'PrivateToggleButton';
@@ -14061,6 +14101,7 @@ var PrivateYearSelect = function (_a) {
14061
14101
  });
14062
14102
  }
14063
14103
  }
14104
+ // eslint-disable-next-line react-hooks/exhaustive-deps
14064
14105
  }, []);
14065
14106
  // Render ----------------------------------------------------------------------------------------------------------
14066
14107
  var today = dayjs__default["default"]().startOf('date');
@@ -14167,6 +14208,7 @@ var PrivateTimeSelect = React__default["default"].forwardRef(function (_a, ref)
14167
14208
  if (value != null) {
14168
14209
  scrollToValue(value);
14169
14210
  }
14211
+ // eslint-disable-next-line react-hooks/exhaustive-deps
14170
14212
  }, []);
14171
14213
  // LayoutEffect ----------------------------------------------------------------------------------------------------
14172
14214
  React.useLayoutEffect(function () {
@@ -14237,24 +14279,14 @@ var PrivateStaticDatePicker = React__default["default"].forwardRef(function (_a,
14237
14279
  var _c = React.useState(null), activeMonthValue = _c[0], setActiveMonthValue = _c[1];
14238
14280
  var _d = React.useState(false), yearSelectOpen = _d[0], setYearSelectOpen = _d[1];
14239
14281
  var _e = React.useState(false), monthSelectOpen = _e[0], setMonthSelectOpen = _e[1];
14240
- var hours = useAutoUpdateState$1(React.useCallback(function () {
14241
- return initHours || DEFAULT_HOURS;
14242
- }, [initHours]))[0];
14243
- var minutes = useAutoUpdateState$1(React.useCallback(function () {
14244
- return initMinutes || DEFAULT_MINUTES;
14245
- }, [initMinutes]))[0];
14246
- var seconds = useAutoUpdateState$1(React.useCallback(function () {
14247
- return initSeconds || DEFAULT_SECONDS;
14248
- }, [initSeconds]))[0];
14249
- var availableDate = useAutoUpdateState$1(React.useCallback(function () {
14250
- if (initAvailableDate) {
14251
- return initAvailableDate;
14252
- }
14253
- else {
14254
- return makeAvailableDate(minDate, maxDate, !!disablePast, !!disableFuture);
14255
- }
14256
- }, [initAvailableDate, minDate, maxDate, disablePast, disableFuture]))[0];
14257
- var disableHours = useAutoUpdateState$1(React.useCallback(function () {
14282
+ // Memo --------------------------------------------------------------------------------------------------------------
14283
+ var hours = React.useMemo(function () { return initHours || DEFAULT_HOURS; }, [initHours]);
14284
+ var minutes = React.useMemo(function () { return initMinutes || DEFAULT_MINUTES; }, [initMinutes]);
14285
+ var seconds = React.useMemo(function () { return initSeconds || DEFAULT_SECONDS; }, [initSeconds]);
14286
+ var availableDate = React.useMemo(function () {
14287
+ return initAvailableDate ? initAvailableDate : makeAvailableDate(minDate, maxDate, !!disablePast, !!disableFuture);
14288
+ }, [initAvailableDate, minDate, maxDate, disablePast, disableFuture]);
14289
+ var disableHours = React.useMemo(function () {
14258
14290
  var newDisableHours = [];
14259
14291
  if (time && value && (availableDate[0] || availableDate[1])) {
14260
14292
  hours.forEach(function (h) {
@@ -14264,8 +14296,8 @@ var PrivateStaticDatePicker = React__default["default"].forwardRef(function (_a,
14264
14296
  });
14265
14297
  }
14266
14298
  return newDisableHours;
14267
- }, [time, value, availableDate, hours]))[0];
14268
- var disableMinutes = useAutoUpdateState$1(React.useCallback(function () {
14299
+ }, [time, value, availableDate, hours]);
14300
+ var disableMinutes = React.useMemo(function () {
14269
14301
  var newDisableMinutes = [];
14270
14302
  if (time === 'minute' || time === 'second') {
14271
14303
  if (value && (availableDate[0] || availableDate[1])) {
@@ -14277,8 +14309,8 @@ var PrivateStaticDatePicker = React__default["default"].forwardRef(function (_a,
14277
14309
  }
14278
14310
  }
14279
14311
  return newDisableMinutes;
14280
- }, [time, value, availableDate, minutes]))[0];
14281
- var disableSeconds = useAutoUpdateState$1(React.useCallback(function () {
14312
+ }, [time, value, availableDate, minutes]);
14313
+ var disableSeconds = React.useMemo(function () {
14282
14314
  var newDisableSeconds = [];
14283
14315
  if (time === 'second') {
14284
14316
  if (value && (availableDate[0] || availableDate[1])) {
@@ -14290,7 +14322,7 @@ var PrivateStaticDatePicker = React__default["default"].forwardRef(function (_a,
14290
14322
  }
14291
14323
  }
14292
14324
  return newDisableSeconds;
14293
- }, [time, value, availableDate, seconds]))[0];
14325
+ }, [time, value, availableDate, seconds]);
14294
14326
  // Effect ----------------------------------------------------------------------------------------------------------
14295
14327
  React.useEffect(function () {
14296
14328
  if (!yearSelectOpen) {
@@ -14314,12 +14346,10 @@ var PrivateStaticDatePicker = React__default["default"].forwardRef(function (_a,
14314
14346
  };
14315
14347
  return ArrowButton;
14316
14348
  })[0];
14317
- var components = useAutoUpdateState$1(React.useCallback(function () {
14318
- return {
14319
- LeftArrowButton: LeftArrowButton,
14320
- RightArrowButton: RightArrowButton,
14321
- };
14322
- }, [LeftArrowButton, RightArrowButton]))[0];
14349
+ var components = React.useMemo(function () { return ({
14350
+ LeftArrowButton: LeftArrowButton,
14351
+ RightArrowButton: RightArrowButton,
14352
+ }); }, [LeftArrowButton, RightArrowButton]);
14323
14353
  // Function --------------------------------------------------------------------------------------------------------
14324
14354
  var previousMonth = React.useCallback(function () {
14325
14355
  if (leftArrowOnClickRef.current) {
@@ -14396,7 +14426,7 @@ var PrivateStaticDatePicker = React__default["default"].forwardRef(function (_a,
14396
14426
  }
14397
14427
  onChange('action_date', finalDate, finalDate.format(inputFormat));
14398
14428
  } }, label));
14399
- }, [type, time, onChange, inputFormat, availableDate, timeSelectScrollToDate]);
14429
+ }, [type, time, onChange, inputFormat, availableDate]);
14400
14430
  // Render ----------------------------------------------------------------------------------------------------------
14401
14431
  return (React__default["default"].createElement(material.Grid, { container: true, className: classNames$1('PrivateStaticDatePicker', type) },
14402
14432
  type !== 'time' && (React__default["default"].createElement(material.Grid, { item: true },
@@ -14534,49 +14564,48 @@ styleInject(css_248z$5);var PrivateDatePicker = React__default["default"].forwar
14534
14564
  var openValueRef = React.useRef(null);
14535
14565
  // FormState -------------------------------------------------------------------------------------------------------
14536
14566
  var _b = useFormState(), formVariant = _b.variant, formSize = _b.size, formColor = _b.color, formFocused = _b.focused, formLabelShrink = _b.labelShrink, formFullWidth = _b.fullWidth, formColWithHelperText = _b.formColWithHelperText, onAddValueItem = _b.onAddValueItem, onRemoveValueItem = _b.onRemoveValueItem, onValueChange = _b.onValueChange, onValueChangeByUser = _b.onValueChangeByUser, onRequestSearchSubmit = _b.onRequestSearchSubmit;
14537
- // State - FormState -----------------------------------------------------------------------------------------------
14538
- var variant = useAutoUpdateState$1(initVariant || formVariant)[0];
14539
- var size = useAutoUpdateState$1(initSize || formSize)[0];
14540
- var color = useAutoUpdateState$1(initColor || formColor)[0];
14541
- var focused = useAutoUpdateState$1(initFocused || formFocused)[0];
14542
- var labelShrink = useAutoUpdateState$1(initLabelShrink || formLabelShrink)[0];
14543
- var fullWidth = useAutoUpdateState$1(initFullWidth == null ? formFullWidth : initFullWidth)[0];
14567
+ // Memo - FormState ------------------------------------------------------------------------------------------------
14568
+ var variant = React.useMemo(function () { return (initVariant == null ? formVariant : initVariant); }, [initVariant, formVariant]);
14569
+ var size = React.useMemo(function () { return (initSize == null ? formSize : initSize); }, [initSize, formSize]);
14570
+ var color = React.useMemo(function () { return (initColor == null ? formColor : initColor); }, [initColor, formColor]);
14571
+ var focused = React.useMemo(function () { return (initFocused == null ? formFocused : initFocused); }, [initFocused, formFocused]);
14572
+ var labelShrink = React.useMemo(function () { return (initLabelShrink == null ? formLabelShrink : initLabelShrink); }, [initLabelShrink, formLabelShrink]);
14573
+ var fullWidth = React.useMemo(function () { return (initFullWidth == null ? formFullWidth : initFullWidth); }, [initFullWidth, formFullWidth]);
14544
14574
  // State - open ----------------------------------------------------------------------------------------------------
14545
14575
  var _c = React.useState(false), open = _c[0], setOpen = _c[1];
14546
14576
  // State -----------------------------------------------------------------------------------------------------------
14547
- var _d = useAutoUpdateState$1(initError), error = _d[0], setError = _d[1];
14577
+ var _d = useAutoUpdateLayoutState(initError), error = _d[0], setError = _d[1];
14548
14578
  var _e = React.useState(null), timeError = _e[0], setTimeError = _e[1];
14549
- var _f = useAutoUpdateState$1(initHelperText), helperText = _f[0], setHelperText = _f[1];
14550
- var _g = useAutoUpdateState$1(initDisabled), disabled = _g[0], setDisabled = _g[1];
14551
- var label = useAutoUpdateState$1(React.useCallback(function () {
14579
+ var _f = useAutoUpdateLayoutState(initHelperText), helperText = _f[0], setHelperText = _f[1];
14580
+ var _g = useAutoUpdateLayoutState(initDisabled), disabled = _g[0], setDisabled = _g[1];
14581
+ // Memo --------------------------------------------------------------------------------------------------------------
14582
+ var label = React.useMemo(function () {
14552
14583
  if (labelIcon) {
14553
14584
  return React__default["default"].createElement(IconText, { icon: labelIcon }, initLabel);
14554
14585
  }
14555
14586
  else {
14556
14587
  return initLabel;
14557
14588
  }
14558
- }, [initLabel, labelIcon]))[0];
14559
- var format = useAutoUpdateState$1(React.useCallback(function () {
14589
+ }, [initLabel, labelIcon]);
14590
+ var format = React.useMemo(function () {
14560
14591
  if (initFormat) {
14561
14592
  return initFormat;
14562
14593
  }
14563
14594
  else {
14564
14595
  return getDateTimeFormat(type, time);
14565
14596
  }
14566
- }, [type, time, initFormat]))[0];
14567
- var formValueFormat = useAutoUpdateState$1(React.useCallback(function () {
14597
+ }, [initFormat, time, type]);
14598
+ var formValueFormat = React.useMemo(function () {
14568
14599
  if (initFormValueFormat) {
14569
14600
  return initFormValueFormat;
14570
14601
  }
14571
14602
  else {
14572
14603
  return getDateTimeFormValueFormat(type, time);
14573
14604
  }
14574
- }, [time, initFormValueFormat]))[0];
14575
- var availableDate = useAutoUpdateState$1(React.useCallback(function () {
14576
- return makeAvailableDate(minDate, maxDate, !!disablePast, !!disableFuture);
14577
- }, [minDate, maxDate, disablePast, disableFuture]))[0];
14605
+ }, [initFormValueFormat, time, type]);
14606
+ var availableDate = React.useMemo(function () { return makeAvailableDate(minDate, maxDate, !!disablePast, !!disableFuture); }, [disableFuture, disablePast, maxDate, minDate]);
14578
14607
  // State - style ---------------------------------------------------------------------------------------------------
14579
- var style = useAutoUpdateState$1(React.useCallback(function () {
14608
+ var style = useAutoUpdateLayoutState(React.useCallback(function () {
14580
14609
  if (width != null) {
14581
14610
  return __assign$4(__assign$4({}, initStyle), { width: width });
14582
14611
  }
@@ -14598,6 +14627,7 @@ styleInject(css_248z$5);var PrivateDatePicker = React__default["default"].forwar
14598
14627
  onChange(value);
14599
14628
  onValueChange(name, value);
14600
14629
  }
14630
+ // eslint-disable-next-line react-hooks/exhaustive-deps
14601
14631
  }, []);
14602
14632
  useFirstSkipEffect$1(function () {
14603
14633
  if (error)
@@ -14633,7 +14663,7 @@ styleInject(css_248z$5);var PrivateDatePicker = React__default["default"].forwar
14633
14663
  }
14634
14664
  }, [open]);
14635
14665
  React.useEffect(function () {
14636
- if (time && value && (availableDate[0] || availableDate[1])) {
14666
+ if (type !== 'time' && time && value && (availableDate[0] || availableDate[1])) {
14637
14667
  var availableDateVal = getAvailableDateVal(availableDate, type, time);
14638
14668
  var valueVal = getDateValForAvailableDate(value, type, time);
14639
14669
  var timeError_1 = null;
@@ -14648,12 +14678,18 @@ styleInject(css_248z$5);var PrivateDatePicker = React__default["default"].forwar
14648
14678
  else {
14649
14679
  setTimeError(null);
14650
14680
  }
14681
+ // eslint-disable-next-line react-hooks/exhaustive-deps
14651
14682
  }, [value]);
14652
14683
  // Function - focus ------------------------------------------------------------------------------------------------
14653
14684
  var focus = React.useCallback(function () {
14654
14685
  var _a;
14655
14686
  (_a = textFieldInputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
14656
14687
  }, [textFieldInputRef]);
14688
+ // Function - setErrorHelperText -----------------------------------------------------------------------------------
14689
+ var setErrorHelperText = React.useCallback(function (error, helperText) {
14690
+ setError(error);
14691
+ setHelperText(helperText);
14692
+ }, [setError, setHelperText]);
14657
14693
  // Function - validate ---------------------------------------------------------------------------------------------
14658
14694
  var validate = React.useCallback(function (value) {
14659
14695
  if (required && empty$1(value)) {
@@ -14681,12 +14717,7 @@ styleInject(css_248z$5);var PrivateDatePicker = React__default["default"].forwar
14681
14717
  }
14682
14718
  setErrorHelperText(false, initHelperText);
14683
14719
  return true;
14684
- }, [required, onValidate, initHelperText, datePickerErrorRef, timeError]);
14685
- // Function - setErrorHelperText -----------------------------------------------------------------------------------
14686
- var setErrorHelperText = React.useCallback(function (error, helperText) {
14687
- setError(error);
14688
- setHelperText(helperText);
14689
- }, []);
14720
+ }, [required, timeError, onValidate, setErrorHelperText, initHelperText]);
14690
14721
  // Commands --------------------------------------------------------------------------------------------------------
14691
14722
  React.useLayoutEffect(function () {
14692
14723
  if (ref || onAddValueItem) {
@@ -14755,6 +14786,11 @@ styleInject(css_248z$5);var PrivateDatePicker = React__default["default"].forwar
14755
14786
  ref,
14756
14787
  onAddValueItem,
14757
14788
  onRemoveValueItem,
14789
+ id,
14790
+ setValue,
14791
+ setDisabled,
14792
+ setErrorHelperText,
14793
+ initHelperText,
14758
14794
  ]);
14759
14795
  // Event Handler ---------------------------------------------------------------------------------------------------
14760
14796
  var handleChange = React.useCallback(function (unit, newValue, keyboardInputValue) {
@@ -14769,7 +14805,7 @@ styleInject(css_248z$5);var PrivateDatePicker = React__default["default"].forwar
14769
14805
  }
14770
14806
  var finalValue = newValue;
14771
14807
  if (updateValue) {
14772
- if (finalValue != null && keyboardInputValue == null) {
14808
+ if (type !== 'time' && finalValue != null && keyboardInputValue == null) {
14773
14809
  var checkResult = checkDateAvailable(finalValue, availableDate, type, time);
14774
14810
  if (checkResult !== 'available') {
14775
14811
  var availableDateDate = getAvailableDate(availableDate, type, time);
@@ -14819,7 +14855,7 @@ styleInject(css_248z$5);var PrivateDatePicker = React__default["default"].forwar
14819
14855
  }
14820
14856
  }
14821
14857
  setInputValue(finalValue);
14822
- }, [name, type, time, availableDate, open, value]);
14858
+ }, [type, time, setValue, availableDate, open, onValueChangeByUser, name, onRequestSearchSubmit]);
14823
14859
  var handleContainerFocus = React.useCallback(function () {
14824
14860
  if (closeTimeoutRef.current) {
14825
14861
  clearTimeout(closeTimeoutRef.current);
@@ -14963,7 +14999,7 @@ FormTimePicker.defaultProps = FormTimePickerDefaultProps;var FormDateRangePicker
14963
14999
  styleInject(css_248z$4);var CustomDatePicker = React__default["default"].forwardRef(function (_a, ref) {
14964
15000
  // State -----------------------------------------------------------------------------------------------------------
14965
15001
  var selectType = _a.selectType, initValue = _a.value, focusedDate = _a.focusedDate, month = _a.month, disableFuture = _a.disableFuture, disablePast = _a.disablePast, minDate = _a.minDate, maxDate = _a.maxDate, onValueChange = _a.onValueChange, onMouseEnterPickersDay = _a.onMouseEnterPickersDay, onMonthChange = _a.onMonthChange;
14966
- var value = useAutoUpdateState$1(React.useCallback(function () {
15002
+ var value = useAutoUpdateLayoutState(React.useCallback(function () {
14967
15003
  return initValue ? initValue : [null, null];
14968
15004
  }, [initValue]))[0];
14969
15005
  var _b = React.useState(null), activeMonthValue = _b[0], setActiveMonthValue = _b[1];
@@ -14984,18 +15020,16 @@ styleInject(css_248z$4);var CustomDatePicker = React__default["default"].forward
14984
15020
  };
14985
15021
  return ArrowButton;
14986
15022
  })[0];
14987
- var components = useAutoUpdateState$1(React.useCallback(function () {
14988
- return {
14989
- LeftArrowButton: LeftArrowButton,
14990
- RightArrowButton: RightArrowButton,
14991
- };
14992
- }, [LeftArrowButton, RightArrowButton]))[0];
15023
+ var components = React.useMemo(function () { return ({
15024
+ LeftArrowButton: LeftArrowButton,
15025
+ RightArrowButton: RightArrowButton,
15026
+ }); }, [LeftArrowButton, RightArrowButton]);
14993
15027
  //--------------------------------------------------------------------------------------------------------------------
14994
15028
  var getDateVal = React.useCallback(function (date) {
14995
15029
  return Number(date.format('YYYYMMDD'));
14996
15030
  }, []);
14997
15031
  //--------------------------------------------------------------------------------------------------------------------
14998
- var baseClassNames = useAutoUpdateState$1(React.useCallback(function () {
15032
+ var baseClassNames = React.useMemo(function () {
14999
15033
  var newValue = {};
15000
15034
  var lastDayOfMonth = month.endOf('month').date();
15001
15035
  var now = dayjs__default["default"](month);
@@ -15011,8 +15045,8 @@ styleInject(css_248z$4);var CustomDatePicker = React__default["default"].forward
15011
15045
  newValue[nowVal] = className;
15012
15046
  }
15013
15047
  return newValue;
15014
- }, [month]))[0];
15015
- var selectedClassNames = useAutoUpdateState$1(React.useCallback(function () {
15048
+ }, [getDateVal, month]);
15049
+ var selectedClassNames = React.useMemo(function () {
15016
15050
  var newValue = {};
15017
15051
  var startDateVal = value[0] ? getDateVal(value[0]) : null;
15018
15052
  var endDateVal = value[1] ? getDateVal(value[1]) : null;
@@ -15036,8 +15070,8 @@ styleInject(css_248z$4);var CustomDatePicker = React__default["default"].forward
15036
15070
  newValue[nowVal] = className;
15037
15071
  }
15038
15072
  return newValue;
15039
- }, [month, value]))[0];
15040
- var focusedClassNames = useAutoUpdateState$1(React.useCallback(function () {
15073
+ }, [getDateVal, month, value]);
15074
+ var focusedClassNames = React.useMemo(function () {
15041
15075
  var newValue = {};
15042
15076
  var startDateVal = value[0] ? getDateVal(value[0]) : null;
15043
15077
  var endDateVal = value[1] ? getDateVal(value[1]) : null;
@@ -15081,7 +15115,7 @@ styleInject(css_248z$4);var CustomDatePicker = React__default["default"].forward
15081
15115
  }
15082
15116
  }
15083
15117
  return newValue;
15084
- }, [selectType, month, value, focusedDate]))[0];
15118
+ }, [value, getDateVal, focusedDate, month, selectType]);
15085
15119
  //--------------------------------------------------------------------------------------------------------------------
15086
15120
  var previousMonth = React.useCallback(function () {
15087
15121
  if (leftArrowOnClickRef.current) {
@@ -15131,7 +15165,7 @@ styleInject(css_248z$4);var CustomDatePicker = React__default["default"].forward
15131
15165
  React__default["default"].createElement("div", { className: classNames$1('focused-bg', baseClassName, focusedClassName) }),
15132
15166
  React__default["default"].createElement("div", { className: classNames$1('selected-bg', baseClassName, selectedClassName) }),
15133
15167
  React__default["default"].createElement(xDatePickers.PickersDay, __assign$4({}, pickersDayProps, { disableMargin: true, selected: date.isSame(startDate, 'date') || date.isSame(endDate, 'date'), onMouseEnter: value[0] || value[1] ? function () { return onMouseEnterPickersDay && onMouseEnterPickersDay(date); } : undefined }))));
15134
- }, [value, baseClassNames, selectedClassNames, focusedClassNames]);
15168
+ }, [value, getDateVal, baseClassNames, selectedClassNames, focusedClassNames, onMouseEnterPickersDay]);
15135
15169
  return (React__default["default"].createElement(xDatePickers.StaticDatePicker, { className: 'CustomDatePicker', displayStaticWrapperAs: 'desktop', components: components, value: activeMonthValue, defaultCalendarMonth: month, disableFuture: disableFuture, disablePast: disablePast, minDate: minDate, maxDate: maxDate, onChange: function (newValue) { return onValueChange && onValueChange(selectType, newValue); }, renderDay: handleRenderDay, renderInput: function (params) { return React__default["default"].createElement(material.TextField, __assign$4({}, params)); }, inputFormat: 'YYYY-MM-DD HH:mm:ss', onMonthChange: function (month) {
15136
15170
  if (onMonthChange)
15137
15171
  onMonthChange(month);
@@ -15157,17 +15191,13 @@ var CustomDatePickerContainer = React__default["default"].forwardRef(function (_
15157
15191
  var datePicker3Ref = React.useRef(null);
15158
15192
  var yearSelectRef = React.useRef(null);
15159
15193
  var activeYearBtnRef = React.useRef(null);
15160
- // State -----------------------------------------------------------------------------------------------------------
15194
+ // Memo --------------------------------------------------------------------------------------------------------------
15161
15195
  var _b = React.useState(), focusedDate = _b[0], setFocusedDate = _b[1];
15162
15196
  var _c = React.useState(0), yearMonthSelectIndex = _c[0], setYearMonthSelectIndex = _c[1];
15163
15197
  var _d = React.useState(false), yearSelectOpen = _d[0], setYearSelectOpen = _d[1];
15164
15198
  var _e = React.useState(false), monthSelectOpen = _e[0], setMonthSelectOpen = _e[1];
15165
- var customDatePickerProps = useAutoUpdateState$1(React.useCallback(function () {
15166
- return { selectType: selectType, value: value, minDate: minDate, maxDate: maxDate, disableFuture: disableFuture, disablePast: disablePast, onValueChange: onValueChange };
15167
- }, [selectType, value, minDate, maxDate, disableFuture, disablePast, onValueChange]))[0];
15168
- var availableDate = useAutoUpdateState$1(React.useCallback(function () {
15169
- return makeAvailableDate(minDate, maxDate, !!disablePast, !!disableFuture);
15170
- }, [minDate, maxDate, disablePast, disableFuture]))[0];
15199
+ var customDatePickerProps = React.useMemo(function () { return ({ selectType: selectType, value: value, minDate: minDate, maxDate: maxDate, disableFuture: disableFuture, disablePast: disablePast, onValueChange: onValueChange }); }, [selectType, value, minDate, maxDate, disableFuture, disablePast, onValueChange]);
15200
+ var availableDate = React.useMemo(function () { return makeAvailableDate(minDate, maxDate, !!disablePast, !!disableFuture); }, [minDate, maxDate, disablePast, disableFuture]);
15171
15201
  // Effect ----------------------------------------------------------------------------------------------------------
15172
15202
  React.useEffect(function () {
15173
15203
  if (yearSelectOpen) {
@@ -15208,7 +15238,7 @@ var CustomDatePickerContainer = React__default["default"].forwardRef(function (_
15208
15238
  if (onMonthsChange) {
15209
15239
  onMonthsChange([date, date.add(1, 'month'), date.add(2, 'month')]);
15210
15240
  }
15211
- }, []);
15241
+ }, [onMonthsChange]);
15212
15242
  var handleYearSelectClick = React.useCallback(function (index) {
15213
15243
  if (yearSelectOpen) {
15214
15244
  setYearSelectOpen(false);
@@ -15245,11 +15275,11 @@ var CustomDatePickerContainer = React__default["default"].forwardRef(function (_
15245
15275
  activeMonth(months[yearMonthSelectIndex].set('year', year).subtract(yearMonthSelectIndex, 'month'));
15246
15276
  setYearSelectOpen(false);
15247
15277
  setMonthSelectOpen(true);
15248
- }, [months, yearMonthSelectIndex]);
15278
+ }, [activeMonth, months, yearMonthSelectIndex]);
15249
15279
  var handleMonthSelect = React.useCallback(function (m) {
15250
15280
  activeMonth(months[yearMonthSelectIndex].set('month', m).subtract(yearMonthSelectIndex, 'month'));
15251
15281
  setMonthSelectOpen(false);
15252
- }, [months, yearMonthSelectIndex]);
15282
+ }, [activeMonth, months, yearMonthSelectIndex]);
15253
15283
  // Commands --------------------------------------------------------------------------------------------------------
15254
15284
  React.useLayoutEffect(function () {
15255
15285
  if (ref) {
@@ -15283,7 +15313,7 @@ var CustomDatePickerContainer = React__default["default"].forwardRef(function (_
15283
15313
  React__default["default"].createElement(material.Button, { variant: 'text', className: monthSelectOpen && yearMonthSelectIndex === index ? 'active' : undefined, onClick: function () { return handleMonthSelectClick(index); } },
15284
15314
  months[index].format('M월'),
15285
15315
  React__default["default"].createElement(material.Icon, null, monthSelectOpen && yearMonthSelectIndex === index ? 'arrow_drop_up' : 'arrow_drop_down'))));
15286
- }, [months, yearSelectOpen, monthSelectOpen, yearMonthSelectIndex]);
15316
+ }, [yearSelectOpen, yearMonthSelectIndex, months, monthSelectOpen, handleYearSelectClick, handleMonthSelectClick]);
15287
15317
  // Render - Function -----------------------------------------------------------------------------------------------
15288
15318
  var getActionButton = React.useCallback(function (startDate, endDate, label) {
15289
15319
  var availableDateDate = getAvailableDate(availableDate, 'date');
@@ -15309,7 +15339,8 @@ var CustomDatePickerContainer = React__default["default"].forwardRef(function (_
15309
15339
  onChange([finalStartDate, finalEndDate]);
15310
15340
  } }, label));
15311
15341
  }, [onChange, availableDate]);
15312
- var actionButtons = useAutoUpdateState$1(React.useCallback(function () {
15342
+ // Render ----------------------------------------------------------------------------------------------------------
15343
+ var actionButtons = React.useMemo(function () {
15313
15344
  var now = dayjs__default["default"]().startOf('d');
15314
15345
  var lastWeek = now.subtract(1, 'week');
15315
15346
  var dayOfWeek = now.day();
@@ -15332,8 +15363,7 @@ var CustomDatePickerContainer = React__default["default"].forwardRef(function (_
15332
15363
  getActionButton(thisWeekDate[0], thisWeekDate[1], '이번주'),
15333
15364
  getActionButton(now.subtract(1, 'd'), now.subtract(1, 'd'), '어제'),
15334
15365
  getActionButton(now, now, '오늘')));
15335
- }, [getActionButton]))[0];
15336
- // Render ----------------------------------------------------------------------------------------------------------
15366
+ }, [getActionButton]);
15337
15367
  return (React__default["default"].createElement("div", { className: 'CustomDatePickerContainer' },
15338
15368
  React__default["default"].createElement(material.Grid, { container: true, direction: 'column' },
15339
15369
  !yearSelectOpen && !monthSelectOpen && (React__default["default"].createElement(material.Grid, { item: true },
@@ -15411,19 +15441,19 @@ styleInject(css_248z$2);var InputDatePicker = function (_a) {
15411
15441
  //--------------------------------------------------------------------------------------------------------------------
15412
15442
  className = _a.className, style = _a.style, value = _a.value, initLabel = _a.label, labelIcon = _a.labelIcon, inputRef = _a.inputRef, format = _a.format, error = _a.error, icon = _a.icon, startAdornment = _a.startAdornment, endAdornment = _a.endAdornment, align = _a.align, readOnlyInput = _a.readOnlyInput, onFocus = _a.onFocus, onBlur = _a.onBlur, props = __rest$2(_a, ["variant", "size", "color", "focused", "fullWidth", "disabled", "readOnly", "required", "labelShrink", "className", "style", "value", "label", "labelIcon", "inputRef", "format", "error", "icon", "startAdornment", "endAdornment", "align", "readOnlyInput", "onFocus", "onBlur"]);
15413
15443
  var id = React.useId();
15414
- // State -----------------------------------------------------------------------------------------------------------
15415
- var label = useAutoUpdateState$1(React.useCallback(function () {
15444
+ // Memo --------------------------------------------------------------------------------------------------------------
15445
+ var label = React.useMemo(function () {
15416
15446
  return labelIcon ? (React__default["default"].createElement(React__default["default"].Fragment, null,
15417
15447
  React__default["default"].createElement(FormIcon, { style: { verticalAlign: 'middle', marginRight: 4 } }, labelIcon),
15418
15448
  React__default["default"].createElement("span", { style: { verticalAlign: 'middle' } }, initLabel))) : (initLabel);
15419
- }, [initLabel, labelIcon]))[0];
15420
- var inputLabelProps = useAutoUpdateState$1(React.useCallback(function () {
15449
+ }, [initLabel, labelIcon]);
15450
+ var inputLabelProps = React.useMemo(function () {
15421
15451
  if (labelShrink) {
15422
15452
  return {
15423
15453
  shrink: true,
15424
15454
  };
15425
15455
  }
15426
- }, [labelShrink]))[0];
15456
+ }, [labelShrink]);
15427
15457
  // Render ----------------------------------------------------------------------------------------------------------
15428
15458
  return (React__default["default"].createElement(xDatePickers.DesktopDatePicker, __assign$4({}, props, { className: classNames$1(className, 'InputDatePicker', "align-".concat(align)), open: false, value: value, inputFormat: format, disabled: disabled, readOnly: readOnly || readOnlyInput, renderInput: function (_a) {
15429
15459
  var inputStyle = _a.style, inputInputRef = _a.inputRef, inputInputProps = _a.InputProps, inputError = _a.error, inputOnFocus = _a.onFocus, inputOnBlur = _a.onBlur, params = __rest$2(_a, ["style", "inputRef", "InputProps", "error", "onFocus", "onBlur"]);
@@ -15473,13 +15503,13 @@ var FormDateRangePicker = React__default["default"].forwardRef(function (_a, ref
15473
15503
  var id = React.useId();
15474
15504
  // FormState -------------------------------------------------------------------------------------------------------
15475
15505
  var _b = useFormState(), formVariant = _b.variant, formSize = _b.size, formColor = _b.color, formFocused = _b.focused, formLabelShrink = _b.labelShrink, formFullWidth = _b.fullWidth, formColWithHelperText = _b.formColWithHelperText, onAddValueItem = _b.onAddValueItem, onRemoveValueItem = _b.onRemoveValueItem, onValueChange = _b.onValueChange, onValueChangeByUser = _b.onValueChangeByUser, onRequestSearchSubmit = _b.onRequestSearchSubmit;
15476
- // State - FormState -----------------------------------------------------------------------------------------------
15477
- var variant = useAutoUpdateState$1(initVariant || formVariant)[0];
15478
- var size = useAutoUpdateState$1(initSize || formSize)[0];
15479
- var color = useAutoUpdateState$1(initColor || formColor)[0];
15480
- var focused = useAutoUpdateState$1(initFocused || formFocused)[0];
15481
- var labelShrink = useAutoUpdateState$1(initLabelShrink || formLabelShrink)[0];
15482
- var fullWidth = useAutoUpdateState$1(initFullWidth == null ? formFullWidth : initFullWidth)[0];
15506
+ // Memo - FormState ------------------------------------------------------------------------------------------------
15507
+ var variant = React.useMemo(function () { return (initVariant == null ? formVariant : initVariant); }, [initVariant, formVariant]);
15508
+ var size = React.useMemo(function () { return (initSize == null ? formSize : initSize); }, [initSize, formSize]);
15509
+ var color = React.useMemo(function () { return (initColor == null ? formColor : initColor); }, [initColor, formColor]);
15510
+ var focused = React.useMemo(function () { return (initFocused == null ? formFocused : initFocused); }, [initFocused, formFocused]);
15511
+ var labelShrink = React.useMemo(function () { return (initLabelShrink == null ? formLabelShrink : initLabelShrink); }, [initLabelShrink, formLabelShrink]);
15512
+ var fullWidth = React.useMemo(function () { return (initFullWidth == null ? formFullWidth : initFullWidth); }, [initFullWidth, formFullWidth]);
15483
15513
  // Ref -------------------------------------------------------------------------------------------------------------
15484
15514
  var containerRef = React.useRef(null);
15485
15515
  var startDateTextFieldRef = React.useRef();
@@ -15490,10 +15520,13 @@ var FormDateRangePicker = React__default["default"].forwardRef(function (_a, ref
15490
15520
  var endInputDatePickerErrorRef = React.useRef(null);
15491
15521
  var openValueRef = React.useRef();
15492
15522
  // State -----------------------------------------------------------------------------------------------------------
15493
- var _c = useAutoUpdateState$1(initError), error = _c[0], setError = _c[1];
15523
+ var _c = useAutoUpdateLayoutState(initError), error = _c[0], setError = _c[1];
15494
15524
  var _d = React.useState(false), startError = _d[0], setStartError = _d[1];
15495
15525
  var _e = React.useState(false), endError = _e[0], setEndError = _e[1];
15496
- var _f = useAutoUpdateState$1(initDisabled), disabled = _f[0], setDisabled = _f[1];
15526
+ var _f = useAutoUpdateLayoutState(initDisabled), disabled = _f[0], setDisabled = _f[1];
15527
+ var _g = useAutoUpdateLayoutState(initHelperText), helperText = _g[0], setHelperText = _g[1];
15528
+ // Memo --------------------------------------------------------------------------------------------------------------
15529
+ var format = React.useMemo(function () { return initFormat || DEFAULT_FORMAT; }, [initFormat]);
15497
15530
  // Function - getFinalValue ----------------------------------------------------------------------------------------
15498
15531
  var getFinalValue = React.useCallback(function (value) {
15499
15532
  return value || DEFAULT_VALUE;
@@ -15511,7 +15544,20 @@ var FormDateRangePicker = React__default["default"].forwardRef(function (_a, ref
15511
15544
  else {
15512
15545
  (_b = startDateTextFieldRef.current) === null || _b === void 0 ? void 0 : _b.focus();
15513
15546
  }
15514
- }, [error, startError, endError, startDateTextFieldRef, endDateTextFieldRef]);
15547
+ }, [endError, startDateTextFieldRef, endDateTextFieldRef]);
15548
+ // Function - setErrorHelperText -----------------------------------------------------------------------------------
15549
+ var setErrorHelperText = React.useCallback(function (error, helperText) {
15550
+ setError(error);
15551
+ setHelperText(helperText);
15552
+ }, [setError, setHelperText]);
15553
+ var setStartErrorHelperText = React.useCallback(function (error, helperText) {
15554
+ setStartError(error);
15555
+ setHelperText(helperText);
15556
+ }, [setHelperText]);
15557
+ var setEndErrorHelperText = React.useCallback(function (error, helperText) {
15558
+ setEndError(error);
15559
+ setHelperText(helperText);
15560
+ }, [setHelperText]);
15515
15561
  // Function - validate ---------------------------------------------------------------------------------------------
15516
15562
  var validate = React.useCallback(function (value) {
15517
15563
  var _a, _b;
@@ -15573,20 +15619,18 @@ var FormDateRangePicker = React__default["default"].forwardRef(function (_a, ref
15573
15619
  setStartError(false);
15574
15620
  setEndError(false);
15575
15621
  return true;
15576
- }, [required, requiredStart, requiredEnd, startError, endError, allowSingleSelect, onValidate, initHelperText]);
15577
- // Function - setErrorHelperText -----------------------------------------------------------------------------------
15578
- var setErrorHelperText = React.useCallback(function (error, helperText) {
15579
- setError(error);
15580
- setHelperText(helperText);
15581
- }, []);
15582
- var setStartErrorHelperText = React.useCallback(function (error, helperText) {
15583
- setStartError(error);
15584
- setHelperText(helperText);
15585
- }, []);
15586
- var setEndErrorHelperText = React.useCallback(function (error, helperText) {
15587
- setEndError(error);
15588
- setHelperText(helperText);
15589
- }, []);
15622
+ }, [
15623
+ required,
15624
+ requiredStart,
15625
+ requiredEnd,
15626
+ allowSingleSelect,
15627
+ format,
15628
+ onValidate,
15629
+ setErrorHelperText,
15630
+ initHelperText,
15631
+ setStartErrorHelperText,
15632
+ setEndErrorHelperText,
15633
+ ]);
15590
15634
  // Function activeMonth --------------------------------------------------------------------------------------------
15591
15635
  var activeMonth = React.useCallback(function (month) {
15592
15636
  var _a;
@@ -15594,44 +15638,31 @@ var FormDateRangePicker = React__default["default"].forwardRef(function (_a, ref
15594
15638
  (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.activeMonth(month);
15595
15639
  }, [containerRef]);
15596
15640
  // State -----------------------------------------------------------------------------------------------------------
15597
- var _g = React.useState(false), open = _g[0], setOpen = _g[1];
15598
- var _h = React.useState('start'), selectType = _h[0], setSelectType = _h[1];
15599
- var _j = useAutoUpdateState$1(React.useCallback(function () {
15641
+ var _h = React.useState(false), open = _h[0], setOpen = _h[1];
15642
+ var _j = React.useState('start'), selectType = _j[0], setSelectType = _j[1];
15643
+ var _k = useAutoUpdateLayoutState(React.useCallback(function () {
15600
15644
  return initValue || DEFAULT_VALUE;
15601
- }, [initValue])), value = _j[0], setValue = _j[1];
15602
- var format = useAutoUpdateState$1(React.useCallback(function () {
15603
- return initFormat || DEFAULT_FORMAT;
15604
- }, [initFormat]))[0];
15605
- var calendarCount = useAutoUpdateState$1(initCalendarCount || 2)[0];
15606
- var _k = useAutoUpdateState$1(initHelperText), helperText = _k[0], setHelperText = _k[1];
15645
+ }, [initValue])), value = _k[0], setValue = _k[1];
15646
+ var calendarCount = useAutoUpdateLayoutState(initCalendarCount || 2)[0];
15607
15647
  var _l = React.useState(function () {
15608
15648
  var now = dayjs__default["default"]();
15609
15649
  return [now, now.add(1, 'month'), now.add(2, 'month')];
15610
15650
  }), months = _l[0], setMonths = _l[1];
15611
- var inputDatePickerProps = useAutoUpdateState$1(React.useCallback(function () {
15612
- return {
15613
- variant: variant,
15614
- size: size,
15615
- color: color,
15616
- labelShrink: labelShrink,
15617
- fullWidth: fullWidth,
15618
- disabled: disabled,
15619
- format: format,
15620
- disablePast: disablePast,
15621
- disableFuture: disableFuture,
15622
- minDate: minDate,
15623
- maxDate: maxDate,
15624
- };
15625
- }, [variant, size, color, labelShrink, fullWidth, disabled, format, disablePast, disableFuture, minDate, maxDate]))[0];
15626
- // State - inputStyle ----------------------------------------------------------------------------------------------
15627
- var inputStyle = useAutoUpdateState$1(React.useCallback(function () {
15628
- if (inputWidth != null) {
15629
- return { width: inputWidth };
15630
- }
15631
- else {
15632
- return { width: fullWidth ? undefined : 150 };
15633
- }
15634
- }, [inputWidth, fullWidth]))[0];
15651
+ // Memo --------------------------------------------------------------------------------------------------------------
15652
+ var inputDatePickerProps = React.useMemo(function () { return ({
15653
+ variant: variant,
15654
+ size: size,
15655
+ color: color,
15656
+ labelShrink: labelShrink,
15657
+ fullWidth: fullWidth,
15658
+ disabled: disabled,
15659
+ format: format,
15660
+ disablePast: disablePast,
15661
+ disableFuture: disableFuture,
15662
+ minDate: minDate,
15663
+ maxDate: maxDate,
15664
+ }); }, [variant, size, color, labelShrink, fullWidth, disabled, format, disablePast, disableFuture, minDate, maxDate]);
15665
+ var inputStyle = React.useMemo(function () { return (inputWidth != null ? { width: inputWidth } : { width: fullWidth ? undefined : 150 }); }, [inputWidth, fullWidth]);
15635
15666
  // Effect ----------------------------------------------------------------------------------------------------------
15636
15667
  React.useEffect(function () {
15637
15668
  if (value !== initValue) {
@@ -15639,6 +15670,7 @@ var FormDateRangePicker = React__default["default"].forwardRef(function (_a, ref
15639
15670
  onChange(value);
15640
15671
  onValueChange(name, value);
15641
15672
  }
15673
+ // eslint-disable-next-line react-hooks/exhaustive-deps
15642
15674
  }, []);
15643
15675
  useFirstSkipEffect$1(function () {
15644
15676
  if (error || startError || endError)
@@ -15688,7 +15720,7 @@ var FormDateRangePicker = React__default["default"].forwardRef(function (_a, ref
15688
15720
  setOpen(false);
15689
15721
  setStartErrorHelperText(false, initHelperText);
15690
15722
  setEndErrorHelperText(false, initHelperText);
15691
- }, []);
15723
+ }, [initHelperText, setEndErrorHelperText, setStartErrorHelperText, setValue]);
15692
15724
  var handleValueChange = React.useCallback(function (selectType, newValue, fromInput) {
15693
15725
  var _a;
15694
15726
  var finalValue;
@@ -15758,14 +15790,17 @@ var FormDateRangePicker = React__default["default"].forwardRef(function (_a, ref
15758
15790
  onValueChangeByUser(name, finalValue);
15759
15791
  });
15760
15792
  }, [
15761
- name,
15793
+ setValue,
15762
15794
  value,
15763
- activeMonth,
15764
15795
  setStartErrorHelperText,
15765
- setEndErrorHelperText,
15766
15796
  initHelperText,
15767
- allowSingleSelect,
15797
+ activeMonth,
15798
+ calendarCount,
15799
+ setEndErrorHelperText,
15768
15800
  open,
15801
+ onRequestSearchSubmit,
15802
+ name,
15803
+ onValueChangeByUser,
15769
15804
  ]);
15770
15805
  var handleInputDatePickerChange = React.useCallback(function (selectType, newValue) {
15771
15806
  var error = false;
@@ -15942,6 +15977,11 @@ var FormDateRangePicker = React__default["default"].forwardRef(function (_a, ref
15942
15977
  ref,
15943
15978
  onAddValueItem,
15944
15979
  onRemoveValueItem,
15980
+ id,
15981
+ setValue,
15982
+ setDisabled,
15983
+ setErrorHelperText,
15984
+ initHelperText,
15945
15985
  ]);
15946
15986
  // Render ----------------------------------------------------------------------------------------------------------
15947
15987
  return (React__default["default"].createElement(xDatePickers.LocalizationProvider, { dateAdapter: AdapterDayjs.AdapterDayjs, adapterLocale: dayjsLocale__default["default"] },
@@ -16033,18 +16073,18 @@ styleInject(css_248z$1);var FormFile = React__default["default"].forwardRef(func
16033
16073
  var id = React.useId();
16034
16074
  // FormState -------------------------------------------------------------------------------------------------------
16035
16075
  var _b = useFormState(), formVariant = _b.variant, formSize = _b.size, formColor = _b.color, formFocused = _b.focused, formLabelShrink = _b.labelShrink, formFullWidth = _b.fullWidth, onAddValueItem = _b.onAddValueItem, onValueChange = _b.onValueChange, onRemoveValueItem = _b.onRemoveValueItem, onValueChangeByUser = _b.onValueChangeByUser;
16036
- // State - FormState -----------------------------------------------------------------------------------------------
16037
- var variant = useAutoUpdateState$1(initVariant || formVariant)[0];
16038
- var size = useAutoUpdateState$1(initSize || formSize)[0];
16039
- var color = useAutoUpdateState$1(initColor || formColor)[0];
16040
- var focused = useAutoUpdateState$1(initFocused || formFocused)[0];
16041
- var labelShrink = useAutoUpdateState$1(initLabelShrink || formLabelShrink)[0];
16042
- var fullWidth = useAutoUpdateState$1(initFullWidth == null ? formFullWidth : initFullWidth)[0];
16076
+ // Memo - FormState ------------------------------------------------------------------------------------------------
16077
+ var variant = React.useMemo(function () { return (initVariant == null ? formVariant : initVariant); }, [initVariant, formVariant]);
16078
+ var size = React.useMemo(function () { return (initSize == null ? formSize : initSize); }, [initSize, formSize]);
16079
+ var color = React.useMemo(function () { return (initColor == null ? formColor : initColor); }, [initColor, formColor]);
16080
+ var focused = React.useMemo(function () { return (initFocused == null ? formFocused : initFocused); }, [initFocused, formFocused]);
16081
+ var labelShrink = React.useMemo(function () { return (initLabelShrink == null ? formLabelShrink : initLabelShrink); }, [initLabelShrink, formLabelShrink]);
16082
+ var fullWidth = React.useMemo(function () { return (initFullWidth == null ? formFullWidth : initFullWidth); }, [initFullWidth, formFullWidth]);
16043
16083
  // Ref -------------------------------------------------------------------------------------------------------------
16044
16084
  var textFieldRef = React.useRef(null);
16045
16085
  var fileUploadBtnRef = React.useRef(null);
16046
16086
  // State - value ---------------------------------------------------------------------------------------------------
16047
- var _c = useAutoUpdateState$1(initValue), value = _c[0], setValue = _c[1];
16087
+ var _c = useAutoUpdateLayoutState(initValue), value = _c[0], setValue = _c[1];
16048
16088
  var fileValue = React.useState('')[0];
16049
16089
  useFirstSkipEffect$1(function () {
16050
16090
  if (error)
@@ -16054,16 +16094,17 @@ styleInject(css_248z$1);var FormFile = React__default["default"].forwardRef(func
16054
16094
  onValueChange(name, value);
16055
16095
  }, [value]);
16056
16096
  // State -----------------------------------------------------------------------------------------------------------
16057
- var _d = useAutoUpdateState$1(initError), error = _d[0], setError = _d[1];
16058
- var _e = useAutoUpdateState$1(initHelperText), helperText = _e[0], setHelperText = _e[1];
16059
- var _f = useAutoUpdateState$1(initDisabled), disabled = _f[0], setDisabled = _f[1];
16097
+ var _d = useAutoUpdateLayoutState(initError), error = _d[0], setError = _d[1];
16098
+ var _e = useAutoUpdateLayoutState(initHelperText), helperText = _e[0], setHelperText = _e[1];
16099
+ var _f = useAutoUpdateLayoutState(initDisabled), disabled = _f[0], setDisabled = _f[1];
16060
16100
  var _g = React.useState(false), isOpenLinkDialog = _g[0], setIsOpenLinkDialog = _g[1];
16061
16101
  var _h = React.useState({ open: false }), alertDialogProps = _h[0], setAlertDialogProps = _h[1];
16062
- var label = useAutoUpdateState$1(React.useCallback(function () {
16102
+ // Memo --------------------------------------------------------------------------------------------------------------
16103
+ var label = React.useMemo(function () {
16063
16104
  return labelIcon ? (React__default["default"].createElement(React__default["default"].Fragment, null,
16064
16105
  React__default["default"].createElement(FormIcon, { style: { verticalAlign: 'middle', marginRight: 4 } }, labelIcon),
16065
16106
  React__default["default"].createElement("span", { style: { verticalAlign: 'middle' } }, initLabel))) : (initLabel);
16066
- }, [initLabel, labelIcon]))[0];
16107
+ }, [initLabel, labelIcon]);
16067
16108
  // Function - focus ------------------------------------------------------------------------------------------------
16068
16109
  var focus = React.useCallback(function () {
16069
16110
  var _a, _b;
@@ -16074,6 +16115,11 @@ styleInject(css_248z$1);var FormFile = React__default["default"].forwardRef(func
16074
16115
  (_b = textFieldRef.current) === null || _b === void 0 ? void 0 : _b.focus();
16075
16116
  }
16076
16117
  }, [hideUrl]);
16118
+ // Function - setErrorHelperText -----------------------------------------------------------------------------------
16119
+ var setErrorHelperText = React.useCallback(function (error, helperText) {
16120
+ setError(error);
16121
+ setHelperText(helperText);
16122
+ }, [setError, setHelperText]);
16077
16123
  // Function - validate ---------------------------------------------------------------------------------------------
16078
16124
  var validate = React.useCallback(function (value) {
16079
16125
  var isEmptyValue = false;
@@ -16096,12 +16142,7 @@ styleInject(css_248z$1);var FormFile = React__default["default"].forwardRef(func
16096
16142
  }
16097
16143
  setErrorHelperText(false, initHelperText);
16098
16144
  return true;
16099
- }, [onValidate, initHelperText]);
16100
- // Function - setErrorHelperText -----------------------------------------------------------------------------------
16101
- var setErrorHelperText = React.useCallback(function (error, helperText) {
16102
- setError(error);
16103
- setHelperText(helperText);
16104
- }, []);
16145
+ }, [required, onValidate, setErrorHelperText, initHelperText]);
16105
16146
  // Commands --------------------------------------------------------------------------------------------------------
16106
16147
  React.useLayoutEffect(function () {
16107
16148
  var lastValue = value;
@@ -16164,6 +16205,10 @@ styleInject(css_248z$1);var FormFile = React__default["default"].forwardRef(func
16164
16205
  ref,
16165
16206
  onAddValueItem,
16166
16207
  onRemoveValueItem,
16208
+ id,
16209
+ setValue,
16210
+ setDisabled,
16211
+ setErrorHelperText,
16167
16212
  ]);
16168
16213
  // Function --------------------------------------------------------------------------------------------------------
16169
16214
  var fileSizeCheck = React.useCallback(function (file) {
@@ -16215,7 +16260,7 @@ styleInject(css_248z$1);var FormFile = React__default["default"].forwardRef(func
16215
16260
  });
16216
16261
  });
16217
16262
  }
16218
- }, [onFile, onValueChangeByUser]);
16263
+ }, [fileSizeCheck, name, onFile, onValueChangeByUser, setValue]);
16219
16264
  var handleLinkClick = React.useCallback(function () {
16220
16265
  setIsOpenLinkDialog(true);
16221
16266
  }, []);
@@ -16225,7 +16270,7 @@ styleInject(css_248z$1);var FormFile = React__default["default"].forwardRef(func
16225
16270
  if (onValueChangeByUser)
16226
16271
  onValueChangeByUser(name, '');
16227
16272
  });
16228
- }, [onValueChangeByUser]);
16273
+ }, [name, onValueChangeByUser, setValue]);
16229
16274
  var handleLinkDialogConfirm = React.useCallback(function (url) {
16230
16275
  if (onLink) {
16231
16276
  onLink(url).then(function (finalUrl) {
@@ -16243,7 +16288,7 @@ styleInject(css_248z$1);var FormFile = React__default["default"].forwardRef(func
16243
16288
  onValueChangeByUser(name, url);
16244
16289
  });
16245
16290
  }
16246
- }, [onLink, onValueChangeByUser]);
16291
+ }, [name, onLink, onValueChangeByUser, setValue]);
16247
16292
  // Render ----------------------------------------------------------------------------------------------------------
16248
16293
  return (React__default["default"].createElement(FormItemBase, { variant: variant, size: size, color: color, focused: focused, className: classNames$1(className, 'FormValueItem', 'FormFile', "variant-".concat(variant), "size-".concat(size), !!initLabel && 'with-label', !!fullWidth && 'full-width', !!hideUrl && 'hide-file-name', !!hideLink && 'hide-link', notEmpty(value) && 'with-value'), labelIcon: hideUrl ? labelIcon : undefined, label: hideUrl ? initLabel : undefined, error: error, required: required, fullWidth: fullWidth, helperText: React__default["default"].createElement("div", null,
16249
16294
  preview,
@@ -16292,7 +16337,7 @@ FormFile.displayName = 'FormFile';
16292
16337
  FormFile.defaultProps = FormFileDefaultProps;var FormImageFileDefaultProps = __assign$4(__assign$4({}, FormFileDefaultProps), { accept: '.jpg,.jpeg,.png' });var css_248z = ".FormImageFile .preview-img {\n max-width: 100%;\n}\n.FormImageFile:not(.hide-file-name):not(.variant-standard) .preview-img {\n padding-right: 14px;\n}";
16293
16338
  styleInject(css_248z);var FormImageFile = React__default["default"].forwardRef(function (_a, ref) {
16294
16339
  var className = _a.className, imageSize = _a.imageSize, preview = _a.preview, previewMaxHeight = _a.previewMaxHeight, initValue = _a.value, onChange = _a.onChange, onFile = _a.onFile, onLink = _a.onLink, props = __rest$2(_a, ["className", "imageSize", "preview", "previewMaxHeight", "value", "onChange", "onFile", "onLink"]);
16295
- var _b = useAutoUpdateState$1(initValue), value = _b[0], setValue = _b[1];
16340
+ var _b = useAutoUpdateLayoutState(initValue), value = _b[0], setValue = _b[1];
16296
16341
  var _c = React.useState(), previewNode = _c[0], setPreviewNode = _c[1];
16297
16342
  var _d = React.useState({
16298
16343
  open: false,
@@ -16371,7 +16416,7 @@ styleInject(css_248z);var FormImageFile = React__default["default"].forwardRef(f
16371
16416
  var handleChange = React.useCallback(function (value) {
16372
16417
  setValue(value);
16373
16418
  onChange && onChange(value);
16374
- }, []);
16419
+ }, [onChange, setValue]);
16375
16420
  var handleFile = React.useCallback(function (file) {
16376
16421
  return new Promise(function (resolve, reject) {
16377
16422
  imageSizeCheck(file)
@@ -16437,6 +16482,7 @@ SearchGroupRow.defaultProps = SearchGroupRowDefaultProps;var Search = React__def
16437
16482
  if (autoSubmit) {
16438
16483
  (_a = formRef.current) === null || _a === void 0 ? void 0 : _a.submit();
16439
16484
  }
16485
+ // eslint-disable-next-line react-hooks/exhaustive-deps
16440
16486
  }, []);
16441
16487
  // Memo --------------------------------------------------------------------------------------------------------------
16442
16488
  var renderChildren = React.useMemo(function () {
@@ -16539,7 +16585,7 @@ var SearchGroup = function (_a) {
16539
16585
  var children = _a.children, className = _a.className, style = _a.style, sx = _a.sx,
16540
16586
  //--------------------------------------------------------------------------------------------------------------------
16541
16587
  max = _a.max, align = _a.align, hidden = _a.hidden, spacing = _a.spacing;
16542
- var justifyContent = useAutoUpdateState$1(React.useCallback(function () {
16588
+ var justifyContent = React.useMemo(function () {
16543
16589
  switch (align) {
16544
16590
  case undefined:
16545
16591
  case 'left':
@@ -16549,7 +16595,7 @@ var SearchGroup = function (_a) {
16549
16595
  case 'right':
16550
16596
  return 'end';
16551
16597
  }
16552
- }, [align]))[0];
16598
+ }, [align]);
16553
16599
  // Render ----------------------------------------------------------------------------------------------------------
16554
16600
  return (React__default["default"].createElement(material.Grid, { item: true, className: classNames$1(className, 'SearchGroup'), style: { flex: max ? 1 : undefined, display: hidden ? 'none' : undefined } },
16555
16601
  React__default["default"].createElement(material.Grid, { container: true, wrap: 'wrap', spacing: spacing, justifyContent: justifyContent, alignItems: 'start', style: style, sx: sx }, React__default["default"].Children.map(children, function (child) {
@@ -16562,11 +16608,9 @@ var SearchGroup = function (_a) {
16562
16608
  }))));
16563
16609
  };
16564
16610
  SearchGroup.defaultProps = SearchGroupDefaultProps;var SearchButtonDefaultProps = {};var SearchButton = function (_a) {
16565
- // State -----------------------------------------------------------------------------------------------------------
16611
+ // Memo --------------------------------------------------------------------------------------------------------------
16566
16612
  var children = _a.children, className = _a.className, initSx = _a.sx, startIcon = _a.startIcon, endIcon = _a.endIcon, icon = _a.icon, props = __rest$2(_a, ["children", "className", "sx", "startIcon", "endIcon", "icon"]);
16567
- var sx = useAutoUpdateState$1(React.useCallback(function () {
16568
- return __assign$4({ minWidth: 0, px: !startIcon && !endIcon && !icon ? 1.2 : 1.7 }, initSx);
16569
- }, [initSx, startIcon, endIcon, icon]))[0];
16613
+ var sx = React.useMemo(function () { return (__assign$4({ minWidth: 0, px: !startIcon && !endIcon && !icon ? 1.2 : 1.7 }, initSx)); }, [endIcon, icon, initSx, startIcon]);
16570
16614
  // Render ----------------------------------------------------------------------------------------------------------
16571
16615
  return (React__default["default"].createElement(FormButton, __assign$4({ className: classNames$1(className, 'SearchButton'), size: 'medium', sx: sx, fullWidth: false, startIcon: startIcon, endIcon: endIcon, icon: icon }, props), children));
16572
16616
  };