@pdg/react-form 1.0.14 → 1.0.16

package/dist/index.js

@@ -965,12 +965,13 @@ FormButton.defaultProps = FormButtonDefaultProps;var FormLabelDefaultProps = {};
 FormLabel.displayName = 'FormLabel';
 FormLabel.defaultProps = FormLabelDefaultProps;var FormBlockDefaultProps = {};var FormDividerDefaultProps = {
     lineVerticalMargin: 9,
-};var DEFAULT_LINE_STYLE = { flex: 1, position: 'relative' };
+};var StyledLineDiv = material.styled('div')(templateObject_1$3 || (templateObject_1$3 = __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 templateObject_1$3;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, 
+    icon = _a.icon, label = _a.label, line = _a.line, lineVerticalMargin = _a.lineVerticalMargin, hidden = _a.hidden, collapse = _a.collapse, collapseIn = _a.collapseIn, onCollapseChange = _a.onCollapseChange, 
     //----------------------------------------------------------------------------------------------------------------
     className = _a.className, initStyle = _a.style, sx = _a.sx;
     var formSize = useFormState().size;
@@ -994,9 +995,22 @@ var FormDivider = React__default["default"].forwardRef(function (_a, ref) {
             return DEFAULT_LINE_STYLE;
         }
     }, [lineVerticalMargin]))[0];
+    // Event Handler -----------------------------------------------------------------------------------------------------
+    var handleClick = React.useCallback(function () {
+        if (collapse) {
+            onCollapseChange && onCollapseChange(!collapseIn);
+        }
+    }, [collapse, collapseIn, onCollapseChange]);
     // Render ----------------------------------------------------------------------------------------------------------
-    return (React__default["default"].createElement(material.Grid, { ref: ref, item: true, xs: 12, style: style, className: className, sx: sx },
-        React__default["default"].createElement(material.Box, { sx: { display: 'flex', py: 1, alignItems: 'center', justifyItems: 'center', padding: 0 } },
+    return (React__default["default"].createElement(material.Grid, { ref: ref, item: true, xs: 12, style: style, className: classNames$1(className, 'FormDivider'), sx: sx },
+        React__default["default"].createElement(material.Box, { sx: {
+                display: 'flex',
+                py: 1,
+                alignItems: 'center',
+                justifyItems: 'center',
+                padding: 0,
+                cursor: collapse ? 'pointer' : undefined,
+            }, onClick: handleClick },
             icon && (React__default["default"].createElement(FormIcon, { style: { opacity: 0.54, marginRight: 5 }, fontSize: size }, icon)),
             label && (React__default["default"].createElement(material.Box, { sx: {
                     paddingRight: '10px',
@@ -1004,14 +1018,9 @@ var FormDivider = React__default["default"].forwardRef(function (_a, ref) {
                     fontWeight: 700,
                     fontSize: size === 'small' ? '11.5px' : '12px',
                 } }, label)),
-            line && (React__default["default"].createElement("div", { style: lineStyle },
-                React__default["default"].createElement("div", { style: {
-                        borderBottom: 'thin solid #dfdfdf',
-                        position: 'absolute',
-                        left: 0,
-                        top: '50%',
-                        width: '100%',
-                    } }))))));
+            (line || collapse) && (React__default["default"].createElement("div", { style: lineStyle },
+                React__default["default"].createElement(StyledLineDiv, null))),
+            collapse && (React__default["default"].createElement(FormIcon, { sx: { opacity: 0.6, ml: 1 } }, collapseIn ? 'KeyboardDoubleArrowUp' : 'KeyboardDoubleArrowDown')))));
 });
 FormDivider.displayName = 'FormDivider.';
 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"])));
@@ -1021,7 +1030,7 @@ var templateObject_1$2;var FormBlock = React__default["default"].forwardRef(func
     //----------------------------------------------------------------------------------------------------------------
     icon = _a.icon, label = _a.label, line = _a.line, lineVerticalMargin = _a.lineVerticalMargin, 
     //----------------------------------------------------------------------------------------------------------------
-    hidden = _a.hidden, 
+    hidden = _a.hidden, collapse = _a.collapse, initCollapseIn = _a.collapseIn, 
     //----------------------------------------------------------------------------------------------------------------
     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$2(_b, ["variant", "size", "color", "spacing", "focused", "labelShrink", "fullWidth"]);
@@ -1033,6 +1042,8 @@ var templateObject_1$2;var FormBlock = React__default["default"].forwardRef(func
     var focused = useAutoUpdateState$1(initFocused || formFocused)[0];
     var labelShrink = useAutoUpdateState$1(initLabelShrink || formLabelShrink)[0];
     var fullWidth = useAutoUpdateState$1(initFullWidth == null ? formFullWidth : initFullWidth)[0];
+    // State -------------------------------------------------------------------------------------------------------------
+    var _c = React.useState(initCollapseIn), collapseIn = _c[0], setCollapseIn = _c[1];
     // State - style ---------------------------------------------------------------------------------------------------
     var style = useAutoUpdateState$1(React.useCallback(function () {
         if (hidden) {
@@ -1042,11 +1053,27 @@ var templateObject_1$2;var FormBlock = React__default["default"].forwardRef(func
             return initStyle;
         }
     }, [initStyle, hidden]))[0];
+    // Effect ------------------------------------------------------------------------------------------------------------
+    React.useEffect(function () {
+        setCollapseIn(initCollapseIn);
+    }, [initCollapseIn]);
+    // Memo --------------------------------------------------------------------------------------------------------------
+    var Container = React.useMemo(function () {
+        return collapse ? material.Collapse : React__default["default"].Fragment;
+    }, [collapse]);
+    var containerProps = React.useMemo(function () {
+        return collapse ? { in: collapseIn } : undefined;
+    }, [collapse, collapseIn]);
     // Render ----------------------------------------------------------------------------------------------------------
     return (React__default["default"].createElement(FormContext.Provider, { value: __assign$4({ variant: variant, size: size, color: color, spacing: spacing, focused: focused, labelShrink: labelShrink, fullWidth: fullWidth }, otherFormState) },
-        (icon || label || line) && (React__default["default"].createElement(FormDivider, { size: size, icon: icon, color: color, label: label, line: line, lineVerticalMargin: lineVerticalMargin, hidden: hidden })),
-        React__default["default"].createElement(StyledWrapGrid$1, { ref: ref, item: true, xs: 12, className: classNames$1(className, 'FormBlock'), style: style, sx: sx },
-            React__default["default"].createElement(material.Grid, { container: true, spacing: spacing }, children))));
+        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, 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$4({}, containerProps),
+                        React__default["default"].createElement(material.Grid, { container: true, spacing: spacing },
+                            React__default["default"].createElement(StyledWrapGrid$1, { item: true, xs: 12, className: 'FormBlock-body' },
+                                React__default["default"].createElement(material.Grid, { className: 'FormBlock-content', container: true, spacing: spacing }, children)))))))));
 });
 FormBlock.displayName = 'FormBlock';
 FormBlock.defaultProps = FormBlockDefaultProps;var FormRowDefaultProps = {};var StyledWrapGrid = material.styled(material.Grid)(templateObject_1$1 || (templateObject_1$1 = __makeTemplateObject(["\n  width: 100%;\n"], ["\n  width: 100%;\n"])));
@@ -1104,10 +1131,12 @@ var templateObject_1$1;var FormRow = React__default["default"].forwardRef(functi
     }, []);
     //------------------------------------------------------------------------------------------------------------------
     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) },
-        (icon || label || line) && (React__default["default"].createElement(FormDivider, { size: size, icon: icon, color: color, label: label, line: line, lineVerticalMargin: lineVerticalMargin, hidden: hidden })),
-        React__default["default"].createElement(StyledWrapGrid, { ref: ref, item: true, className: classNames$1(className, 'FormRow'), xs: 12, style: style, sx: sx },
-            React__default["default"].createElement(material.Grid, { container: true, spacing: spacing, direction: 'row', style: { flexWrap: 'nowrap' } }, children),
-            helperText && (React__default["default"].createElement(material.FormHelperText, { component: 'div', error: error }, helperText)))));
+        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, 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)))))));
 });
 FormRow.displayName = 'FormRow';
 FormRow.defaultProps = FormRowDefaultProps;/* global Reflect, Promise */
@@ -2012,12 +2041,12 @@ function useResizeDetector(props) {
     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) },
         React__default["default"].createElement(material.Grid, { ref: resizeDetectorRef, item: true, xs: xs || formColAutoXs || 12, className: classNames$1(className, 'FormCol', !!label && 'with-label', !!helperText && 'with-helper-text'), style: style, sx: sx },
             React__default["default"].createElement(material.Grid, { container: true, direction: 'column' },
-                label && (React__default["default"].createElement(material.Grid, { item: true },
+                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(material.Grid, { item: true, xs: 2 },
+                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 },
+                helperText && (React__default["default"].createElement(material.Grid, { item: true, className: 'FormCol-helper-text' },
                     React__default["default"].createElement(material.FormHelperText, { component: 'div', error: error, style: { marginLeft: helperTextShift ? 14 : 5 } }, helperText)))))));
 });
 FormCol.displayName = 'FormCol';
@@ -2046,8 +2075,8 @@ FormCol.defaultProps = FormColDefaultProps;var FormTextFieldDefaultProps = {};fu
   } else {
     style.appendChild(document.createTextNode(css));
   }
-}var css_248z$i = ".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$i);var FormTextField = React__default["default"].forwardRef(function (_a, ref) {
+}var css_248z$j = ".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$j);var FormTextField = React__default["default"].forwardRef(function (_a, ref) {
     // ID --------------------------------------------------------------------------------------------------------------
     var _b;
     var initVariant = _a.variant, initSize = _a.size, initColor = _a.color, initFocused = _a.focused, initLabelShrink = _a.labelShrink, initFullWidth = _a.fullWidth, 
@@ -2341,7 +2370,8 @@ FormTextField.defaultProps = FormTextFieldDefaultProps;var FormTextDefaultProps
     return React__default["default"].createElement(FormTextField, __assign$4({ ref: ref, className: classNames$1(className, 'FormText'), onValue: handleValue }, props));
 });
 FormText.displayName = 'FormText';
-FormText.defaultProps = FormTextDefaultProps;var FormHiddenDefaultProps = {};var FormHidden = React__default["default"].forwardRef(function (_a, ref) {
+FormText.defaultProps = FormTextDefaultProps;var FormHiddenDefaultProps = {};var css_248z$i = ".FormHidden {\n  display: none !important;\n}";
+styleInject(css_248z$i);var FormHidden = React__default["default"].forwardRef(function (_a, ref) {
     var className = _a.className, props = __rest$2(_a, ["className"]);
     return (React__default["default"].createElement(FormText, __assign$4({ ref: ref, className: classNames$1(className, 'FormHidden'), type: 'hidden', variant: 'standard' }, props)));
 });
@@ -7666,7 +7696,7 @@ FormTextEditor.defaultProps = FormTextEditorDefaultProps;var FormAutocompleteDef
         }
     }, [value, multiple, readOnly, getFinalValue, name, onValueChangeByUser, onRequestSearchSubmit, onAddItem]);
     // Render ----------------------------------------------------------------------------------------------------------
-    return (React__default["default"].createElement(material.Autocomplete, { options: items || [], className: classNames$1(className, '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) {
+    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) {
             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 })))); });
         }, 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,
                     loading || isOnGetItemLoading ? React__default["default"].createElement(CircularProgress__default["default"], { color: 'inherit', size: 20 }) : null,
@@ -14493,7 +14523,7 @@ styleInject(css_248z$5);var PrivateDatePicker = React__default["default"].forwar
     //--------------------------------------------------------------------------------------------------------------------
     name = _a.name, type = _a.type, time = _a.time, initValue = _a.value, initLabel = _a.label, labelIcon = _a.labelIcon, initFormat = _a.format, initFormValueFormat = _a.formValueFormat, required = _a.required, readOnly = _a.readOnly, initDisabled = _a.disabled, width = _a.width, initError = _a.error, initHelperText = _a.helperText, minDate = _a.minDate, maxDate = _a.maxDate, disableFuture = _a.disableFuture, disablePast = _a.disablePast, exceptValue = _a.exceptValue, icon = _a.icon, startAdornment = _a.startAdornment, endAdornment = _a.endAdornment, align = _a.align, hours = _a.hours, minutes = _a.minutes, seconds = _a.seconds, minuteInterval = _a.minuteInterval, secondInterval = _a.secondInterval, readOnlyInput = _a.readOnlyInput, onChange = _a.onChange, onValidate = _a.onValidate, 
     //--------------------------------------------------------------------------------------------------------------------
-    initStyle = _a.style, sx = _a.sx, otherProps = __rest$2(_a, ["variant", "size", "color", "focused", "labelShrink", "fullWidth", "name", "type", "time", "value", "label", "labelIcon", "format", "formValueFormat", "required", "readOnly", "disabled", "width", "error", "helperText", "minDate", "maxDate", "disableFuture", "disablePast", "exceptValue", "icon", "startAdornment", "endAdornment", "align", "hours", "minutes", "seconds", "minuteInterval", "secondInterval", "readOnlyInput", "onChange", "onValidate", "style", "sx"]);
+    className = _a.className, initStyle = _a.style, sx = _a.sx, otherProps = __rest$2(_a, ["variant", "size", "color", "focused", "labelShrink", "fullWidth", "name", "type", "time", "value", "label", "labelIcon", "format", "formValueFormat", "required", "readOnly", "disabled", "width", "error", "helperText", "minDate", "maxDate", "disableFuture", "disablePast", "exceptValue", "icon", "startAdornment", "endAdornment", "align", "hours", "minutes", "seconds", "minuteInterval", "secondInterval", "readOnlyInput", "onChange", "onValidate", "className", "style", "sx"]);
     var id = React.useId();
     // Ref -------------------------------------------------------------------------------------------------------------
     var privateStaticDatePickerRef = React.useRef(null);
@@ -14818,7 +14848,7 @@ styleInject(css_248z$5);var PrivateDatePicker = React__default["default"].forwar
     // Render ----------------------------------------------------------------------------------------------------------
     return (React__default["default"].createElement(xDatePickers.LocalizationProvider, { dateAdapter: AdapterDayjs.AdapterDayjs, adapterLocale: dayjsLocale__default["default"] },
         React__default["default"].createElement(material.ClickAwayListener, { mouseEvent: 'onMouseDown', touchEvent: 'onTouchStart', onClickAway: function () { return setOpen(false); } },
-            React__default["default"].createElement("div", { className: 'PrivateDatePicker', style: {
+            React__default["default"].createElement("div", { className: classNames$1(className, 'PrivateDatePicker'), style: {
                     display: fullWidth ? 'block' : 'inline-block',
                     flex: fullWidth ? 1 : undefined,
                 }, onMouseDown: handleContainerMouseDown, onFocus: handleContainerFocus, onBlur: handleContainerBlur },
@@ -14878,9 +14908,10 @@ PrivateDatePicker.defaultProps = PrivateDatePickerDefaultProps;var PrivateAlertD
             React__default["default"].createElement(material.Button, { variant: 'text', onClick: handleClose, autoFocus: true }, "\uD655\uC778"))));
 };
 PrivateAlertDialog.displayName = 'PrivateAlertDialog';
-PrivateAlertDialog.defaultProps = PrivateAlertDialogDefaultProps;var FormDatePicker = React__default["default"].forwardRef(function (props, ref) {
+PrivateAlertDialog.defaultProps = PrivateAlertDialogDefaultProps;var FormDatePicker = React__default["default"].forwardRef(function (_a, ref) {
     // FormState -------------------------------------------------------------------------------------------------------
-    var _a = useFormState(), onAddValueItem = _a.onAddValueItem, otherFormState = __rest$2(_a, ["onAddValueItem"]);
+    var className = _a.className, props = __rest$2(_a, ["className"]);
+    var _b = useFormState(), onAddValueItem = _b.onAddValueItem, otherFormState = __rest$2(_b, ["onAddValueItem"]);
     // Event Handler ---------------------------------------------------------------------------------------------------
     var handleAddValueItem = React.useCallback(function (id, commands) {
         commands.getType = function () { return 'FormDatePicker'; };
@@ -14888,12 +14919,13 @@ PrivateAlertDialog.defaultProps = PrivateAlertDialogDefaultProps;var FormDatePic
     }, [onAddValueItem]);
     // Render ----------------------------------------------------------------------------------------------------------
     return (React__default["default"].createElement(FormContextProvider, { value: __assign$4({ onAddValueItem: handleAddValueItem }, otherFormState) },
-        React__default["default"].createElement(PrivateDatePicker, __assign$4({}, props, { ref: ref, type: 'date' }))));
+        React__default["default"].createElement(PrivateDatePicker, __assign$4({ className: classNames$1(className, 'FormDatePicker') }, props, { ref: ref, type: 'date' }))));
 });
 FormDatePicker.displayName = 'FormDatePicker';
-FormDatePicker.defaultProps = FormDatePickerDefaultProps;var FormDateTimePickerDefaultProps = {};var FormDateTimePicker = React__default["default"].forwardRef(function (props, ref) {
+FormDatePicker.defaultProps = FormDatePickerDefaultProps;var FormDateTimePickerDefaultProps = {};var FormDateTimePicker = React__default["default"].forwardRef(function (_a, ref) {
     // FormState -------------------------------------------------------------------------------------------------------
-    var _a = useFormState(), onAddValueItem = _a.onAddValueItem, otherFormState = __rest$2(_a, ["onAddValueItem"]);
+    var className = _a.className, props = __rest$2(_a, ["className"]);
+    var _b = useFormState(), onAddValueItem = _b.onAddValueItem, otherFormState = __rest$2(_b, ["onAddValueItem"]);
     // Event Handler ---------------------------------------------------------------------------------------------------
     var handleAddValueItem = React.useCallback(function (id, commands) {
         commands.getType = function () { return 'FormDateTimePicker'; };
@@ -14901,12 +14933,13 @@ FormDatePicker.defaultProps = FormDatePickerDefaultProps;var FormDateTimePickerD
     }, [onAddValueItem]);
     // Render ----------------------------------------------------------------------------------------------------------
     return (React__default["default"].createElement(FormContextProvider, { value: __assign$4({ onAddValueItem: handleAddValueItem }, otherFormState) },
-        React__default["default"].createElement(PrivateDatePicker, __assign$4({}, props, { ref: ref, type: 'date_time' }))));
+        React__default["default"].createElement(PrivateDatePicker, __assign$4({ className: classNames$1(className, 'FormDateTimePicker') }, props, { ref: ref, type: 'date_time' }))));
 });
 FormDateTimePicker.displayName = 'FormDateTimePicker';
-FormDateTimePicker.defaultProps = FormDateTimePickerDefaultProps;var FormTimePickerDefaultProps = {};var FormTimePicker = React__default["default"].forwardRef(function (props, ref) {
+FormDateTimePicker.defaultProps = FormDateTimePickerDefaultProps;var FormTimePickerDefaultProps = {};var FormTimePicker = React__default["default"].forwardRef(function (_a, ref) {
     // FormState -------------------------------------------------------------------------------------------------------
-    var _a = useFormState(), onAddValueItem = _a.onAddValueItem, otherFormState = __rest$2(_a, ["onAddValueItem"]);
+    var className = _a.className, props = __rest$2(_a, ["className"]);
+    var _b = useFormState(), onAddValueItem = _b.onAddValueItem, otherFormState = __rest$2(_b, ["onAddValueItem"]);
     // Event Handler ---------------------------------------------------------------------------------------------------
     var handleAddValueItem = React.useCallback(function (id, commands) {
         commands.getType = function () { return 'FormTimePicker'; };
@@ -14914,7 +14947,7 @@ FormDateTimePicker.defaultProps = FormDateTimePickerDefaultProps;var FormTimePic
     }, [onAddValueItem]);
     // Render ----------------------------------------------------------------------------------------------------------
     return (React__default["default"].createElement(FormContextProvider, { value: __assign$4({ onAddValueItem: handleAddValueItem }, otherFormState) },
-        React__default["default"].createElement(PrivateDatePicker, __assign$4({}, props, { ref: ref, type: 'time' }))));
+        React__default["default"].createElement(PrivateDatePicker, __assign$4({ className: classNames$1(className, 'FormTimePicker') }, props, { ref: ref, type: 'time' }))));
 });
 FormTimePicker.displayName = 'FormTimePicker';
 FormTimePicker.defaultProps = FormTimePickerDefaultProps;var FormDateRangePickerDefaultProps = {
@@ -15434,7 +15467,9 @@ var FormDateRangePicker = React__default["default"].forwardRef(function (_a, ref
     // ID --------------------------------------------------------------------------------------------------------------
     var initVariant = _a.variant, initSize = _a.size, initColor = _a.color, initFocused = _a.focused, initLabelShrink = _a.labelShrink, initFullWidth = _a.fullWidth, 
     //--------------------------------------------------------------------------------------------------------------------
-    name = _a.name, initValue = _a.value, startLabel = _a.startLabel, startLabelIcon = _a.startLabelIcon, endLabel = _a.endLabel, endLabelIcon = _a.endLabelIcon, initCalendarCount = _a.calendarCount, initFormat = _a.format, formValueFormat = _a.formValueFormat, allowSingleSelect = _a.allowSingleSelect, required = _a.required, requiredStart = _a.requiredStart, requiredEnd = _a.requiredEnd, readOnly = _a.readOnly, readOnlyStart = _a.readOnlyStart, readOnlyEnd = _a.readOnlyEnd, readOnlyInput = _a.readOnlyInput, initDisabled = _a.disabled, inputWidth = _a.inputWidth, exceptValue = _a.exceptValue, initError = _a.error, initHelperText = _a.helperText, formValueStartNameSuffix = _a.formValueStartNameSuffix, formValueEndNameSuffix = _a.formValueEndNameSuffix, icon = _a.icon, startIcon = _a.startIcon, endIcon = _a.endIcon, startAdornment = _a.startAdornment, startStartAdornment = _a.startStartAdornment, endStartAdornment = _a.endStartAdornment, endAdornment = _a.endAdornment, startEndAdornment = _a.startEndAdornment, endEndAdornment = _a.endEndAdornment, disablePast = _a.disablePast, disableFuture = _a.disableFuture, minDate = _a.minDate, maxDate = _a.maxDate, onChange = _a.onChange, onValidate = _a.onValidate;
+    name = _a.name, initValue = _a.value, startLabel = _a.startLabel, startLabelIcon = _a.startLabelIcon, endLabel = _a.endLabel, endLabelIcon = _a.endLabelIcon, initCalendarCount = _a.calendarCount, initFormat = _a.format, formValueFormat = _a.formValueFormat, allowSingleSelect = _a.allowSingleSelect, required = _a.required, requiredStart = _a.requiredStart, requiredEnd = _a.requiredEnd, readOnly = _a.readOnly, readOnlyStart = _a.readOnlyStart, readOnlyEnd = _a.readOnlyEnd, readOnlyInput = _a.readOnlyInput, initDisabled = _a.disabled, inputWidth = _a.inputWidth, exceptValue = _a.exceptValue, initError = _a.error, initHelperText = _a.helperText, formValueStartNameSuffix = _a.formValueStartNameSuffix, formValueEndNameSuffix = _a.formValueEndNameSuffix, icon = _a.icon, startIcon = _a.startIcon, endIcon = _a.endIcon, startAdornment = _a.startAdornment, startStartAdornment = _a.startStartAdornment, endStartAdornment = _a.endStartAdornment, endAdornment = _a.endAdornment, startEndAdornment = _a.startEndAdornment, endEndAdornment = _a.endEndAdornment, disablePast = _a.disablePast, disableFuture = _a.disableFuture, minDate = _a.minDate, maxDate = _a.maxDate, onChange = _a.onChange, onValidate = _a.onValidate, 
+    // -------------------------------------------------------------------------------------------------------------------
+    className = _a.className;
     var id = React.useId();
     // FormState -------------------------------------------------------------------------------------------------------
     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;
@@ -15911,7 +15946,7 @@ var FormDateRangePicker = React__default["default"].forwardRef(function (_a, ref
     // Render ----------------------------------------------------------------------------------------------------------
     return (React__default["default"].createElement(xDatePickers.LocalizationProvider, { dateAdapter: AdapterDayjs.AdapterDayjs, adapterLocale: dayjsLocale__default["default"] },
         React__default["default"].createElement(material.ClickAwayListener, { mouseEvent: 'onMouseDown', touchEvent: 'onTouchStart', onClickAway: function () { return setOpen(false); } },
-            React__default["default"].createElement("div", { style: {
+            React__default["default"].createElement("div", { className: classNames$1(className, 'FormDateRangePicker'), style: {
                     display: fullWidth ? 'block' : 'inline-block',
                     flex: fullWidth ? 1 : undefined,
                 }, onMouseDown: handleContainerMouseDown, onFocus: handleContainerFocus, onBlur: handleContainerBlur },
@@ -16483,20 +16518,20 @@ var removeReactFragment = function (el) {
                         return removeReactFragment(child);
                     }
                     else {
-                        return React__default["default"].createElement(material.Grid, { item: true }, child);
+                        return (React__default["default"].createElement(material.Grid, { item: true, style: { display: child === FormHidden ? 'none' : undefined } }, child));
                     }
                 });
             }
             else {
-                return React__default["default"].createElement(material.Grid, { item: true }, el);
+                return (React__default["default"].createElement(material.Grid, { item: true, style: { display: el.type === FormHidden ? 'none' : undefined } }, el));
             }
         }
         else {
-            return React__default["default"].createElement(material.Grid, { item: true }, el);
+            return (React__default["default"].createElement(material.Grid, { item: true, style: { display: el.type === FormHidden ? 'none' : undefined } }, el));
         }
     }
     else {
-        return React__default["default"].createElement(material.Grid, { item: true }, el);
+        return (React__default["default"].createElement(material.Grid, { item: true, style: { display: el.type === FormHidden ? 'none' : undefined } }, el));
     }
 };
 var SearchGroup = function (_a) {