@pdg/react-form 1.0.33 → 1.0.35

package/dist/FormItemCustom/FormFile/FormFile.types.d.ts

@@ -1,6 +1,6 @@
 import { CommonSxProps, FormValueItemCommands, FormValueItemProps } from '../../@types';
 import { ReactNode } from 'react';
-export interface FormFileProps extends CommonSxProps, Omit<FormValueItemProps, 'readOnly'> {
+export interface FormFileProps extends CommonSxProps, FormValueItemProps {
     required?: boolean;
     accept?: string;
     hideUrl?: boolean;

package/dist/FormLayout/FormBlock/FormBlock.types.d.ts

@@ -4,5 +4,6 @@ import { FormContextValue } from '../../FormContext';
 export interface FormBlockProps extends CommonSxProps, PartialPick<FormContextValue, 'variant' | 'size' | 'color' | 'spacing' | 'focused' | 'labelShrink' | 'fullWidth'>, PartialPick<FormDividerProps, 'icon' | 'label' | 'line' | 'lineVerticalMargin' | 'hidden'> {
     collapse?: boolean;
     collapseIn?: boolean;
+    error?: boolean;
 }
 export declare const FormBlockDefaultProps: {};

package/dist/FormLayout/FormDivider/FormDivider.style.d.ts

@@ -1,2 +1,17 @@
 /// <reference types="react" />
-export declare const StyledLineDiv: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
+export declare const StyledLineBox: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material").Theme> & {
+    children?: import("react").ReactNode;
+    component?: import("react").ElementType<any> | undefined;
+    ref?: import("react").Ref<unknown> | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+} & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, ("border" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "borderColor" | "borderRadius" | "display" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignItems" | "alignContent" | "order" | "flex" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "color" | "zIndex" | "position" | "top" | "right" | "bottom" | "left" | "boxShadow" | "width" | "maxWidth" | "minWidth" | "height" | "maxHeight" | "minHeight" | "boxSizing" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "p" | "pt" | "pr" | "pb" | "pl" | "px" | "py" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "marginX" | "marginY" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "typography" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "letterSpacing" | "lineHeight" | "textAlign" | "textTransform") | "ref" | "children" | "component" | "sx"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+export declare const StyledErrorLineBox: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material").Theme> & {
+    children?: import("react").ReactNode;
+    component?: import("react").ElementType<any> | undefined;
+    ref?: import("react").Ref<unknown> | undefined;
+    sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
+} & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+    ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
+}, ("border" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "borderColor" | "borderRadius" | "display" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignItems" | "alignContent" | "order" | "flex" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "color" | "zIndex" | "position" | "top" | "right" | "bottom" | "left" | "boxShadow" | "width" | "maxWidth" | "minWidth" | "height" | "maxHeight" | "minHeight" | "boxSizing" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "p" | "pt" | "pr" | "pb" | "pl" | "px" | "py" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "marginX" | "marginY" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "typography" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "letterSpacing" | "lineHeight" | "textAlign" | "textTransform") | "ref" | "children" | "component" | "sx"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;

package/dist/FormLayout/FormDivider/FormDivider.types.d.ts

@@ -12,6 +12,7 @@ export interface FormDividerProps extends CommonSxProps {
     hidden?: boolean;
     collapse?: boolean;
     collapseIn?: boolean;
+    error?: boolean;
     onCollapseChange?(collapseIn: boolean): void;
 }
 export declare const FormDividerDefaultProps: FormDividerProps;

package/dist/index.esm.js

@@ -872,13 +872,24 @@ var templateObject_1$5, templateObject_2$1;var FormLabel = React__default.forwar
 FormLabel.displayName = 'FormLabel';
 FormLabel.defaultProps = FormLabelDefaultProps;var FormBlockDefaultProps = {};var FormDividerDefaultProps = {
     lineVerticalMargin: 9,
-};var StyledLineDiv = styled('div')(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n  border-bottom: thin solid #dfdfdf;\n  position: absolute;\n  left: 0;\n  top: 50%;\n  width: 100%;\n"], ["\n  border-bottom: thin solid #dfdfdf;\n  position: absolute;\n  left: 0;\n  top: 50%;\n  width: 100%;\n"])));
+};var StyledLineBox = styled(Box)(templateObject_1$4 || (templateObject_1$4 = __makeTemplateObject(["\n  border-bottom: thin solid #dfdfdf;\n  position: absolute;\n  left: 0;\n  top: 50%;\n  width: 100%;\n"], ["\n  border-bottom: thin solid #dfdfdf;\n  position: absolute;\n  left: 0;\n  top: 50%;\n  width: 100%;\n"])));
+var StyledErrorLineBox = styled(Box)(function (_a) {
+    var theme = _a.theme;
+    return ({
+        borderBottom: "thin solid ".concat(theme.palette.error.main),
+        position: 'absolute',
+        left: 0,
+        top: '50%',
+        width: '100%',
+        opacity: 0.4,
+    });
+});
 var templateObject_1$4;var DEFAULT_LINE_STYLE = { flex: 1, position: 'relative' };
 var FormDivider = React__default.forwardRef(function (_a, ref) {
     // FormState -------------------------------------------------------------------------------------------------------
     var initSize = _a.size, 
     //----------------------------------------------------------------------------------------------------------------
-    icon = _a.icon, label = _a.label, line = _a.line, lineVerticalMargin = _a.lineVerticalMargin, hidden = _a.hidden, collapse = _a.collapse, collapseIn = _a.collapseIn, onCollapseChange = _a.onCollapseChange, 
+    icon = _a.icon, label = _a.label, line = _a.line, lineVerticalMargin = _a.lineVerticalMargin, hidden = _a.hidden, collapse = _a.collapse, collapseIn = _a.collapseIn, error = _a.error, onCollapseChange = _a.onCollapseChange, 
     //----------------------------------------------------------------------------------------------------------------
     className = _a.className, initStyle = _a.style, sx = _a.sx;
     var formSize = useFormState().size;
@@ -917,16 +928,15 @@ var FormDivider = React__default.forwardRef(function (_a, ref) {
                 padding: 0,
                 cursor: collapse ? 'pointer' : undefined,
             }, onClick: handleClick },
-            icon && (React__default.createElement(FormIcon, { style: { opacity: 0.54, marginRight: 5 }, fontSize: size }, icon)),
+            icon && (React__default.createElement(FormIcon, { style: { opacity: 0.54, marginRight: 5 }, color: error ? 'error' : undefined, fontSize: size }, icon)),
             label && (React__default.createElement(Box, { sx: {
                     paddingRight: '10px',
-                    color: 'text.secondary',
+                    color: error ? 'error.main' : 'text.secondary',
                     fontWeight: 700,
                     fontSize: size === 'small' ? '11.5px' : '12px',
                 } }, label)),
-            (line || collapse) && (React__default.createElement("div", { style: lineStyle },
-                React__default.createElement(StyledLineDiv, null))),
-            collapse && (React__default.createElement(FormIcon, { sx: { opacity: 0.6, ml: 1 } }, collapseIn ? 'KeyboardDoubleArrowUp' : 'KeyboardDoubleArrowDown')))));
+            (line || collapse) && React__default.createElement("div", { style: lineStyle }, error ? React__default.createElement(StyledErrorLineBox, null) : React__default.createElement(StyledLineBox, null)),
+            collapse && (React__default.createElement(FormIcon, { sx: { opacity: 0.6, ml: 1 }, color: error ? 'error' : undefined }, collapseIn ? 'KeyboardDoubleArrowUp' : 'KeyboardDoubleArrowDown')))));
 });
 FormDivider.displayName = 'FormDivider.';
 FormDivider.defaultProps = FormDividerDefaultProps;function useFirstSkipEffect$1(effect, deps) {
@@ -996,7 +1006,7 @@ var templateObject_1$3;var FormBlock = React__default.forwardRef(function (_a, r
     // FormState -------------------------------------------------------------------------------------------------------
     var initVariant = _a.variant, initSize = _a.size, initColor = _a.color, initSpacing = _a.spacing, initFocused = _a.focused, initLabelShrink = _a.labelShrink, initFullWidth = _a.fullWidth, 
     //----------------------------------------------------------------------------------------------------------------
-    icon = _a.icon, label = _a.label, line = _a.line, lineVerticalMargin = _a.lineVerticalMargin, 
+    icon = _a.icon, label = _a.label, line = _a.line, lineVerticalMargin = _a.lineVerticalMargin, error = _a.error, 
     //----------------------------------------------------------------------------------------------------------------
     hidden = _a.hidden, collapse = _a.collapse, initCollapseIn = _a.collapseIn, 
     //----------------------------------------------------------------------------------------------------------------
@@ -1036,7 +1046,7 @@ var templateObject_1$3;var FormBlock = React__default.forwardRef(function (_a, r
     return (React__default.createElement(FormContext.Provider, { value: __assign$6({ variant: variant, size: size, color: color, spacing: spacing, focused: focused, labelShrink: labelShrink, fullWidth: fullWidth }, otherFormState) },
         React__default.createElement(Grid, { item: true, ref: ref, xs: 12, className: classNames$1(className, 'FormBlock'), style: style, sx: sx },
             React__default.createElement(Grid, { container: true, spacing: spacing },
-                (icon || label || line || collapse) && (React__default.createElement(FormDivider, { className: 'FormBlock-header', collapse: collapse, collapseIn: collapseIn, size: size, icon: icon, color: color, label: label, line: line, lineVerticalMargin: lineVerticalMargin, hidden: hidden, onCollapseChange: collapse ? function (newCollapseIn) { return setCollapseIn(newCollapseIn); } : undefined })),
+                (icon || label || line || collapse) && (React__default.createElement(FormDivider, { className: 'FormBlock-header', collapse: collapse, collapseIn: collapseIn, size: size, icon: icon, color: color, label: label, line: line, error: error, lineVerticalMargin: lineVerticalMargin, hidden: hidden, onCollapseChange: collapse ? function (newCollapseIn) { return setCollapseIn(newCollapseIn); } : undefined })),
                 React__default.createElement(StyledWrapGrid$1, { item: true, xs: 12 },
                     React__default.createElement(Container, __assign$6({}, containerProps),
                         React__default.createElement(Grid, { container: true, spacing: spacing },
@@ -1101,7 +1111,7 @@ var templateObject_1$2;var FormRow = React__default.forwardRef(function (_a, ref
     return (React__default.createElement(FormContext.Provider, { value: __assign$6({ variant: variant, size: size, color: color, spacing: spacing, focused: focused, labelShrink: labelShrink, fullWidth: fullWidth, formColAutoXs: formColAutoXs, onAddFormCol: handleAddFormCol, onRemoveFormCol: handleRemoveFormCol }, otherFormState) },
         React__default.createElement(Grid, { item: true, ref: ref, xs: 12, className: classNames$1(className, 'FormRow'), style: style, sx: sx },
             React__default.createElement(Grid, { container: true, spacing: spacing },
-                (icon || label || line) && (React__default.createElement(FormDivider, { className: classNames$1(className, 'FormRow-header'), size: size, icon: icon, color: color, label: label, line: line, lineVerticalMargin: lineVerticalMargin, hidden: hidden })),
+                (icon || label || line) && (React__default.createElement(FormDivider, { className: classNames$1(className, 'FormRow-header'), size: size, icon: icon, color: color, label: label, line: line, error: error, lineVerticalMargin: lineVerticalMargin, hidden: hidden })),
                 React__default.createElement(StyledWrapGrid, { item: true, xs: 12, className: 'FormRow-body' },
                     React__default.createElement(Grid, { className: 'FormRow-content', container: true, spacing: spacing, direction: 'row', style: { flexWrap: 'nowrap' } }, children),
                     helperText && (React__default.createElement(FormHelperText, { className: 'FormRow-helper-text', component: 'div', error: error }, helperText)))))));
@@ -2558,7 +2568,7 @@ styleInject(css_248z$h);var FormTag = React__default.forwardRef(function (_a, re
             onBlur(e);
     }, [appendTag, inputValue, onBlur]);
     var handleRenderTags = useCallback(function (tags) {
-        return tags.map(function (tag) { return (React__default.createElement(Chip, { className: 'MuiAutocomplete-tag', key: tag, label: tag, size: 'small', disabled: disabled, onDelete: readOnly || disabled ? undefined : function () { return removeTag(tag); } })); });
+        return tags.map(function (tag) { return (React__default.createElement(Chip, { className: 'MuiAutocomplete-tag', key: tag, label: tag, size: 'small', disabled: readOnly || disabled, onDelete: readOnly || disabled ? undefined : function () { return removeTag(tag); } })); });
     }, [disabled, readOnly, removeTag]);
     // Render ----------------------------------------------------------------------------------------------------------
     return (React__default.createElement(FormContextProvider, { value: __assign$6({ fullWidth: formFullWidth, onAddValueItem: handleAddValueItem, 
@@ -4110,6 +4120,7 @@ NumberFormatCustom.displayName = 'NumberFormatCustom';var FormNumberDefaultProps
     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, tabIndex = _a.tabIndex, initMuiInputProps = _a.InputProps, props = __rest$3(_a, ["className", "allowLeadingZeros", "allowNegative", "thousandSeparator", "allowDecimal", "decimalScale", "prefix", "suffix", "readOnly", "tabIndex", "InputProps"]);
     var muiInputProps = useMemo(function () {
         var inputProps = {
+            className: readOnly ? 'Mui-disabled' : undefined,
             allowLeadingZeros: allowLeadingZeros,
             allowNegative: allowNegative,
             thousandSeparator: thousandSeparator,
@@ -7911,7 +7922,7 @@ FormTextEditor.defaultProps = FormTextEditorDefaultProps;var FormAutocompleteDef
             }
         }, renderTags: function (value, getTagProps) {
             return value.map(function (option, index) { return (React__default.createElement(Chip, __assign$6({ size: 'small', label: onRenderTag ? onRenderTag(option) : option.label }, getTagProps({ index: index })))); });
-        }, renderInput: function (params) { return (React__default.createElement(FormTextField, __assign$6({}, 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$6(__assign$6({}, params.InputProps), { endAdornment: (React__default.createElement(React__default.Fragment, null,
+        }, renderInput: function (params) { return (React__default.createElement(FormTextField, __assign$6({}, params, { ref: textFieldRef, name: name, variant: variant, size: size, color: color, labelIcon: labelIcon, label: label, labelShrink: labelShrink, required: required, focused: focused, error: error, readOnly: readOnly, helperText: helperText, placeholder: placeholder, noFormValueItem: true, InputProps: __assign$6(__assign$6({}, params.InputProps), { endAdornment: (React__default.createElement(React__default.Fragment, null,
                     loading || isOnGetItemLoading ? React__default.createElement(CircularProgress$1, { color: 'inherit', size: 20 }) : null,
                     params.InputProps.endAdornment)) }), inputProps: readOnly || disabled ? __assign$6(__assign$6({}, params.inputProps), { tabIndex: -1 }) : params.inputProps }))); } }));
 });
@@ -10501,6 +10512,7 @@ styleInject(css_248z$5);var PrivateDatePicker = React__default.forwardRef(functi
                                 var inputProps = __assign$6(__assign$6({}, initInputProps), { readOnly: readOnly });
                                 if (readOnly) {
                                     inputProps.tabIndex = -1;
+                                    inputProps.className = classNames$1(inputProps.className, 'Mui-disabled');
                                 }
                                 var muiInputProps = __assign$6(__assign$6({}, initMuiInputProps), { endAdornment: undefined });
                                 if (startAdornment || icon || muiInputProps.startAdornment) {
@@ -11070,6 +11082,7 @@ styleInject(css_248z$2);var InputDatePicker = function (_a) {
             var inputProps = __assign$6({}, initInputProps);
             if (readOnly) {
                 inputProps.tabIndex = -1;
+                inputProps.className = classNames$1(inputProps.className, 'Mui-disabled');
             }
             return (React__default.createElement(TextField, __assign$6({}, params, { style: __assign$6(__assign$6({}, inputStyle), style), variant: variant, size: size, color: color, focused: focused, fullWidth: fullWidth, required: required, name: id, label: label, error: error || inputError, inputRef: function (ref) {
                     if (inputInputRef) {
@@ -11672,7 +11685,7 @@ styleInject(css_248z$1);var FormFile = React__default.forwardRef(function (_a, r
     //----------------------------------------------------------------------------------------------------------------
     accept = _a.accept, hideUrl = _a.hideUrl, hideLink = _a.hideLink, maxFileSize = _a.maxFileSize, preview = _a.preview, hidden = _a.hidden, onFile = _a.onFile, onLink = _a.onLink, 
     //----------------------------------------------------------------------------------------------------------------
-    name = _a.name, labelIcon = _a.labelIcon, initLabel = _a.label, required = _a.required, initDisabled = _a.disabled, initError = _a.error, initHelperText = _a.helperText, initValue = _a.value, exceptValue = _a.exceptValue, onChange = _a.onChange, onValidate = _a.onValidate, 
+    name = _a.name, labelIcon = _a.labelIcon, initLabel = _a.label, required = _a.required, readOnly = _a.readOnly, initDisabled = _a.disabled, initError = _a.error, initHelperText = _a.helperText, initValue = _a.value, exceptValue = _a.exceptValue, onChange = _a.onChange, onValidate = _a.onValidate, 
     //----------------------------------------------------------------------------------------------------------------
     className = _a.className;
     var id = useId();
@@ -11907,16 +11920,16 @@ styleInject(css_248z$1);var FormFile = React__default.forwardRef(function (_a, r
                 React__default.createElement(TextField, { inputRef: textFieldRef, className: 'file-name', variant: variant, label: label, size: size, required: required, value: value || '', focused: focused, disabled: disabled, fullWidth: true, error: error, InputLabelProps: labelShrink ? { shrink: labelShrink } : undefined, inputProps: { readOnly: true, tabIndex: -1 }, InputProps: {
                         endAdornment: (React__default.createElement(InputAdornment, { position: 'end' },
                             React__default.createElement("div", { className: 'input-file-wrap' },
-                                React__default.createElement(Button, { variant: 'text', className: 'input-file-btn form-file-btn', color: error ? 'error' : color, disabled: disabled, ref: fileUploadBtnRef },
+                                React__default.createElement(Button, { variant: 'text', className: 'input-file-btn form-file-btn', color: error ? 'error' : color, disabled: readOnly || disabled, ref: fileUploadBtnRef },
                                     React__default.createElement("label", { htmlFor: id },
                                         React__default.createElement(FormIcon, null, "upload"),
                                         "\uD30C\uC77C \uC5C5\uB85C\uB4DC")),
                                 React__default.createElement("input", { type: 'file', accept: accept, id: id, value: fileValue, className: 'input-file', onChange: handleFileChange }),
-                                !hideLink && (React__default.createElement(Button, { variant: 'text', className: 'link-btn  form-file-btn', color: error ? 'error' : color, disabled: disabled, onClick: handleLinkClick },
+                                !hideLink && (React__default.createElement(Button, { variant: 'text', className: 'link-btn  form-file-btn', color: error ? 'error' : color, disabled: readOnly || disabled, onClick: handleLinkClick },
                                     React__default.createElement("label", null,
                                         React__default.createElement(FormIcon, null, "link"),
                                         "\uB9C1\uD06C"))),
-                                notEmpty(value) && (React__default.createElement(Button, { variant: 'text', className: 'remove-btn form-file-btn', color: error ? 'error' : color, disabled: disabled, onClick: handleRemoveClick },
+                                notEmpty(value) && (React__default.createElement(Button, { variant: 'text', className: 'remove-btn form-file-btn', color: error ? 'error' : color, disabled: readOnly || disabled, onClick: handleRemoveClick },
                                     React__default.createElement("label", null,
                                         React__default.createElement(FormIcon, null, "Close"),
                                         "\uC0AD\uC81C")))))),