@pdg/react-form 1.0.14 → 1.0.16

package/dist/@types/types.d.ts

@@ -19,7 +19,7 @@ export interface FormValueMap {
     [key: string]: FormValue;
 }
 export interface FormValueItemBaseCommands<ValueType = FormItemValue> {
-    getType(): 'default' | 'FormCheckbox' | 'FormCheckboxGroup' | 'FormToggleButtonGroup' | 'FormRadioGroup' | 'FormRating' | 'FormTextEditor' | 'FormAutocomplete' | 'FormDatePicker' | 'FormDateTimePicker' | 'FormTimePicker' | 'FormDateRangePicker' | 'FormFile';
+    getType(): 'default' | 'FormCheckbox' | 'FormToggleButtonGroup' | 'FormRadioGroup' | 'FormRating' | 'FormTextEditor' | 'FormAutocomplete' | 'FormDatePicker' | 'FormDateTimePicker' | 'FormTimePicker' | 'FormDateRangePicker' | 'FormFile';
     getName(): string;
     getReset(): ValueType;
     reset(): void;

package/dist/FormItemTextFieldBase/FormHidden/FormHidden.d.ts

@@ -1,4 +1,5 @@
 import React from 'react';
 import { FormHiddenProps as Props, FormHiddenCommands } from './FormHidden.types';
+import './FormHidden.scss';
 declare const FormHidden: React.ForwardRefExoticComponent<Props & React.RefAttributes<FormHiddenCommands>>;
 export default FormHidden;

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

@@ -2,5 +2,7 @@ import { PartialPick, CommonSxProps } from '../../@types';
 import { FormDividerProps } from '../FormDivider';
 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;
 }
 export declare const FormBlockDefaultProps: {};

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

@@ -0,0 +1,2 @@
+/// <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>, {}>;

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

@@ -10,5 +10,8 @@ export interface FormDividerProps extends CommonSxProps {
     line?: boolean;
     lineVerticalMargin?: string | number;
     hidden?: boolean;
+    collapse?: boolean;
+    collapseIn?: boolean;
+    onCollapseChange?(collapseIn: boolean): void;
 }
 export declare const FormDividerDefaultProps: FormDividerProps;

package/dist/index.esm.js

@@ -1,4 +1,4 @@
-import*as React from'react';import React__default,{useRef,useEffect,useState,useCallback,useLayoutEffect,createContext,useContext,cloneElement,isValidElement,createRef,PureComponent,useId,useMemo}from'react';import {Box,Grid,Icon as Icon$1,Button,InputLabel,styled,FormHelperText,InputAdornment,IconButton,TextField,Chip,Autocomplete,CircularProgress,MenuItem,Checkbox,FormControl,Input,OutlinedInput,FilledInput,FormControlLabel,Typography,useTheme,RadioGroup,Radio,ToggleButtonGroup,ToggleButton,Rating,Skeleton,darken,Tooltip,tooltipClasses,ClickAwayListener,Dialog,DialogTitle,DialogContent,DialogActions,Paper}from'@mui/material';import dayjs from'dayjs';import {findDOMNode}from'react-dom';import {CheckBox,CheckBoxOutlineBlank,RadioButtonUnchecked,RadioButtonChecked}from'@mui/icons-material';import CircularProgress$1 from'@mui/material/CircularProgress';import {AdapterDayjs}from'@mui/x-date-pickers/AdapterDayjs';import {PickersDay,StaticDatePicker,LocalizationProvider,DesktopDatePicker}from'@mui/x-date-pickers';import dayjsLocale from'dayjs/locale/ko';import dayjsIsSameOrAfter from'dayjs/plugin/isSameOrAfter';import dayjsIsSameOrBefore from'dayjs/plugin/isSameOrBefore';import dayjsIsBetween from'dayjs/plugin/isBetween';/******************************************************************************
+import*as React from'react';import React__default,{useRef,useEffect,useState,useCallback,useLayoutEffect,createContext,useContext,useMemo,cloneElement,isValidElement,createRef,PureComponent,useId}from'react';import {Box,Grid,Icon as Icon$1,Button,InputLabel,styled,Collapse,FormHelperText,InputAdornment,IconButton,TextField,Chip,Autocomplete,CircularProgress,MenuItem,Checkbox,FormControl,Input,OutlinedInput,FilledInput,FormControlLabel,Typography,useTheme,RadioGroup,Radio,ToggleButtonGroup,ToggleButton,Rating,Skeleton,darken,Tooltip,tooltipClasses,ClickAwayListener,Dialog,DialogTitle,DialogContent,DialogActions,Paper}from'@mui/material';import dayjs from'dayjs';import {findDOMNode}from'react-dom';import {CheckBox,CheckBoxOutlineBlank,RadioButtonUnchecked,RadioButtonChecked}from'@mui/icons-material';import CircularProgress$1 from'@mui/material/CircularProgress';import {AdapterDayjs}from'@mui/x-date-pickers/AdapterDayjs';import {PickersDay,StaticDatePicker,LocalizationProvider,DesktopDatePicker}from'@mui/x-date-pickers';import dayjsLocale from'dayjs/locale/ko';import dayjsIsSameOrAfter from'dayjs/plugin/isSameOrAfter';import dayjsIsSameOrBefore from'dayjs/plugin/isSameOrBefore';import dayjsIsBetween from'dayjs/plugin/isBetween';/******************************************************************************
 Copyright (c) Microsoft Corporation.
 
 Permission to use, copy, modify, and/or distribute this software for any
@@ -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 = 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.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.forwardRef(function (_a, ref) {
             return DEFAULT_LINE_STYLE;
         }
     }, [lineVerticalMargin]))[0];
+    // Event Handler -----------------------------------------------------------------------------------------------------
+    var handleClick = useCallback(function () {
+        if (collapse) {
+            onCollapseChange && onCollapseChange(!collapseIn);
+        }
+    }, [collapse, collapseIn, onCollapseChange]);
     // Render ----------------------------------------------------------------------------------------------------------
-    return (React__default.createElement(Grid, { ref: ref, item: true, xs: 12, style: style, className: className, sx: sx },
-        React__default.createElement(Box, { sx: { display: 'flex', py: 1, alignItems: 'center', justifyItems: 'center', padding: 0 } },
+    return (React__default.createElement(Grid, { ref: ref, item: true, xs: 12, style: style, className: classNames$1(className, 'FormDivider'), sx: sx },
+        React__default.createElement(Box, { sx: {
+                display: 'flex',
+                py: 1,
+                alignItems: 'center',
+                justifyItems: 'center',
+                padding: 0,
+                cursor: collapse ? 'pointer' : undefined,
+            }, onClick: handleClick },
             icon && (React__default.createElement(FormIcon, { style: { opacity: 0.54, marginRight: 5 }, fontSize: size }, icon)),
             label && (React__default.createElement(Box, { sx: {
                     paddingRight: '10px',
@@ -1004,14 +1018,9 @@ var FormDivider = React__default.forwardRef(function (_a, ref) {
                     fontWeight: 700,
                     fontSize: size === 'small' ? '11.5px' : '12px',
                 } }, label)),
-            line && (React__default.createElement("div", { style: lineStyle },
-                React__default.createElement("div", { style: {
-                        borderBottom: 'thin solid #dfdfdf',
-                        position: 'absolute',
-                        left: 0,
-                        top: '50%',
-                        width: '100%',
-                    } }))))));
+            (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')))));
 });
 FormDivider.displayName = 'FormDivider.';
 FormDivider.defaultProps = FormDividerDefaultProps;var StyledWrapGrid$1 = styled(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.forwardRef(function (_a, r
     //----------------------------------------------------------------------------------------------------------------
     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.forwardRef(function (_a, r
     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 = useState(initCollapseIn), collapseIn = _c[0], setCollapseIn = _c[1];
     // State - style ---------------------------------------------------------------------------------------------------
     var style = useAutoUpdateState$1(useCallback(function () {
         if (hidden) {
@@ -1042,11 +1053,27 @@ var templateObject_1$2;var FormBlock = React__default.forwardRef(function (_a, r
             return initStyle;
         }
     }, [initStyle, hidden]))[0];
+    // Effect ------------------------------------------------------------------------------------------------------------
+    useEffect(function () {
+        setCollapseIn(initCollapseIn);
+    }, [initCollapseIn]);
+    // Memo --------------------------------------------------------------------------------------------------------------
+    var Container = useMemo(function () {
+        return collapse ? Collapse : React__default.Fragment;
+    }, [collapse]);
+    var containerProps = useMemo(function () {
+        return collapse ? { in: collapseIn } : undefined;
+    }, [collapse, collapseIn]);
     // Render ----------------------------------------------------------------------------------------------------------
     return (React__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.createElement(FormDivider, { size: size, icon: icon, color: color, label: label, line: line, lineVerticalMargin: lineVerticalMargin, hidden: hidden })),
-        React__default.createElement(StyledWrapGrid$1, { ref: ref, item: true, xs: 12, className: classNames$1(className, 'FormBlock'), style: style, sx: sx },
-            React__default.createElement(Grid, { container: true, spacing: spacing }, children))));
+        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 })),
+                React__default.createElement(StyledWrapGrid$1, { item: true, xs: 12 },
+                    React__default.createElement(Container, __assign$4({}, containerProps),
+                        React__default.createElement(Grid, { container: true, spacing: spacing },
+                            React__default.createElement(StyledWrapGrid$1, { item: true, xs: 12, className: 'FormBlock-body' },
+                                React__default.createElement(Grid, { className: 'FormBlock-content', container: true, spacing: spacing }, children)))))))));
 });
 FormBlock.displayName = 'FormBlock';
 FormBlock.defaultProps = FormBlockDefaultProps;var FormRowDefaultProps = {};var StyledWrapGrid = styled(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.forwardRef(function (_a, ref
     }, []);
     //------------------------------------------------------------------------------------------------------------------
     return (React__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.createElement(FormDivider, { size: size, icon: icon, color: color, label: label, line: line, lineVerticalMargin: lineVerticalMargin, hidden: hidden })),
-        React__default.createElement(StyledWrapGrid, { ref: ref, item: true, className: classNames$1(className, 'FormRow'), xs: 12, style: style, sx: sx },
-            React__default.createElement(Grid, { container: true, spacing: spacing, direction: 'row', style: { flexWrap: 'nowrap' } }, children),
-            helperText && (React__default.createElement(FormHelperText, { component: 'div', error: error }, helperText)))));
+        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 })),
+                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)))))));
 });
 FormRow.displayName = 'FormRow';
 FormRow.defaultProps = FormRowDefaultProps;/* global Reflect, Promise */
@@ -2012,12 +2041,12 @@ function useResizeDetector(props) {
     return (React__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.createElement(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.createElement(Grid, { container: true, direction: 'column' },
-                label && (React__default.createElement(Grid, { item: true },
+                label && (React__default.createElement(Grid, { item: true, className: 'FormCol-header' },
                     React__default.createElement("div", { style: { position: 'relative', height: 20 } },
                         React__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.createElement(Grid, { item: true, xs: 2 },
+                React__default.createElement(Grid, { item: true, xs: 2, className: 'FormCol-content' },
                     React__default.createElement(Box, { sx: { display: 'flex', flexWrap: 'wrap', gap: gap } }, children)),
-                helperText && (React__default.createElement(Grid, { item: true },
+                helperText && (React__default.createElement(Grid, { item: true, className: 'FormCol-helper-text' },
                     React__default.createElement(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.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.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.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.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.forwardRef(function (_a, ref) {
     var className = _a.className, props = __rest$2(_a, ["className"]);
     return (React__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.createElement(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.createElement("li", __assign$4({}, props, { key: option.value }), onRenderItem ? onRenderItem(option) : option.label)); }, renderTags: function (value, getTagProps) {
+    return (React__default.createElement(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.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.createElement(Chip, __assign$4({ size: 'small', label: onRenderTag ? onRenderTag(option) : option.label }, getTagProps({ index: index })))); });
         }, renderInput: function (params) { return (React__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.createElement(React__default.Fragment, null,
                     loading || isOnGetItemLoading ? React__default.createElement(CircularProgress$1, { color: 'inherit', size: 20 }) : null,
@@ -14493,7 +14523,7 @@ styleInject(css_248z$5);var PrivateDatePicker = React__default.forwardRef(functi
     //--------------------------------------------------------------------------------------------------------------------
     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 = useId();
     // Ref -------------------------------------------------------------------------------------------------------------
     var privateStaticDatePickerRef = useRef(null);
@@ -14818,7 +14848,7 @@ styleInject(css_248z$5);var PrivateDatePicker = React__default.forwardRef(functi
     // Render ----------------------------------------------------------------------------------------------------------
     return (React__default.createElement(LocalizationProvider, { dateAdapter: AdapterDayjs, adapterLocale: dayjsLocale },
         React__default.createElement(ClickAwayListener, { mouseEvent: 'onMouseDown', touchEvent: 'onTouchStart', onClickAway: function () { return setOpen(false); } },
-            React__default.createElement("div", { className: 'PrivateDatePicker', style: {
+            React__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.createElement(Button, { variant: 'text', onClick: handleClose, autoFocus: true }, "\uD655\uC778"))));
 };
 PrivateAlertDialog.displayName = 'PrivateAlertDialog';
-PrivateAlertDialog.defaultProps = PrivateAlertDialogDefaultProps;var FormDatePicker = React__default.forwardRef(function (props, ref) {
+PrivateAlertDialog.defaultProps = PrivateAlertDialogDefaultProps;var FormDatePicker = React__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 = useCallback(function (id, commands) {
         commands.getType = function () { return 'FormDatePicker'; };
@@ -14888,12 +14919,13 @@ PrivateAlertDialog.defaultProps = PrivateAlertDialogDefaultProps;var FormDatePic
     }, [onAddValueItem]);
     // Render ----------------------------------------------------------------------------------------------------------
     return (React__default.createElement(FormContextProvider, { value: __assign$4({ onAddValueItem: handleAddValueItem }, otherFormState) },
-        React__default.createElement(PrivateDatePicker, __assign$4({}, props, { ref: ref, type: 'date' }))));
+        React__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.forwardRef(function (props, ref) {
+FormDatePicker.defaultProps = FormDatePickerDefaultProps;var FormDateTimePickerDefaultProps = {};var FormDateTimePicker = React__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 = useCallback(function (id, commands) {
         commands.getType = function () { return 'FormDateTimePicker'; };
@@ -14901,12 +14933,13 @@ FormDatePicker.defaultProps = FormDatePickerDefaultProps;var FormDateTimePickerD
     }, [onAddValueItem]);
     // Render ----------------------------------------------------------------------------------------------------------
     return (React__default.createElement(FormContextProvider, { value: __assign$4({ onAddValueItem: handleAddValueItem }, otherFormState) },
-        React__default.createElement(PrivateDatePicker, __assign$4({}, props, { ref: ref, type: 'date_time' }))));
+        React__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.forwardRef(function (props, ref) {
+FormDateTimePicker.defaultProps = FormDateTimePickerDefaultProps;var FormTimePickerDefaultProps = {};var FormTimePicker = React__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 = useCallback(function (id, commands) {
         commands.getType = function () { return 'FormTimePicker'; };
@@ -14914,7 +14947,7 @@ FormDateTimePicker.defaultProps = FormDateTimePickerDefaultProps;var FormTimePic
     }, [onAddValueItem]);
     // Render ----------------------------------------------------------------------------------------------------------
     return (React__default.createElement(FormContextProvider, { value: __assign$4({ onAddValueItem: handleAddValueItem }, otherFormState) },
-        React__default.createElement(PrivateDatePicker, __assign$4({}, props, { ref: ref, type: 'time' }))));
+        React__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.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 = 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.forwardRef(function (_a, ref) {
     // Render ----------------------------------------------------------------------------------------------------------
     return (React__default.createElement(LocalizationProvider, { dateAdapter: AdapterDayjs, adapterLocale: dayjsLocale },
         React__default.createElement(ClickAwayListener, { mouseEvent: 'onMouseDown', touchEvent: 'onTouchStart', onClickAway: function () { return setOpen(false); } },
-            React__default.createElement("div", { style: {
+            React__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.createElement(Grid, { item: true }, child);
+                        return (React__default.createElement(Grid, { item: true, style: { display: child === FormHidden ? 'none' : undefined } }, child));
                     }
                 });
             }
             else {
-                return React__default.createElement(Grid, { item: true }, el);
+                return (React__default.createElement(Grid, { item: true, style: { display: el.type === FormHidden ? 'none' : undefined } }, el));
             }
         }
         else {
-            return React__default.createElement(Grid, { item: true }, el);
+            return (React__default.createElement(Grid, { item: true, style: { display: el.type === FormHidden ? 'none' : undefined } }, el));
         }
     }
     else {
-        return React__default.createElement(Grid, { item: true }, el);
+        return (React__default.createElement(Grid, { item: true, style: { display: el.type === FormHidden ? 'none' : undefined } }, el));
     }
 };
 var SearchGroup = function (_a) {