@pdg/react-form 1.0.35 → 1.0.37

package/dist/index.js

@@ -823,11 +823,11 @@ Form.displayName = 'Form';
 Form.defaultProps = FormDefaultProps;var FormButtonDefaultProps = {
     type: 'button',
 };var FormIconDefaultProps = {};var FormIcon = React__default["default"].forwardRef(function (_a, ref) {
-    // Memo --------------------------------------------------------------------------------------------------------------
-    var className = _a.className, initChildren = _a.children, props = __rest$3(_a, ["className", "children"]);
-    var children = React.useMemo(function () { return initChildren.replace(/[A-Z]/g, function (letter, idx) { return "".concat(idx > 0 ? '_' : '').concat(letter.toLowerCase()); }); }, [initChildren]);
-    // Render ----------------------------------------------------------------------------------------------------------
-    return (React__default["default"].createElement(material.Icon, __assign$6({ ref: ref }, props, { className: classNames$1('FormIcon', className) }), children));
+    var className = _a.className, InitChildren = _a.children, props = __rest$3(_a, ["className", "children"]);
+    return React.useMemo(function () {
+        var iconProps = __assign$6(__assign$6({}, props), { className: classNames$1('FormIcon', className) });
+        return typeof InitChildren === 'string' ? (React__default["default"].createElement(material.Icon, __assign$6({ ref: ref }, iconProps), InitChildren.replace(/[A-Z]/g, function (letter, idx) { return "".concat(idx > 0 ? '_' : '').concat(letter.toLowerCase()); }))) : (React__default["default"].createElement(InitChildren, __assign$6({}, iconProps)));
+    }, [InitChildren, className, props, ref]);
 });
 FormIcon.displayName = 'FormIcon';
 FormIcon.defaultProps = FormIconDefaultProps;var FormButton = React__default["default"].forwardRef(function (_a, ref) {
@@ -861,9 +861,17 @@ FormButton.displayName = 'FormButton';
 FormButton.defaultProps = FormButtonDefaultProps;var FormLabelDefaultProps = {};var IconFormIcon = material.styled(FormIcon)(templateObject_1$5 || (templateObject_1$5 = __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"])));
 var ChildrenSpan = material.styled('span')(templateObject_2$1 || (templateObject_2$1 = __makeTemplateObject(["\n  vertical-align: middle;\n"], ["\n  vertical-align: middle;\n"])));
 var templateObject_1$5, templateObject_2$1;var FormLabel = React__default["default"].forwardRef(function (_a, ref) {
+    // Use ---------------------------------------------------------------------------------------------------------------
+    var children = _a.children, icon = _a.icon, size = _a.size, style = _a.style, error = _a.error, warning = _a.warning, props = __rest$3(_a, ["children", "icon", "size", "style", "error", "warning"]);
+    var theme = material.useTheme();
     // Memo --------------------------------------------------------------------------------------------------------------
-    var children = _a.children, icon = _a.icon, size = _a.size, style = _a.style, props = __rest$3(_a, ["children", "icon", "size", "style"]);
-    var finalProps = React.useMemo(function () { return (__assign$6(__assign$6({ shrink: true, className: 'FormItemBase-InputLabel', size: size === 'medium' ? 'normal' : size }, props), { style: __assign$6({ height: 20, transform: size === 'small' ? 'translate(0, -1.5px) scale(0.7)' : undefined }, style) })); }, [props, size, style]);
+    var finalProps = React.useMemo(function () {
+        var newStyle = __assign$6({ height: 20, transform: size === 'small' ? 'translate(0, -1.5px) scale(0.7)' : undefined }, style);
+        if (!error) {
+            newStyle.color = warning ? theme.palette.warning.main : style === null || style === void 0 ? void 0 : style.color;
+        }
+        return __assign$6({ shrink: true, className: 'FormItemBase-InputLabel', size: size === 'medium' ? 'normal' : size, error: error, style: newStyle }, props);
+    }, [size, style, warning, error, props, theme.palette.warning.main]);
     // Render ------------------------------------------------------------------------------------------------------------
     return (React__default["default"].createElement(material.InputLabel, __assign$6({ ref: ref }, finalProps), icon ? (React__default["default"].createElement(React__default["default"].Fragment, null,
         React__default["default"].createElement(IconFormIcon, null, icon),
@@ -884,12 +892,23 @@ var StyledErrorLineBox = material.styled(material.Box)(function (_a) {
         opacity: 0.4,
     });
 });
+var StyledWarningLineBox = material.styled(material.Box)(function (_a) {
+    var theme = _a.theme;
+    return ({
+        borderBottom: "thin solid ".concat(theme.palette.warning.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["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, error = _a.error, 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, warning = _a.warning, onCollapseChange = _a.onCollapseChange, 
     //----------------------------------------------------------------------------------------------------------------
     className = _a.className, initStyle = _a.style, sx = _a.sx;
     var formSize = useFormState().size;
@@ -928,15 +947,15 @@ var FormDivider = React__default["default"].forwardRef(function (_a, ref) {
                 padding: 0,
                 cursor: collapse ? 'pointer' : undefined,
             }, onClick: handleClick },
-            icon && (React__default["default"].createElement(FormIcon, { style: { opacity: 0.54, marginRight: 5 }, color: error ? 'error' : undefined, fontSize: size }, icon)),
+            icon && (React__default["default"].createElement(FormIcon, { style: { opacity: 0.54, marginRight: 5 }, color: error ? 'error' : warning ? 'warning' : undefined, fontSize: size }, icon)),
             label && (React__default["default"].createElement(material.Box, { sx: {
                     paddingRight: '10px',
-                    color: error ? 'error.main' : 'text.secondary',
+                    color: error ? 'error.main' : warning ? 'warning.main' : 'text.secondary',
                     fontWeight: 700,
                     fontSize: size === 'small' ? '11.5px' : '12px',
                 } }, label)),
-            (line || collapse) && React__default["default"].createElement("div", { style: lineStyle }, error ? React__default["default"].createElement(StyledErrorLineBox, null) : React__default["default"].createElement(StyledLineBox, null)),
-            collapse && (React__default["default"].createElement(FormIcon, { sx: { opacity: 0.6, ml: 1 }, color: error ? 'error' : undefined }, collapseIn ? 'KeyboardDoubleArrowUp' : 'KeyboardDoubleArrowDown')))));
+            (line || collapse) && (React__default["default"].createElement("div", { style: lineStyle }, error ? React__default["default"].createElement(StyledErrorLineBox, null) : warning ? React__default["default"].createElement(StyledWarningLineBox, null) : React__default["default"].createElement(StyledLineBox, null))),
+            collapse && (React__default["default"].createElement(FormIcon, { sx: { opacity: 0.6, ml: 1 }, color: error ? 'error' : warning ? 'warning' : undefined }, collapseIn ? 'KeyboardDoubleArrowUp' : 'KeyboardDoubleArrowDown')))));
 });
 FormDivider.displayName = 'FormDivider.';
 FormDivider.defaultProps = FormDividerDefaultProps;function useFirstSkipEffect$1(effect, deps) {
@@ -1006,7 +1025,7 @@ var templateObject_1$3;var FormBlock = React__default["default"].forwardRef(func
     // 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, error = _a.error, 
+    icon = _a.icon, label = _a.label, line = _a.line, lineVerticalMargin = _a.lineVerticalMargin, error = _a.error, warning = _a.warning, 
     //----------------------------------------------------------------------------------------------------------------
     hidden = _a.hidden, collapse = _a.collapse, initCollapseIn = _a.collapseIn, 
     //----------------------------------------------------------------------------------------------------------------
@@ -1046,7 +1065,7 @@ var templateObject_1$3;var FormBlock = React__default["default"].forwardRef(func
     return (React__default["default"].createElement(FormContext.Provider, { value: __assign$6({ variant: variant, size: size, color: color, spacing: spacing, focused: focused, labelShrink: labelShrink, fullWidth: fullWidth }, otherFormState) },
         React__default["default"].createElement(material.Grid, { item: true, ref: ref, xs: 12, className: classNames$1(className, 'FormBlock'), style: style, sx: sx },
             React__default["default"].createElement(material.Grid, { container: true, spacing: spacing },
-                (icon || label || line || collapse) && (React__default["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 })),
+                (icon || label || line || collapse) && (React__default["default"].createElement(FormDivider, { className: 'FormBlock-header', collapse: collapse, collapseIn: collapseIn, size: size, icon: icon, color: color, label: label, line: line, error: error, warning: warning, lineVerticalMargin: lineVerticalMargin, hidden: hidden, onCollapseChange: collapse ? function (newCollapseIn) { return setCollapseIn(newCollapseIn); } : undefined })),
                 React__default["default"].createElement(StyledWrapGrid$1, { item: true, xs: 12 },
                     React__default["default"].createElement(Container, __assign$6({}, containerProps),
                         React__default["default"].createElement(material.Grid, { container: true, spacing: spacing },
@@ -1061,7 +1080,7 @@ var templateObject_1$2;var FormRow = React__default["default"].forwardRef(functi
     //----------------------------------------------------------------------------------------------------------------
     icon = _a.icon, label = _a.label, line = _a.line, lineVerticalMargin = _a.lineVerticalMargin, 
     //----------------------------------------------------------------------------------------------------------------
-    hidden = _a.hidden, error = _a.error, helperText = _a.helperText, 
+    hidden = _a.hidden, error = _a.error, warning = _a.warning, helperText = _a.helperText, 
     //----------------------------------------------------------------------------------------------------------------
     children = _a.children, className = _a.className, initStyle = _a.style, sx = _a.sx;
     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$3(_b, ["variant", "size", "color", "spacing", "focused", "labelShrink", "fullWidth"]);
@@ -1111,7 +1130,7 @@ var templateObject_1$2;var FormRow = React__default["default"].forwardRef(functi
     return (React__default["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["default"].createElement(material.Grid, { item: true, ref: ref, xs: 12, className: classNames$1(className, 'FormRow'), style: style, sx: sx },
             React__default["default"].createElement(material.Grid, { container: true, spacing: spacing },
-                (icon || label || line) && (React__default["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 })),
+                (icon || label || line) && (React__default["default"].createElement(FormDivider, { className: classNames$1(className, 'FormRow-header'), size: size, icon: icon, color: color, label: label, line: line, error: error, warning: warning, lineVerticalMargin: lineVerticalMargin, hidden: hidden })),
                 React__default["default"].createElement(StyledWrapGrid, { item: true, xs: 12, className: 'FormRow-body' },
                     React__default["default"].createElement(material.Grid, { className: 'FormRow-content', container: true, spacing: spacing, direction: 'row', style: { flexWrap: 'nowrap' } }, children),
                     helperText && (React__default["default"].createElement(material.FormHelperText, { className: 'FormRow-helper-text', component: 'div', error: error }, helperText)))))));
@@ -1968,7 +1987,7 @@ function useResizeDetector(props) {
     // ID --------------------------------------------------------------------------------------------------------------
     var initVariant = _a.variant, initSize = _a.size, initColor = _a.color, initSpacing = _a.spacing, initFocused = _a.focused, initLabelShrink = _a.labelShrink, initFullWidth = _a.fullWidth, 
     //----------------------------------------------------------------------------------------------------------------
-    initGap = _a.gap, icon = _a.icon, label = _a.label, hidden = _a.hidden, error = _a.error, helperText = _a.helperText, helperTextShift = _a.helperTextShift, 
+    initGap = _a.gap, icon = _a.icon, label = _a.label, hidden = _a.hidden, error = _a.error, warning = _a.warning, helperText = _a.helperText, helperTextShift = _a.helperTextShift, 
     //----------------------------------------------------------------------------------------------------------------
     xs = _a.xs, className = _a.className, children = _a.children, initStyle = _a.style, sx = _a.sx;
     var id = React.useId();
@@ -2023,7 +2042,7 @@ function useResizeDetector(props) {
             React__default["default"].createElement(material.Grid, { container: true, direction: 'column' },
                 label && (React__default["default"].createElement(material.Grid, { item: true, className: 'FormCol-header' },
                     React__default["default"].createElement("div", { style: { position: 'relative', height: 20 } },
-                        React__default["default"].createElement(FormLabel, { className: 'FormCol-FormLabel', size: size, icon: icon, focused: focused, color: color, error: error, style: { position: 'absolute', left: 5, top: 0 } }, label)))),
+                        React__default["default"].createElement(FormLabel, { className: 'FormCol-FormLabel', size: size, icon: icon, focused: focused, color: color, error: error, warning: warning, style: { position: 'absolute', left: 5, top: 0 } }, label)))),
                 React__default["default"].createElement(material.Grid, { item: true, xs: 2, className: 'FormCol-content' },
                     React__default["default"].createElement(material.Box, { sx: { display: 'flex', flexWrap: 'wrap', gap: gap } }, children)),
                 helperText && (React__default["default"].createElement(material.Grid, { item: true, className: 'FormCol-helper-text' },