@pdg/react-form 1.0.104 → 1.0.106

package/README.md

@@ -2,7 +2,15 @@
 
 React Form
 
+## Demo 사이트
+https://parkdigy.github.io/react-form/
+
 ## 설치
-```
+```shell
 npm install -D @pdg/react-form @mui/material @mui/icons-material @emotion/react @emotion/styled @mui/x-date-pickers @pdg/react-component @pdg/react-dialog @pdg/react-hook @pdg/util @tinymce/tinymce-react classnames dayjs react-number-format react-resize-detector simplebar-react
 ```
+
+### simplebar-react css 추가
+```
+import 'simplebar-react/dist/simplebar.min.css';
+```

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+import './index.scss';
 export * from './@types';
 export * from './Form';
 export * from './FormContext';

package/dist/index.esm.js

@@ -1,4 +1,30 @@
-import React,{createContext,useContext,useMemo,useRef,useState,useCallback,useLayoutEffect,useEffect,useId}from'react';import classNames from'classnames';import {Box,Button,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,Tooltip,tooltipClasses,ClickAwayListener,Dialog,DialogTitle,DialogContent,DialogActions,Switch,Paper,Menu}from'@mui/material';import {empty,nextTick,notEmpty,equal,telNoAutoDash,ifUndefined,companyNoAutoDash,personalNoAutoDash}from'@pdg/util';import dayjs from'dayjs';import {PdgIcon,PdgIconText}from'@pdg/react-component';import {useAutoUpdateState,useAutoUpdateRefState,useFirstSkipEffect}from'@pdg/react-hook';import {useResizeDetector}from'react-resize-detector';import {NumericFormat}from'react-number-format';import {CheckBox,CheckBoxOutlineBlank,RadioButtonUnchecked,RadioButtonChecked}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';/******************************************************************************
+import React,{createContext,useContext,useMemo,useRef,useState,useCallback,useLayoutEffect,useEffect,useId}from'react';import classNames from'classnames';import {Box,Button,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,Tooltip,tooltipClasses,ClickAwayListener,Dialog,DialogTitle,DialogContent,DialogActions,Switch,Paper,Menu}from'@mui/material';import {empty,nextTick,notEmpty,equal,telNoAutoDash,ifUndefined,companyNoAutoDash,personalNoAutoDash}from'@pdg/util';import dayjs from'dayjs';import {PdgIcon,PdgIconText}from'@pdg/react-component';import {useAutoUpdateState,useAutoUpdateRefState,useFirstSkipEffect}from'@pdg/react-hook';import {useResizeDetector}from'react-resize-detector';import {NumericFormat}from'react-number-format';import {CheckBox,CheckBoxOutlineBlank,RadioButtonUnchecked,RadioButtonChecked}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;
+
+  if (!css || typeof document === 'undefined') { return; }
+
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}var css_248z$m = ".simplebar-track.simplebar-vertical {\n  width: 8px !important;\n}\n.simplebar-track.simplebar-vertical .simplebar-scrollbar.simplebar-visible:before {\n  opacity: 0.3 !important;\n}";
+styleInject(css_248z$m);/******************************************************************************
 Copyright (c) Microsoft Corporation.
 
 Permission to use, copy, modify, and/or distribute this software for any
@@ -590,9 +616,9 @@ Form.defaultProps = FormDefaultProps;var FormButtonDefaultProps = {
      * ******************************************************************************************************************/
     return (React.createElement(Button, __assign({ ref: ref, className: classNames(className, 'FormButton'), type: type, variant: variant, size: size, color: color, fullWidth: fullWidth, onClick: onClick }, props),
         React.createElement(Box, { display: 'inline-flex', flexDirection: 'row', alignItems: 'center' },
-            (icon || startIcon) && (React.createElement(PdgIcon, { className: 'FormButton-StartIcon', fontSize: size, color: 'inherit', sx: { mr: children ? 0.5 : undefined } }, icon || startIcon)),
+            (icon || startIcon) && (React.createElement(PdgIcon, { className: 'FormButton-StartIcon', size: size, color: 'inherit', sx: { mr: children ? 0.5 : undefined } }, icon || startIcon)),
             children,
-            endIcon && (React.createElement(PdgIcon, { className: 'FormButton-EndIcon', fontSize: size, color: 'inherit', sx: { ml: children ? 0.5 : undefined } }, endIcon)))));
+            endIcon && (React.createElement(PdgIcon, { className: 'FormButton-EndIcon', size: size, color: 'inherit', sx: { ml: children ? 0.5 : undefined } }, endIcon)))));
 });
 FormButton.displayName = 'FormButton';
 FormButton.defaultProps = FormButtonDefaultProps;var FormLabelDefaultProps = {};var IconPdgIcon = styled(PdgIcon)(templateObject_1$g || (templateObject_1$g = __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"])));
@@ -700,7 +726,7 @@ var FormDivider = React.forwardRef(function (_a, ref) {
                 padding: 0,
                 cursor: collapse ? 'pointer' : undefined,
             }, onClick: handleClick },
-            icon && (React.createElement(PdgIcon, { style: { opacity: 0.54, marginRight: 5 }, color: error ? 'error' : warning ? 'warning' : undefined, fontSize: size }, icon)),
+            icon && (React.createElement(PdgIcon, { style: { opacity: 0.54, marginRight: 5 }, color: error ? 'error' : warning ? 'warning' : undefined, size: size }, icon)),
             label && (React.createElement(Box, { sx: {
                     paddingRight: '10px',
                     color: error ? 'error.main' : warning ? 'warning.main' : 'text.secondary',
@@ -991,32 +1017,7 @@ FormBody.defaultProps = FormBodyDefaultProps;var FormFooterDefaultProps = {};var
             children)));
 };
 FormFooter.displayName = 'FormFooter';
-FormFooter.defaultProps = FormFooterDefaultProps;var FormTextFieldDefaultProps = {};function styleInject(css, ref) {
-  if ( ref === void 0 ) ref = {};
-  var insertAt = ref.insertAt;
-
-  if (!css || typeof document === 'undefined') { return; }
-
-  var head = document.head || document.getElementsByTagName('head')[0];
-  var style = document.createElement('style');
-  style.type = 'text/css';
-
-  if (insertAt === 'top') {
-    if (head.firstChild) {
-      head.insertBefore(style, head.firstChild);
-    } else {
-      head.appendChild(style);
-    }
-  } else {
-    head.appendChild(style);
-  }
-
-  if (style.styleSheet) {
-    style.styleSheet.cssText = css;
-  } else {
-    style.appendChild(document.createTextNode(css));
-  }
-}var css_248z$l = ".FormTextField {\n  min-width: 200px;\n}\n.FormTextField .clear-icon-button-wrap {\n  visibility: hidden;\n}\n.FormTextField.variant-filled .clear-icon-button-wrap {\n  margin-top: 9px;\n  margin-bottom: -9px;\n}\n.FormTextField:hover .clear-icon-button-wrap.show,\n.FormTextField .MuiInputBase-root.Mui-focused .clear-icon-button-wrap.show {\n  visibility: visible;\n}";
+FormFooter.defaultProps = FormFooterDefaultProps;var FormTextFieldDefaultProps = {};var css_248z$l = ".FormTextField {\n  min-width: 200px;\n}\n.FormTextField .clear-icon-button-wrap {\n  visibility: hidden;\n}\n.FormTextField.variant-filled .clear-icon-button-wrap {\n  margin-top: 9px;\n  margin-bottom: -9px;\n}\n.FormTextField:hover .clear-icon-button-wrap.show,\n.FormTextField .MuiInputBase-root.Mui-focused .clear-icon-button-wrap.show {\n  visibility: visible;\n}";
 styleInject(css_248z$l);var FormTextField = React.forwardRef(function (_a, ref) {
     /********************************************************************************************************************
      * ID
@@ -1185,7 +1186,7 @@ styleInject(css_248z$l);var FormTextField = React.forwardRef(function (_a, ref)
         if (startAdornment || icon || muiInputProps.startAdornment) {
             muiInputProps.startAdornment = (React.createElement(React.Fragment, null,
                 icon && (React.createElement(InputAdornment, { position: 'start' },
-                    React.createElement(PdgIcon, { fontSize: 'small' }, icon))),
+                    React.createElement(PdgIcon, { size: 'small' }, icon))),
                 startAdornment && React.createElement(InputAdornment, { position: 'start' }, startAdornment),
                 muiInputProps.startAdornment));
         }
@@ -1202,7 +1203,7 @@ styleInject(css_248z$l);var FormTextField = React.forwardRef(function (_a, ref)
                                 });
                             }
                         } },
-                        React.createElement(PdgIcon, { fontSize: 'inherit' }, "ClearRounded")))),
+                        React.createElement(PdgIcon, { size: 'inherit' }, "ClearRounded")))),
                 muiInputProps.endAdornment,
                 endAdornment && React.createElement(InputAdornment, { position: 'end' }, endAdornment)));
         }
@@ -3676,7 +3677,7 @@ FormToggleButtonGroup.defaultProps = FormToggleButtonGroupDefaultProps;var FormR
     /********************************************************************************************************************
      * Render
      * ******************************************************************************************************************/
-    return (React.createElement(FormItemBase, { variant: variant, size: size, color: color, focused: focused, className: classNames(className, 'FormValueItem', 'FormRating'), labelIcon: labelIcon, label: label, error: error, fullWidth: false, required: required, helperText: error ? errorHelperText : helperText, helperTextProps: { style: { marginLeft: 5 } }, style: style, sx: sx, hidden: hidden, autoSize: true, controlHeight: height || (size === 'small' ? 21 : 26), controlVerticalCenter: true, control: React.createElement(Rating, { ref: ratingRef, size: size === 'medium' ? 'large' : 'medium', name: name, precision: precision, highlightSelectedOnly: highlightSelectedOnly, value: value, disabled: disabled || readOnly, max: max, icon: React.createElement(PdgIcon, { color: color, fontSize: 'inherit' }, icon ? icon : 'Star'), emptyIcon: React.createElement(PdgIcon, { fontSize: 'inherit' }, emptyIcon ? emptyIcon : 'StarBorder'), onChange: handleChange, onFocus: function () { return setFocused(initFocused || true); }, onBlur: function () { return setFocused(initFocused || false); } }) }));
+    return (React.createElement(FormItemBase, { variant: variant, size: size, color: color, focused: focused, className: classNames(className, 'FormValueItem', 'FormRating'), labelIcon: labelIcon, label: label, error: error, fullWidth: false, required: required, helperText: error ? errorHelperText : helperText, helperTextProps: { style: { marginLeft: 5 } }, style: style, sx: sx, hidden: hidden, autoSize: true, controlHeight: height || (size === 'small' ? 21 : 26), controlVerticalCenter: true, control: React.createElement(Rating, { ref: ratingRef, size: size === 'medium' ? 'large' : 'medium', name: name, precision: precision, highlightSelectedOnly: highlightSelectedOnly, value: value, disabled: disabled || readOnly, max: max, icon: React.createElement(PdgIcon, { color: color, size: 'inherit' }, icon ? icon : 'Star'), emptyIcon: React.createElement(PdgIcon, { size: 'inherit' }, emptyIcon ? emptyIcon : 'StarBorder'), onChange: handleChange, onFocus: function () { return setFocused(initFocused || true); }, onBlur: function () { return setFocused(initFocused || false); } }) }));
 });
 FormRating.displayName = 'FormRating';
 FormRating.defaultProps = FormRatingDefaultProps;var FormTextEditorDefaultProps = {
@@ -5264,7 +5265,7 @@ styleInject(css_248z$7);var PrivateDatePicker = React.forwardRef(function (_a, r
         if (startAdornment || icon || muiInputProps.startAdornment) {
             muiInputProps.startAdornment = (React.createElement(React.Fragment, null,
                 icon && (React.createElement(InputAdornment, { position: 'start' },
-                    React.createElement(PdgIcon, { fontSize: 'small' }, icon))),
+                    React.createElement(PdgIcon, { size: 'small' }, icon))),
                 startAdornment && React.createElement(InputAdornment, { position: 'start' }, startAdornment),
                 muiInputProps.startAdornment));
         }
@@ -6012,7 +6013,7 @@ PrivateStaticDateTimePicker.defaultProps = PrivateStaticDateTimePickerDefaultPro
         if (startAdornment || icon || muiInputProps.startAdornment) {
             muiInputProps.startAdornment = (React.createElement(React.Fragment, null,
                 icon && (React.createElement(InputAdornment, { position: 'start' },
-                    React.createElement(PdgIcon, { fontSize: 'small' }, icon))),
+                    React.createElement(PdgIcon, { size: 'small' }, icon))),
                 startAdornment && React.createElement(InputAdornment, { position: 'start' }, startAdornment),
                 muiInputProps.startAdornment));
         }
@@ -6132,7 +6133,7 @@ styleInject(css_248z$4);var PrivateInputDatePicker = React.forwardRef(function (
         if (startAdornment || icon || muiInputProps.startAdornment) {
             muiInputProps.startAdornment = (React.createElement(React.Fragment, null,
                 icon && (React.createElement(InputAdornment, { position: 'start' },
-                    React.createElement(PdgIcon, { fontSize: 'small' }, icon))),
+                    React.createElement(PdgIcon, { size: 'small' }, icon))),
                 startAdornment && React.createElement(InputAdornment, { position: 'start' }, startAdornment),
                 muiInputProps.startAdornment));
         }
@@ -10448,7 +10449,7 @@ FormYearRangePicker.defaultProps = FormYearRangePickerDefaultProps;var FormSwitc
     /********************************************************************************************************************
      * Render
      * ******************************************************************************************************************/
-    var switchControl = useMemo(function () { return (React.createElement(Switch, { size: size, name: name, checked: value, disabled: disabled, onChange: handleChange, onFocus: function () { return setFocused(initFocused || true); }, onBlur: function () { return setFocused(initFocused || false); } })); }, [disabled, handleChange, initFocused, name, setFocused, size, value]);
+    var switchControl = useMemo(function () { return (React.createElement(Switch, { size: size, name: name, checked: value, color: color, disabled: disabled, onChange: handleChange, onFocus: function () { return setFocused(initFocused || true); }, onBlur: function () { return setFocused(initFocused || false); } })); }, [color, disabled, handleChange, initFocused, name, setFocused, size, value]);
     return (React.createElement(FormItemBase, { variant: variant, size: size, color: color, focused: focused, className: classNames(className, 'FormValueItem', 'FormSwitch'), labelIcon: labelIcon, label: label, error: error, fullWidth: false, helperText: error ? errorHelperText : helperText, helperTextProps: { style: { marginLeft: 5 } }, style: style, sx: sx, hidden: hidden, autoSize: true, controlHeight: size === 'small' ? 21 : 26, controlVerticalCenter: true, control: switchLabel ? (React.createElement(FormControlLabel, { control: switchControl, label: switchLabel, disabled: disabled })) : (switchControl) }));
 });
 FormSwitch.displayName = 'FormSwitch';

package/dist/index.js

@@ -1,4 +1,30 @@
-'use strict';var React=require('react'),classNames=require('classnames'),material=require('@mui/material'),util=require('@pdg/util'),dayjs=require('dayjs'),reactComponent=require('@pdg/react-component'),reactHook=require('@pdg/react-hook'),reactResizeDetector=require('react-resize-detector'),reactNumberFormat=require('react-number-format'),iconsMaterial=require('@mui/icons-material'),tinymceReact=require('@tinymce/tinymce-react'),AdapterDayjs=require('@mui/x-date-pickers/AdapterDayjs'),xDatePickers=require('@mui/x-date-pickers'),SimpleBar=require('simplebar-react');require('dayjs/locale/ko');/******************************************************************************
+'use strict';var React=require('react'),classNames=require('classnames'),material=require('@mui/material'),util=require('@pdg/util'),dayjs=require('dayjs'),reactComponent=require('@pdg/react-component'),reactHook=require('@pdg/react-hook'),reactResizeDetector=require('react-resize-detector'),reactNumberFormat=require('react-number-format'),iconsMaterial=require('@mui/icons-material'),tinymceReact=require('@tinymce/tinymce-react'),AdapterDayjs=require('@mui/x-date-pickers/AdapterDayjs'),xDatePickers=require('@mui/x-date-pickers'),SimpleBar=require('simplebar-react');require('dayjs/locale/ko');function styleInject(css, ref) {
+  if ( ref === void 0 ) ref = {};
+  var insertAt = ref.insertAt;
+
+  if (!css || typeof document === 'undefined') { return; }
+
+  var head = document.head || document.getElementsByTagName('head')[0];
+  var style = document.createElement('style');
+  style.type = 'text/css';
+
+  if (insertAt === 'top') {
+    if (head.firstChild) {
+      head.insertBefore(style, head.firstChild);
+    } else {
+      head.appendChild(style);
+    }
+  } else {
+    head.appendChild(style);
+  }
+
+  if (style.styleSheet) {
+    style.styleSheet.cssText = css;
+  } else {
+    style.appendChild(document.createTextNode(css));
+  }
+}var css_248z$m = ".simplebar-track.simplebar-vertical {\n  width: 8px !important;\n}\n.simplebar-track.simplebar-vertical .simplebar-scrollbar.simplebar-visible:before {\n  opacity: 0.3 !important;\n}";
+styleInject(css_248z$m);/******************************************************************************
 Copyright (c) Microsoft Corporation.
 
 Permission to use, copy, modify, and/or distribute this software for any
@@ -590,9 +616,9 @@ Form.defaultProps = FormDefaultProps;var FormButtonDefaultProps = {
      * ******************************************************************************************************************/
     return (React.createElement(material.Button, __assign({ ref: ref, className: classNames(className, 'FormButton'), type: type, variant: variant, size: size, color: color, fullWidth: fullWidth, onClick: onClick }, props),
         React.createElement(material.Box, { display: 'inline-flex', flexDirection: 'row', alignItems: 'center' },
-            (icon || startIcon) && (React.createElement(reactComponent.PdgIcon, { className: 'FormButton-StartIcon', fontSize: size, color: 'inherit', sx: { mr: children ? 0.5 : undefined } }, icon || startIcon)),
+            (icon || startIcon) && (React.createElement(reactComponent.PdgIcon, { className: 'FormButton-StartIcon', size: size, color: 'inherit', sx: { mr: children ? 0.5 : undefined } }, icon || startIcon)),
             children,
-            endIcon && (React.createElement(reactComponent.PdgIcon, { className: 'FormButton-EndIcon', fontSize: size, color: 'inherit', sx: { ml: children ? 0.5 : undefined } }, endIcon)))));
+            endIcon && (React.createElement(reactComponent.PdgIcon, { className: 'FormButton-EndIcon', size: size, color: 'inherit', sx: { ml: children ? 0.5 : undefined } }, endIcon)))));
 });
 FormButton.displayName = 'FormButton';
 FormButton.defaultProps = FormButtonDefaultProps;var FormLabelDefaultProps = {};var IconPdgIcon = material.styled(reactComponent.PdgIcon)(templateObject_1$g || (templateObject_1$g = __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"])));
@@ -700,7 +726,7 @@ var FormDivider = React.forwardRef(function (_a, ref) {
                 padding: 0,
                 cursor: collapse ? 'pointer' : undefined,
             }, onClick: handleClick },
-            icon && (React.createElement(reactComponent.PdgIcon, { style: { opacity: 0.54, marginRight: 5 }, color: error ? 'error' : warning ? 'warning' : undefined, fontSize: size }, icon)),
+            icon && (React.createElement(reactComponent.PdgIcon, { style: { opacity: 0.54, marginRight: 5 }, color: error ? 'error' : warning ? 'warning' : undefined, size: size }, icon)),
             label && (React.createElement(material.Box, { sx: {
                     paddingRight: '10px',
                     color: error ? 'error.main' : warning ? 'warning.main' : 'text.secondary',
@@ -991,32 +1017,7 @@ FormBody.defaultProps = FormBodyDefaultProps;var FormFooterDefaultProps = {};var
             children)));
 };
 FormFooter.displayName = 'FormFooter';
-FormFooter.defaultProps = FormFooterDefaultProps;var FormTextFieldDefaultProps = {};function styleInject(css, ref) {
-  if ( ref === void 0 ) ref = {};
-  var insertAt = ref.insertAt;
-
-  if (!css || typeof document === 'undefined') { return; }
-
-  var head = document.head || document.getElementsByTagName('head')[0];
-  var style = document.createElement('style');
-  style.type = 'text/css';
-
-  if (insertAt === 'top') {
-    if (head.firstChild) {
-      head.insertBefore(style, head.firstChild);
-    } else {
-      head.appendChild(style);
-    }
-  } else {
-    head.appendChild(style);
-  }
-
-  if (style.styleSheet) {
-    style.styleSheet.cssText = css;
-  } else {
-    style.appendChild(document.createTextNode(css));
-  }
-}var css_248z$l = ".FormTextField {\n  min-width: 200px;\n}\n.FormTextField .clear-icon-button-wrap {\n  visibility: hidden;\n}\n.FormTextField.variant-filled .clear-icon-button-wrap {\n  margin-top: 9px;\n  margin-bottom: -9px;\n}\n.FormTextField:hover .clear-icon-button-wrap.show,\n.FormTextField .MuiInputBase-root.Mui-focused .clear-icon-button-wrap.show {\n  visibility: visible;\n}";
+FormFooter.defaultProps = FormFooterDefaultProps;var FormTextFieldDefaultProps = {};var css_248z$l = ".FormTextField {\n  min-width: 200px;\n}\n.FormTextField .clear-icon-button-wrap {\n  visibility: hidden;\n}\n.FormTextField.variant-filled .clear-icon-button-wrap {\n  margin-top: 9px;\n  margin-bottom: -9px;\n}\n.FormTextField:hover .clear-icon-button-wrap.show,\n.FormTextField .MuiInputBase-root.Mui-focused .clear-icon-button-wrap.show {\n  visibility: visible;\n}";
 styleInject(css_248z$l);var FormTextField = React.forwardRef(function (_a, ref) {
     /********************************************************************************************************************
      * ID
@@ -1185,7 +1186,7 @@ styleInject(css_248z$l);var FormTextField = React.forwardRef(function (_a, ref)
         if (startAdornment || icon || muiInputProps.startAdornment) {
             muiInputProps.startAdornment = (React.createElement(React.Fragment, null,
                 icon && (React.createElement(material.InputAdornment, { position: 'start' },
-                    React.createElement(reactComponent.PdgIcon, { fontSize: 'small' }, icon))),
+                    React.createElement(reactComponent.PdgIcon, { size: 'small' }, icon))),
                 startAdornment && React.createElement(material.InputAdornment, { position: 'start' }, startAdornment),
                 muiInputProps.startAdornment));
         }
@@ -1202,7 +1203,7 @@ styleInject(css_248z$l);var FormTextField = React.forwardRef(function (_a, ref)
                                 });
                             }
                         } },
-                        React.createElement(reactComponent.PdgIcon, { fontSize: 'inherit' }, "ClearRounded")))),
+                        React.createElement(reactComponent.PdgIcon, { size: 'inherit' }, "ClearRounded")))),
                 muiInputProps.endAdornment,
                 endAdornment && React.createElement(material.InputAdornment, { position: 'end' }, endAdornment)));
         }
@@ -3676,7 +3677,7 @@ FormToggleButtonGroup.defaultProps = FormToggleButtonGroupDefaultProps;var FormR
     /********************************************************************************************************************
      * Render
      * ******************************************************************************************************************/
-    return (React.createElement(FormItemBase, { variant: variant, size: size, color: color, focused: focused, className: classNames(className, 'FormValueItem', 'FormRating'), labelIcon: labelIcon, label: label, error: error, fullWidth: false, required: required, helperText: error ? errorHelperText : helperText, helperTextProps: { style: { marginLeft: 5 } }, style: style, sx: sx, hidden: hidden, autoSize: true, controlHeight: height || (size === 'small' ? 21 : 26), controlVerticalCenter: true, control: React.createElement(material.Rating, { ref: ratingRef, size: size === 'medium' ? 'large' : 'medium', name: name, precision: precision, highlightSelectedOnly: highlightSelectedOnly, value: value, disabled: disabled || readOnly, max: max, icon: React.createElement(reactComponent.PdgIcon, { color: color, fontSize: 'inherit' }, icon ? icon : 'Star'), emptyIcon: React.createElement(reactComponent.PdgIcon, { fontSize: 'inherit' }, emptyIcon ? emptyIcon : 'StarBorder'), onChange: handleChange, onFocus: function () { return setFocused(initFocused || true); }, onBlur: function () { return setFocused(initFocused || false); } }) }));
+    return (React.createElement(FormItemBase, { variant: variant, size: size, color: color, focused: focused, className: classNames(className, 'FormValueItem', 'FormRating'), labelIcon: labelIcon, label: label, error: error, fullWidth: false, required: required, helperText: error ? errorHelperText : helperText, helperTextProps: { style: { marginLeft: 5 } }, style: style, sx: sx, hidden: hidden, autoSize: true, controlHeight: height || (size === 'small' ? 21 : 26), controlVerticalCenter: true, control: React.createElement(material.Rating, { ref: ratingRef, size: size === 'medium' ? 'large' : 'medium', name: name, precision: precision, highlightSelectedOnly: highlightSelectedOnly, value: value, disabled: disabled || readOnly, max: max, icon: React.createElement(reactComponent.PdgIcon, { color: color, size: 'inherit' }, icon ? icon : 'Star'), emptyIcon: React.createElement(reactComponent.PdgIcon, { size: 'inherit' }, emptyIcon ? emptyIcon : 'StarBorder'), onChange: handleChange, onFocus: function () { return setFocused(initFocused || true); }, onBlur: function () { return setFocused(initFocused || false); } }) }));
 });
 FormRating.displayName = 'FormRating';
 FormRating.defaultProps = FormRatingDefaultProps;var FormTextEditorDefaultProps = {
@@ -5264,7 +5265,7 @@ styleInject(css_248z$7);var PrivateDatePicker = React.forwardRef(function (_a, r
         if (startAdornment || icon || muiInputProps.startAdornment) {
             muiInputProps.startAdornment = (React.createElement(React.Fragment, null,
                 icon && (React.createElement(material.InputAdornment, { position: 'start' },
-                    React.createElement(reactComponent.PdgIcon, { fontSize: 'small' }, icon))),
+                    React.createElement(reactComponent.PdgIcon, { size: 'small' }, icon))),
                 startAdornment && React.createElement(material.InputAdornment, { position: 'start' }, startAdornment),
                 muiInputProps.startAdornment));
         }
@@ -6012,7 +6013,7 @@ PrivateStaticDateTimePicker.defaultProps = PrivateStaticDateTimePickerDefaultPro
         if (startAdornment || icon || muiInputProps.startAdornment) {
             muiInputProps.startAdornment = (React.createElement(React.Fragment, null,
                 icon && (React.createElement(material.InputAdornment, { position: 'start' },
-                    React.createElement(reactComponent.PdgIcon, { fontSize: 'small' }, icon))),
+                    React.createElement(reactComponent.PdgIcon, { size: 'small' }, icon))),
                 startAdornment && React.createElement(material.InputAdornment, { position: 'start' }, startAdornment),
                 muiInputProps.startAdornment));
         }
@@ -6132,7 +6133,7 @@ styleInject(css_248z$4);var PrivateInputDatePicker = React.forwardRef(function (
         if (startAdornment || icon || muiInputProps.startAdornment) {
             muiInputProps.startAdornment = (React.createElement(React.Fragment, null,
                 icon && (React.createElement(material.InputAdornment, { position: 'start' },
-                    React.createElement(reactComponent.PdgIcon, { fontSize: 'small' }, icon))),
+                    React.createElement(reactComponent.PdgIcon, { size: 'small' }, icon))),
                 startAdornment && React.createElement(material.InputAdornment, { position: 'start' }, startAdornment),
                 muiInputProps.startAdornment));
         }
@@ -10448,7 +10449,7 @@ FormYearRangePicker.defaultProps = FormYearRangePickerDefaultProps;var FormSwitc
     /********************************************************************************************************************
      * Render
      * ******************************************************************************************************************/
-    var switchControl = React.useMemo(function () { return (React.createElement(material.Switch, { size: size, name: name, checked: value, disabled: disabled, onChange: handleChange, onFocus: function () { return setFocused(initFocused || true); }, onBlur: function () { return setFocused(initFocused || false); } })); }, [disabled, handleChange, initFocused, name, setFocused, size, value]);
+    var switchControl = React.useMemo(function () { return (React.createElement(material.Switch, { size: size, name: name, checked: value, color: color, disabled: disabled, onChange: handleChange, onFocus: function () { return setFocused(initFocused || true); }, onBlur: function () { return setFocused(initFocused || false); } })); }, [color, disabled, handleChange, initFocused, name, setFocused, size, value]);
     return (React.createElement(FormItemBase, { variant: variant, size: size, color: color, focused: focused, className: classNames(className, 'FormValueItem', 'FormSwitch'), labelIcon: labelIcon, label: label, error: error, fullWidth: false, helperText: error ? errorHelperText : helperText, helperTextProps: { style: { marginLeft: 5 } }, style: style, sx: sx, hidden: hidden, autoSize: true, controlHeight: size === 'small' ? 21 : 26, controlVerticalCenter: true, control: switchLabel ? (React.createElement(material.FormControlLabel, { control: switchControl, label: switchLabel, disabled: disabled })) : (switchControl) }));
 });
 FormSwitch.displayName = 'FormSwitch';

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@pdg/react-form",
   "title": "React Form",
-  "version": "1.0.104",
+  "version": "1.0.106",
   "description": "React Form",
   "type": "module",
   "types": "dist/index.d.ts",
@@ -24,7 +24,8 @@
     "dev": "cd examples && npm run dev",
     "dev-prd-lib": "cd examples && npm run dev-prd-lib",
     "build": "rollup -c --bundleConfigAsCjs",
-    "pub": "npm i && npm run build && npm publish --access=public && rm ./.git/hooks/pre-commit",
+    "build:examples": "cd examples && npm run build",
+    "pub": "npm i && npm run build:examples && npm run build && npm publish --access=public && rm ./.git/hooks/pre-commit",
     "lint": "eslint './src/**/*.{ts,tsx}'",
     "reinstall-module": "rm -rf node_modules && rm -f package-lock.json && npm i"
   },
@@ -44,9 +45,9 @@
     "@mui/icons-material": "^5.15.13",
     "@mui/material": "^5.15.13",
     "@mui/x-date-pickers": "^6.19.7",
-    "@pdg/react-component": "^1.0.11",
-    "@pdg/react-hook": "^1.0.15",
-    "@pdg/util": "^1.0.19",
+    "@pdg/react-component": "^1.0.12",
+    "@pdg/react-hook": "^1.0.16",
+    "@pdg/util": "^1.0.20",
     "@tinymce/tinymce-react": "^4.3.2",
     "@types/react": "^17.0.0 || ^18.0.0",
     "classnames": "^2.5.1",