@pdg/react-form 1.0.137 → 1.0.139

package/dist/index.esm.js

@@ -1,4 +1,4 @@
-import React,{createContext,useContext,useRef,useCallback,useMemo,useLayoutEffect,useEffect,useState,useId}from'react';import classNames from'classnames';import {Box,styled,useTheme,InputLabel,Grid,Collapse,FormHelperText,InputAdornment,IconButton,TextField,Chip,Autocomplete,Icon,CircularProgress,MenuItem,Checkbox,FormControl,Input,OutlinedInput,FilledInput,FormControlLabel,Typography,RadioGroup,Radio,ToggleButton,ToggleButtonGroup,Rating,Skeleton,darken,Button,Tooltip,tooltipClasses,ClickAwayListener,Dialog,DialogTitle,DialogContent,DialogActions,Switch,Paper,Menu}from'@mui/material';import {empty,ifUndefined,nextTick,notEmpty,equal,telNoAutoDash,companyNoAutoDash,personalNoAutoDash}from'@pdg/util';import dayjs from'dayjs';import {useAutoUpdateLayoutRef,useAutoUpdateState,useAutoUpdateRefState,useFirstSkipEffect,useForceUpdate}from'@pdg/react-hook';import {PdgButton,PdgIcon,PdgIconText}from'@pdg/react-component';import {useResizeDetector}from'react-resize-detector';import {NumericFormat}from'react-number-format';import {CheckBoxOutlineBlank,CheckBox,RadioButtonChecked,RadioButtonUnchecked}from'@mui/icons-material';import {Editor}from'@tinymce/tinymce-react';import {AdapterDayjs}from'@mui/x-date-pickers/AdapterDayjs';import {PickersDay,StaticDatePicker,LocalizationProvider,DesktopDatePicker,StaticDateTimePicker,DesktopDateTimePicker}from'@mui/x-date-pickers';import SimpleBar from'simplebar-react';import'dayjs/locale/ko';function styleInject(css, ref) {
+import React,{createContext,useContext,useRef,useCallback,useMemo,useLayoutEffect,useEffect,useState,useId}from'react';import classNames from'classnames';import {Box,styled,useTheme,InputLabel,Grid,Collapse,FormHelperText,InputAdornment,IconButton,TextField,Chip,Autocomplete,Icon,CircularProgress,MenuItem,Checkbox,FormControl,Input,OutlinedInput,FilledInput,FormControlLabel,Typography,RadioGroup,Radio,ToggleButton,ToggleButtonGroup,Rating,Skeleton,darken,Button,Tooltip,tooltipClasses,ClickAwayListener,Dialog,DialogTitle,DialogContent,DialogActions,Switch,Paper,Menu}from'@mui/material';import {empty,ifUndefined,nextTick,notEmpty,equal,telNoAutoDash,companyNoAutoDash,personalNoAutoDash}from'@pdg/util';import dayjs from'dayjs';import {useAutoUpdateLayoutRef,useAutoUpdateState,useAutoUpdateRefState,useFirstSkipEffect,useForceUpdate,useAutoUpdateRef}from'@pdg/react-hook';import {PdgButton,PdgIcon,PdgIconText}from'@pdg/react-component';import {useResizeDetector}from'react-resize-detector';import {NumericFormat}from'react-number-format';import {CheckBoxOutlineBlank,CheckBox,RadioButtonChecked,RadioButtonUnchecked}from'@mui/icons-material';import {Editor}from'@tinymce/tinymce-react';import {AdapterDayjs}from'@mui/x-date-pickers/AdapterDayjs';import {PickersDay,StaticDatePicker,LocalizationProvider,DesktopDatePicker,StaticDateTimePicker,DesktopDateTimePicker}from'@mui/x-date-pickers';import SimpleBar from'simplebar-react';import'dayjs/locale/ko';function styleInject(css, ref) {
   if ( ref === void 0 ) ref = {};
   var insertAt = ref.insertAt;
 
@@ -966,13 +966,13 @@ var templateObject_1$f, templateObject_2$8, templateObject_3$4;var FormCol = Rea
      * ******************************************************************************************************************/
     return (React.createElement(FormContextProvider, { value: __assign(__assign({}, otherFormState), { variant: variant, size: size, color: color, spacing: spacing, focused: focused, labelShrink: labelShrink, fullWidth: fullWidth, formColGap: formColGap, formColXs: xs || formColAutoXs || 12, formColWidth: formColWidth, formColWithLabel: !!label, formColWithHelperText: !!helperText }) },
         React.createElement(Grid, { ref: gridRef, size: { xs: xs || formColAutoXs || 12 }, className: classNames(className, 'FormCol', !!label && 'with-label', !!helperText && 'with-helper-text'), style: hidden ? __assign(__assign({}, initStyle), { display: 'none' }) : initStyle, sx: sx },
-            React.createElement(Grid, { container: true, direction: 'column' },
-                label && (React.createElement(Grid, { className: 'FormCol-header' },
+            React.createElement("div", null,
+                label && (React.createElement("div", { className: 'FormCol-header' },
                     React.createElement(StyledFormLabelContainerDiv, null,
                         React.createElement(StyledFormLabel, { className: 'FormCol-FormLabel', size: size, icon: icon, focused: focused, color: color, error: error, warning: warning }, label)))),
-                React.createElement(Grid, { size: { xs: 2, sm: 12 }, className: 'FormCol-content' },
+                React.createElement("div", { className: 'FormCol-content' },
                     React.createElement(StyledContentContainerBox, { gap: formColGap }, children)),
-                helperText && (React.createElement(Grid, { className: 'FormCol-helper-text' },
+                helperText && (React.createElement("div", { className: 'FormCol-helper-text' },
                     React.createElement(FormHelperText, { component: 'div', error: error, style: { marginLeft: helperTextShift ? 14 : 5 } }, helperText)))))));
 });var StyledContainerDiv = styled('div')(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["\n  flex: 1;\n  position: relative;\n"], ["\n  flex: 1;\n  position: relative;\n"])));
 var StyledContentDiv = styled('div')(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["\n  ::-webkit-scrollbar {\n    width: 8px;\n  }\n\n  ::-webkit-scrollbar-thumb {\n    background-color: #e4e4e4;\n    border-radius: 100px;\n  }\n\n  ::-webkit-scrollbar-thumb:hover {\n    background-color: #cfcfcf;\n    border-radius: 100px;\n  }\n"], ["\n  ::-webkit-scrollbar {\n    width: 8px;\n  }\n\n  ::-webkit-scrollbar-thumb {\n    background-color: #e4e4e4;\n    border-radius: 100px;\n  }\n\n  ::-webkit-scrollbar-thumb:hover {\n    background-color: #cfcfcf;\n    border-radius: 100px;\n  }\n"])));
@@ -1658,15 +1658,7 @@ FormMobile.displayName = 'FormMobile';var NumberFormatCustom = React.forwardRef(
     /********************************************************************************************************************
      * Ref
      * ******************************************************************************************************************/
-    var strValueRef = React.useRef(undefined);
-    /********************************************************************************************************************
-     * Effect
-     * ******************************************************************************************************************/
-    useEffect(function () {
-        strValueRef.current = empty(initValue) ? '' : "".concat(initValue);
-        forceUpdate();
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [initValue]);
+    var strValueRef = useAutoUpdateRef(initValue !== undefined ? "".concat(initValue) : '');
     /********************************************************************************************************************
      * Memo
      * ******************************************************************************************************************/
@@ -1737,7 +1729,7 @@ FormMobile.displayName = 'FormMobile';var NumberFormatCustom = React.forwardRef(
             strValueRef.current = value;
             forceUpdate();
         }
-    }, [forceUpdate, onChange]);
+    }, [forceUpdate, onChange, strValueRef]);
     var handleValue = useCallback(function (value) {
         var finalValue = empty(value) || value === '-' || value === '.' ? undefined : Number(value);
         if (onValue) {

package/dist/index.js

@@ -966,13 +966,13 @@ var templateObject_1$f, templateObject_2$8, templateObject_3$4;var FormCol = Rea
      * ******************************************************************************************************************/
     return (React.createElement(FormContextProvider, { value: __assign(__assign({}, otherFormState), { variant: variant, size: size, color: color, spacing: spacing, focused: focused, labelShrink: labelShrink, fullWidth: fullWidth, formColGap: formColGap, formColXs: xs || formColAutoXs || 12, formColWidth: formColWidth, formColWithLabel: !!label, formColWithHelperText: !!helperText }) },
         React.createElement(material.Grid, { ref: gridRef, size: { xs: xs || formColAutoXs || 12 }, className: classNames(className, 'FormCol', !!label && 'with-label', !!helperText && 'with-helper-text'), style: hidden ? __assign(__assign({}, initStyle), { display: 'none' }) : initStyle, sx: sx },
-            React.createElement(material.Grid, { container: true, direction: 'column' },
-                label && (React.createElement(material.Grid, { className: 'FormCol-header' },
+            React.createElement("div", null,
+                label && (React.createElement("div", { className: 'FormCol-header' },
                     React.createElement(StyledFormLabelContainerDiv, null,
                         React.createElement(StyledFormLabel, { className: 'FormCol-FormLabel', size: size, icon: icon, focused: focused, color: color, error: error, warning: warning }, label)))),
-                React.createElement(material.Grid, { size: { xs: 2, sm: 12 }, className: 'FormCol-content' },
+                React.createElement("div", { className: 'FormCol-content' },
                     React.createElement(StyledContentContainerBox, { gap: formColGap }, children)),
-                helperText && (React.createElement(material.Grid, { className: 'FormCol-helper-text' },
+                helperText && (React.createElement("div", { className: 'FormCol-helper-text' },
                     React.createElement(material.FormHelperText, { component: 'div', error: error, style: { marginLeft: helperTextShift ? 14 : 5 } }, helperText)))))));
 });var StyledContainerDiv = material.styled('div')(templateObject_1$e || (templateObject_1$e = __makeTemplateObject(["\n  flex: 1;\n  position: relative;\n"], ["\n  flex: 1;\n  position: relative;\n"])));
 var StyledContentDiv = material.styled('div')(templateObject_2$7 || (templateObject_2$7 = __makeTemplateObject(["\n  ::-webkit-scrollbar {\n    width: 8px;\n  }\n\n  ::-webkit-scrollbar-thumb {\n    background-color: #e4e4e4;\n    border-radius: 100px;\n  }\n\n  ::-webkit-scrollbar-thumb:hover {\n    background-color: #cfcfcf;\n    border-radius: 100px;\n  }\n"], ["\n  ::-webkit-scrollbar {\n    width: 8px;\n  }\n\n  ::-webkit-scrollbar-thumb {\n    background-color: #e4e4e4;\n    border-radius: 100px;\n  }\n\n  ::-webkit-scrollbar-thumb:hover {\n    background-color: #cfcfcf;\n    border-radius: 100px;\n  }\n"])));
@@ -1658,15 +1658,7 @@ FormMobile.displayName = 'FormMobile';var NumberFormatCustom = React.forwardRef(
     /********************************************************************************************************************
      * Ref
      * ******************************************************************************************************************/
-    var strValueRef = React.useRef(undefined);
-    /********************************************************************************************************************
-     * Effect
-     * ******************************************************************************************************************/
-    React.useEffect(function () {
-        strValueRef.current = util.empty(initValue) ? '' : "".concat(initValue);
-        forceUpdate();
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [initValue]);
+    var strValueRef = reactHook.useAutoUpdateRef(initValue !== undefined ? "".concat(initValue) : '');
     /********************************************************************************************************************
      * Memo
      * ******************************************************************************************************************/
@@ -1737,7 +1729,7 @@ FormMobile.displayName = 'FormMobile';var NumberFormatCustom = React.forwardRef(
             strValueRef.current = value;
             forceUpdate();
         }
-    }, [forceUpdate, onChange]);
+    }, [forceUpdate, onChange, strValueRef]);
     var handleValue = React.useCallback(function (value) {
         var finalValue = util.empty(value) || value === '-' || value === '.' ? undefined : Number(value);
         if (onValue) {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pdg/react-form",
   "title": "React Form",
-  "version": "1.0.137",
+  "version": "1.0.139",
   "description": "React Form",
   "type": "module",
   "types": "dist/index.d.ts",
@@ -46,7 +46,7 @@
     "@mui/material": "^7.0.2",
     "@mui/x-date-pickers": "^7.28.3",
     "@pdg/react-component": "^1.0.33",
-    "@pdg/react-hook": "^1.0.27",
+    "@pdg/react-hook": "^1.0.28",
     "@pdg/util": "^1.0.23",
     "@tinymce/tinymce-react": "^6.1.0",
     "@types/react": ">=17.0.0",