@pdg/react-form 1.0.58 → 1.0.60

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

@@ -17,7 +17,6 @@ export type FormValue = string | number | boolean;
 export interface FormValueMap {
     [key: string]: FormValue;
 }
-export type FormValueType = 'single' | 'multiple' | 'any';
 export type FormValueItemData = Record<string, any>;
 export interface FormValueItemBaseCommands<T, AllowUndefinedValue extends boolean, V = AllowUndefinedValue extends true ? T | undefined : T> {
     getType(): 'default' | 'FormCheckbox' | 'FormToggleButtonGroup' | 'FormRadioGroup' | 'FormRating' | 'FormTextEditor' | 'FormAutocomplete' | 'FormDatePicker' | 'FormDateTimePicker' | 'FormTimePicker' | 'FormDateRangePicker' | 'FormFile';

package/dist/@util/forwardRef.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+export declare function ToForwardRefExoticComponent<T>(component: T, ext?: Pick<React.ForwardRefExoticComponent<any>, 'displayName' | 'defaultProps'>): T & Pick<React.ForwardRefExoticComponent<any>, "displayName" | "defaultProps" | "propTypes" | "$$typeof">;
+export declare function AutoTypeForwardRef<T, P = object>(render: (props: P, ref: React.ForwardedRef<T>) => React.ReactElement | null): (props: P & React.RefAttributes<T>) => React.ReactElement | null;

package/dist/@util/index.d.ts

@@ -4,3 +4,4 @@ export { ll, nextTick };
 export * from './compare';
 export * from './date_time';
 export * from './file';
+export * from './forwardRef';

package/dist/FormItemCustom/FormAutocomplete/FormAutocomplete.d.ts

@@ -1,8 +1,4 @@
 import React from 'react';
-import { FormAutocompleteProps, FormAutocompleteCommands } from './FormAutocomplete.types';
-import { FormValueType } from '../../@types';
-interface WithForwardRefType<T, VT extends FormValueType = 'single'> extends React.FC<FormAutocompleteProps<T, VT>> {
-    <T, VT extends FormValueType = 'single'>(props: FormAutocompleteProps<T, VT> & React.RefAttributes<FormAutocompleteCommands<T, VT>>): ReturnType<React.FC<FormAutocompleteProps<T, VT>>>;
-}
-declare const FormAutocomplete: WithForwardRefType<any, 'any'>;
+import { FormAutocompleteProps, FormAutocompleteCommands, FormAutocompleteSingleValue } from './FormAutocomplete.types';
+declare const FormAutocomplete: (<T extends FormAutocompleteSingleValue, Multiple extends boolean | undefined>(props: FormAutocompleteProps<T, Multiple> & React.RefAttributes<FormAutocompleteCommands<T, Multiple>>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null) & Pick<React.ForwardRefExoticComponent<any>, "displayName" | "propTypes" | "defaultProps" | "$$typeof">;
 export default FormAutocomplete;

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

@@ -1,20 +1,21 @@
 import React, { ReactNode } from 'react';
-import { CommonSxProps, FormMultipleValueItemCommands, FormValueType } from '../../@types';
+import { CommonSxProps, FormMultipleValueItemCommands } from '../../@types';
 import { FormArrayValueItemCommands, FormItemsValueItemCommands, FormLoadingValueItemCommands, FormValueItemBaseCommands, FormValueItemProps } from '../../@types';
 import { FormTextFieldProps } from '../../FormItemTextFieldBase';
-export interface FormAutocompleteItem<T> {
+export type FormAutocompleteSingleValue = string | number;
+export interface FormAutocompleteItem<T extends FormAutocompleteSingleValue> {
     label: string;
     value: T;
     disabled?: boolean;
     [key: string]: any;
 }
-export type FormAutocompleteItems<T> = FormAutocompleteItem<T>[];
-export type FormAutocompleteValue<T, VT extends FormValueType = 'single', V = VT extends 'single' ? T : VT extends 'multiple' ? T[] : T | T[]> = V | undefined;
-export type FormAutocompleteComponentValue<T, VT extends FormValueType = 'single', V = VT extends 'single' ? FormAutocompleteItem<T> : VT extends 'multiple' ? FormAutocompleteItem<T>[] : FormAutocompleteItem<T> | FormAutocompleteItem<T>[]> = V | null;
-export interface FormAutocompleteProps<T, VT extends FormValueType = 'single'> extends CommonSxProps, Omit<FormValueItemProps<FormAutocompleteValue<T, VT>>, 'value'>, Pick<FormTextFieldProps<T>, 'required' | 'focused' | 'labelShrink'> {
-    value?: FormAutocompleteValue<T, VT>;
+export type FormAutocompleteItems<T extends FormAutocompleteSingleValue> = FormAutocompleteItem<T>[];
+export type FormAutocompleteValue<T extends FormAutocompleteSingleValue, Multiple extends boolean | undefined> = ([Multiple] extends [true] ? T[] : T) | undefined;
+export type FormAutocompleteComponentValue<T extends FormAutocompleteSingleValue, Multiple extends boolean | undefined> = ([Multiple] extends [true] ? FormAutocompleteItem<T>[] : FormAutocompleteItem<T>) | null;
+export interface FormAutocompleteProps<T extends FormAutocompleteSingleValue, Multiple extends boolean | undefined = undefined> extends CommonSxProps, Omit<FormValueItemProps<FormAutocompleteValue<T, Multiple>>, 'value'>, Pick<FormTextFieldProps<T>, 'required' | 'focused' | 'labelShrink'> {
+    value?: FormAutocompleteValue<T, Multiple>;
     items?: FormAutocompleteItems<T>;
-    multiple?: boolean;
+    multiple?: Multiple;
     formValueSeparator?: string;
     formValueSort?: boolean;
     loading?: boolean;
@@ -28,13 +29,13 @@ export interface FormAutocompleteProps<T, VT extends FormValueType = 'single'> e
     async?: boolean;
     hidden?: boolean;
     onLoadItems?: (inputValue?: string) => Promise<FormAutocompleteItems<T>>;
-    onAsyncLoadValueItem?: (value: FormAutocompleteValue<T, VT>) => Promise<FormAutocompleteComponentValue<T, VT>>;
+    onAsyncLoadValueItem?: (value: FormAutocompleteValue<T, Multiple>) => Promise<FormAutocompleteComponentValue<T, Multiple>>;
     onRenderItem?: (item: FormAutocompleteItem<T>) => ReactNode;
     onRenderTag?: (item: FormAutocompleteItem<T>) => ReactNode;
-    onValue?: (value: FormAutocompleteValue<T, VT>) => FormAutocompleteValue<T, VT>;
+    onValue?: (value: FormAutocompleteValue<T, Multiple>) => FormAutocompleteValue<T, Multiple>;
     onAddItem?: (item: FormAutocompleteItem<T>) => boolean | Promise<boolean>;
     getOptionDisabled?: (item: FormAutocompleteItem<T>) => boolean;
 }
 export declare const FormAutocompleteDefaultProps: Pick<FormAutocompleteProps<any>, 'formValueSeparator' | 'noOptionsText'>;
-export interface FormAutocompleteCommands<T, VT extends FormValueType = 'single'> extends FormValueItemBaseCommands<FormAutocompleteValue<T, VT>, true>, FormArrayValueItemCommands, FormItemsValueItemCommands<FormAutocompleteItem<T>>, FormMultipleValueItemCommands, FormLoadingValueItemCommands {
+export interface FormAutocompleteCommands<T extends FormAutocompleteSingleValue, Multiple extends boolean | undefined = undefined> extends FormValueItemBaseCommands<FormAutocompleteValue<T, Multiple>, true>, FormArrayValueItemCommands, FormItemsValueItemCommands<FormAutocompleteItem<T>>, FormMultipleValueItemCommands, FormLoadingValueItemCommands {
 }

package/dist/FormItemCustom/FormRadioGroup/FormRadioGroup.d.ts

@@ -1,7 +1,4 @@
 import React from 'react';
-import { FormRadioGroupProps, FormRadioGroupCommands } from './FormRadioGroup.types';
-interface WithForwardRefType<T> extends React.FC<FormRadioGroupProps<T>> {
-    <T>(props: FormRadioGroupProps<T> & React.RefAttributes<FormRadioGroupCommands<T>>): ReturnType<React.FC<FormRadioGroupProps<T>>>;
-}
-declare const FormRadioGroup: WithForwardRefType<any>;
+import { FormRadioGroupProps, FormRadioGroupCommands, FormRadioGroupSingleValue } from './FormRadioGroup.types';
+declare const FormRadioGroup: (<T extends FormRadioGroupSingleValue>(props: FormRadioGroupProps<T> & React.RefAttributes<FormRadioGroupCommands<T>>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null) & Pick<React.ForwardRefExoticComponent<any>, "displayName" | "propTypes" | "defaultProps" | "$$typeof">;
 export default FormRadioGroup;

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

@@ -1,13 +1,14 @@
 import { ReactNode } from 'react';
 import { CommonSxProps, FormItemsValueItemCommands, FormLoadingValueItemCommands, FormValueItemBaseCommands, FormValueItemProps } from '../../@types';
-export interface FormRadioGroupItem<T> {
+export type FormRadioGroupSingleValue = string | number;
+export interface FormRadioGroupItem<T extends FormRadioGroupSingleValue> {
     label: ReactNode;
     value: T;
     disabled?: boolean;
 }
-export type FormRadioGroupItems<T> = FormRadioGroupItem<T>[];
-export type FormRadioGroupValue<T> = T | undefined;
-export interface FormRadioGroupProps<T> extends CommonSxProps, Omit<FormValueItemProps<T>, 'value'> {
+export type FormRadioGroupItems<T extends FormRadioGroupSingleValue> = FormRadioGroupItem<T>[];
+export type FormRadioGroupValue<T extends FormRadioGroupSingleValue> = T | undefined;
+export interface FormRadioGroupProps<T extends FormRadioGroupSingleValue> extends CommonSxProps, Omit<FormValueItemProps<T>, 'value'> {
     value?: T;
     items?: FormRadioGroupItem<T>[];
     required?: boolean;
@@ -19,5 +20,5 @@ export interface FormRadioGroupProps<T> extends CommonSxProps, Omit<FormValueIte
     onValue?(value: FormRadioGroupValue<T>): FormRadioGroupValue<T>;
 }
 export declare const FormRadioGroupDefaultProps: Pick<FormRadioGroupProps<any>, 'inline'>;
-export interface FormRadioGroupCommands<T> extends FormValueItemBaseCommands<T, true>, FormItemsValueItemCommands<FormRadioGroupItem<T>>, FormLoadingValueItemCommands {
+export interface FormRadioGroupCommands<T extends FormRadioGroupSingleValue> extends FormValueItemBaseCommands<T, true>, FormItemsValueItemCommands<FormRadioGroupItem<T>>, FormLoadingValueItemCommands {
 }

package/dist/FormItemCustom/FormToggleButtonGroup/FormToggleButtonGroup.d.ts

@@ -1,9 +1,5 @@
 import React from 'react';
-import { FormValueType } from '../../@types';
-import { FormToggleButtonGroupProps, FormToggleButtonGroupCommands } from './FormToggleButtonGroup.types';
+import { FormToggleButtonGroupProps, FormToggleButtonGroupCommands, FormToggleButtonGroupSingleValue } from './FormToggleButtonGroup.types';
 import './FormToggleButtonGroup.scss';
-interface WithForwardRefType<T, VT extends FormValueType = 'single'> extends React.FC<FormToggleButtonGroupProps<T, VT>> {
-    <T, VT extends FormValueType = 'single'>(props: FormToggleButtonGroupProps<T, VT> & React.RefAttributes<FormToggleButtonGroupCommands<T, VT>>): ReturnType<React.FC<FormToggleButtonGroupProps<T, VT>>>;
-}
-declare const FormToggleButtonGroup: WithForwardRefType<any, 'any'>;
+declare const FormToggleButtonGroup: (<T extends FormToggleButtonGroupSingleValue, Multiple extends boolean | undefined>(props: FormToggleButtonGroupProps<T, Multiple> & React.RefAttributes<FormToggleButtonGroupCommands<T, Multiple>>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null) & Pick<React.ForwardRefExoticComponent<any>, "displayName" | "propTypes" | "defaultProps" | "$$typeof">;
 export default FormToggleButtonGroup;

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

@@ -1,18 +1,19 @@
 import { ReactNode } from 'react';
 import { ToggleButtonProps } from '@mui/material';
-import { PartialPick, CommonSxProps, FormMultipleValueItemCommands, FormArrayValueItemCommands, FormItemsValueItemCommands, FormLoadingValueItemCommands, FormValueItemBaseCommands, FormValueItemProps, FormValueType } from '../../@types';
+import { PartialPick, CommonSxProps, FormMultipleValueItemCommands, FormArrayValueItemCommands, FormItemsValueItemCommands, FormLoadingValueItemCommands, FormValueItemBaseCommands, FormValueItemProps } from '../../@types';
 import { FormItemBaseProps } from '../FormItemBase';
-export interface FormToggleButtonGroupItem<T> {
+export type FormToggleButtonGroupSingleValue = string | number;
+export interface FormToggleButtonGroupItem<T extends FormToggleButtonGroupSingleValue> {
     label: ReactNode;
     value: T;
     disabled?: boolean;
     color?: ToggleButtonProps['color'];
 }
-export type FormToggleButtonGroupItems<T> = FormToggleButtonGroupItem<T>[];
-export type FormToggleButtonGroupValue<T, VT extends FormValueType = 'single', V = VT extends 'single' ? T : VT extends 'multiple' ? T[] : T | T[]> = V | undefined;
-export interface FormToggleButtonGroupProps<T, VT extends FormValueType = 'single'> extends CommonSxProps, Omit<FormValueItemProps<FormToggleButtonGroupValue<T, VT>>, 'value'>, PartialPick<FormItemBaseProps, 'required' | 'focused'> {
+export type FormToggleButtonGroupItems<T extends FormToggleButtonGroupSingleValue> = FormToggleButtonGroupItem<T>[];
+export type FormToggleButtonGroupValue<T extends FormToggleButtonGroupSingleValue, Multiple extends boolean | undefined> = ([Multiple] extends [true] ? T[] : T) | undefined;
+export interface FormToggleButtonGroupProps<T extends FormToggleButtonGroupSingleValue, Multiple extends boolean | undefined = undefined> extends CommonSxProps, Omit<FormValueItemProps<FormToggleButtonGroupValue<T, Multiple>>, 'value'>, PartialPick<FormItemBaseProps, 'required' | 'focused'> {
     type?: 'button' | 'checkbox' | 'radio';
-    value?: FormToggleButtonGroupValue<T, VT>;
+    value?: FormToggleButtonGroupValue<T, Multiple>;
     items?: FormToggleButtonGroupItem<T>[];
     multiple?: boolean;
     notAllowEmptyValue?: boolean;
@@ -22,10 +23,10 @@ export interface FormToggleButtonGroupProps<T, VT extends FormValueType = 'singl
     hidden?: boolean;
     itemWidth?: number | string;
     onLoadItems?: () => Promise<FormToggleButtonGroupItem<T>[]>;
-    onValue?: (value: FormToggleButtonGroupValue<T, VT>) => FormToggleButtonGroupValue<T, VT>;
+    onValue?: (value: FormToggleButtonGroupValue<T, Multiple>) => FormToggleButtonGroupValue<T, Multiple>;
 }
-export declare const FormToggleButtonGroupDefaultProps: Pick<FormToggleButtonGroupProps<any, 'any'>, 'type' | 'formValueSeparator'>;
-export interface FormToggleButtonGroupExtraCommands<T> extends FormArrayValueItemCommands, FormItemsValueItemCommands<FormToggleButtonGroupItem<T>>, FormMultipleValueItemCommands, FormLoadingValueItemCommands {
+export declare const FormToggleButtonGroupDefaultProps: Pick<FormToggleButtonGroupProps<any, false>, 'type' | 'formValueSeparator'>;
+export interface FormToggleButtonGroupExtraCommands<T extends FormToggleButtonGroupSingleValue> extends FormArrayValueItemCommands, FormItemsValueItemCommands<FormToggleButtonGroupItem<T>>, FormMultipleValueItemCommands, FormLoadingValueItemCommands {
 }
-export interface FormToggleButtonGroupCommands<T, VT extends FormValueType = 'single'> extends FormValueItemBaseCommands<FormToggleButtonGroupValue<T, VT>, true>, FormToggleButtonGroupExtraCommands<T> {
+export interface FormToggleButtonGroupCommands<T extends FormToggleButtonGroupSingleValue, Multiple extends boolean | undefined = undefined> extends FormValueItemBaseCommands<FormToggleButtonGroupValue<T, Multiple>, true>, FormToggleButtonGroupExtraCommands<T> {
 }

package/dist/FormItemTextFieldBase/FormSelect/FormSelect.d.ts

@@ -1,9 +1,14 @@
 import React from 'react';
-import { FormSelectProps, FormSelectCommands } from './FormSelect.types';
+import { FormSelectCommands, FormSelectSingleValue } from './FormSelect.types';
 import './FormSelect.scss';
-import { FormValueType } from '../../@types';
-interface WithForwardRefType<T, VT extends FormValueType = 'single'> extends React.FC<FormSelectProps<T, VT>> {
-    <T, VT extends FormValueType = 'single'>(props: FormSelectProps<T, VT> & React.RefAttributes<FormSelectCommands<T, VT>>): ReturnType<React.FC<FormSelectProps<T, VT>>>;
-}
-declare const FormSelect: WithForwardRefType<any, 'any'>;
+declare const FormSelect: (<T extends FormSelectSingleValue, Multiple extends boolean | undefined>(props: Omit<import("../FormTextField").FormTextFieldProps<import("./FormSelect.types").FormSelectValue<T, Multiple>, false, import("./FormSelect.types").FormSelectValue<T, Multiple>>, "type" | "clear"> & {
+    items?: import("./FormSelect.types").FormSelectItems<T> | undefined;
+    multiple?: Multiple | undefined;
+    checkbox?: boolean | undefined;
+    formValueSeparator?: string | undefined;
+    formValueSort?: boolean | undefined;
+    minWidth?: string | number | undefined;
+    loading?: boolean | undefined;
+    onLoadItems?: (() => Promise<import("./FormSelect.types").FormSelectItem<T>[]>) | undefined;
+} & React.RefAttributes<FormSelectCommands<T, Multiple>>) => React.ReactElement<any, string | React.JSXElementConstructor<any>> | null) & Pick<React.ForwardRefExoticComponent<any>, "displayName" | "propTypes" | "defaultProps" | "$$typeof">;
 export default FormSelect;

package/dist/FormItemTextFieldBase/FormSelect/FormSelect.types.d.ts

@@ -1,20 +1,24 @@
 import { ReactNode } from 'react';
-import { FormArrayValueItemCommands, FormItemsValueItemCommands, FormLoadingValueItemCommands, FormValueItemBaseCommands, FormMultipleValueItemCommands, FormValueType } from '../../@types';
+import { FormArrayValueItemCommands, FormItemsValueItemCommands, FormLoadingValueItemCommands, FormValueItemBaseCommands, FormMultipleValueItemCommands } from '../../@types';
 import { FormTextFieldProps } from '../FormTextField';
-export type FormSelectValue<T, VT extends FormValueType = 'single', V = VT extends 'single' ? T : VT extends 'multiple' ? T[] : T | T[]> = V | undefined;
-export interface FormSelectExtraCommands<T> extends FormArrayValueItemCommands, FormItemsValueItemCommands<FormSelectItem<T>>, FormMultipleValueItemCommands, FormLoadingValueItemCommands {
+export type FormSelectSingleValue = string | number;
+export type FormSelectValue<T extends FormSelectSingleValue, Multiple extends boolean | undefined> = [
+    Multiple
+] extends [true] ? T[] : '' | T;
+export interface FormSelectExtraCommands<T extends FormSelectSingleValue> extends FormArrayValueItemCommands, FormItemsValueItemCommands<FormSelectItem<T>>, FormMultipleValueItemCommands, FormLoadingValueItemCommands {
 }
-export interface FormSelectCommands<T, VT extends FormValueType = 'single'> extends FormValueItemBaseCommands<FormSelectValue<T, VT>, true>, FormSelectExtraCommands<T> {
+export interface FormSelectCommands<T extends FormSelectSingleValue, Multiple extends boolean | undefined = undefined> extends FormValueItemBaseCommands<FormSelectValue<T, Multiple>, false>, FormSelectExtraCommands<T> {
 }
-export interface FormSelectItem<T> {
+export interface FormSelectItem<T extends FormSelectSingleValue> {
     label: ReactNode;
-    value: T;
+    value: '' | T;
     disabled?: boolean;
+    [key: string]: any;
 }
-export type FormSelectItems<T> = FormSelectItem<T>[];
-export type FormSelectProps<T, VT extends FormValueType = 'single'> = Omit<FormTextFieldProps<FormSelectValue<T, VT>>, 'type' | 'clear'> & {
+export type FormSelectItems<T extends FormSelectSingleValue> = FormSelectItem<T>[];
+export type FormSelectProps<T extends FormSelectSingleValue, Multiple extends boolean | undefined = undefined> = Omit<FormTextFieldProps<FormSelectValue<T, Multiple>, false>, 'type' | 'clear'> & {
     items?: FormSelectItems<T>;
-    multiple?: boolean;
+    multiple?: Multiple;
     checkbox?: boolean;
     formValueSeparator?: string;
     formValueSort?: boolean;
@@ -22,4 +26,4 @@ export type FormSelectProps<T, VT extends FormValueType = 'single'> = Omit<FormT
     loading?: boolean;
     onLoadItems?: () => Promise<FormSelectItem<T>[]>;
 };
-export declare const FormSelectDefaultProps: Pick<FormSelectProps<any>, 'formValueSeparator' | 'minWidth'>;
+export declare const FormSelectDefaultProps: Pick<FormSelectProps<FormSelectSingleValue, false>, 'formValueSeparator' | 'minWidth'>;

package/dist/index.esm.js

@@ -448,6 +448,14 @@ function checkDateAvailable(date, availableDate, type, time) {
         u += 1;
     } while (Math.round(Math.abs(bytes) * r) / r >= thresh && u < units.length - 1);
     return "".concat(bytes.toFixed(dp), " ").concat(units[u]);
+}function ToForwardRefExoticComponent(component, ext) {
+    var fComponent = component;
+    fComponent.displayName = ext === null || ext === void 0 ? void 0 : ext.displayName;
+    fComponent.defaultProps = ext === null || ext === void 0 ? void 0 : ext.defaultProps;
+    return component;
+}
+function AutoTypeForwardRef(render) {
+    return React__default.forwardRef(render);
 }var nextTick = function (callback) {
     setTimeout(callback, 1);
 };var FormDefaultProps = {
@@ -4065,9 +4073,10 @@ FormTextarea.defaultProps = FormTextareaDefaultProps;var FormUrlDefaultProps = _
 });
 FormUrl.displayName = 'FormUrl';
 FormUrl.defaultProps = FormUrlDefaultProps;var FormSelectDefaultProps = __assign$7(__assign$7({}, FormTextFieldDefaultProps), { formValueSeparator: ',', minWidth: 120 });var css_248z$f = ".FormSelect.is-selected-placeholder .MuiSelect-select {\n  opacity: 0.38;\n}\n.FormSelect .MuiInputBase-root.MuiInputBase-adornedEnd {\n  padding-right: 25px;\n}\n.FormSelect .MuiSelect-select.MuiSelect-multiple .selected-list:not(:empty) {\n  margin-top: -3px;\n  margin-bottom: -3px;\n}\n.FormSelect-Menu-Popover > .MuiPaper-root::-webkit-scrollbar {\n  width: 12px;\n}\n.FormSelect-Menu-Popover > .MuiPaper-root::-webkit-scrollbar-thumb {\n  background-color: rgba(0, 0, 0, 0.1882352941);\n  background-clip: padding-box;\n  border-left: 4px transparent solid;\n  border-right: 4px transparent solid;\n}\n.FormSelect-Menu-Popover > .MuiPaper-root::-webkit-scrollbar-button:start:decrement, .FormSelect-Menu-Popover > .MuiPaper-root::-webkit-scrollbar-button:end:increment {\n  display: block;\n  height: 4px;\n  background-color: transparent;\n}";
-styleInject(css_248z$f);var FormSelect = React__default.forwardRef(function (_a, ref) {
-    // FormState -------------------------------------------------------------------------------------------------------
+styleInject(css_248z$f);var FormSelect = ToForwardRefExoticComponent(AutoTypeForwardRef(function (_a, ref) {
+    // types -------------------------------------------------------------------------------------------------------------
     var className = _a.className, name = _a.name, initItems = _a.items, initFullWidth = _a.fullWidth, onLoadItems = _a.onLoadItems, readOnly = _a.readOnly, multiple = _a.multiple, checkbox = _a.checkbox, placeholder = _a.placeholder, initStartAdornment = _a.startAdornment, initValue = _a.value, initInputLabelProps = _a.InputLabelProps, initSelectProps = _a.SelectProps, formValueSeparator = _a.formValueSeparator, formValueSort = _a.formValueSort, width = _a.width, minWidth = _a.minWidth, initLoading = _a.loading, onChange = _a.onChange, onValue = _a.onValue, props = __rest$4(_a, ["className", "name", "items", "fullWidth", "onLoadItems", "readOnly", "multiple", "checkbox", "placeholder", "startAdornment", "value", "InputLabelProps", "SelectProps", "formValueSeparator", "formValueSort", "width", "minWidth", "loading", "onChange", "onValue"]);
+    // FormState -------------------------------------------------------------------------------------------------------
     var _b = useFormState(), formFullWidth = _b.fullWidth, onAddValueItem = _b.onAddValueItem, onValueChange = _b.onValueChange, otherFormState = __rest$4(_b, ["fullWidth", "onAddValueItem", "onValueChange"]);
     // Memo - FormState ------------------------------------------------------------------------------------------------
     var fullWidth = useMemo(function () { return (initFullWidth == null ? formFullWidth : initFullWidth); }, [initFullWidth, formFullWidth]);
@@ -4307,7 +4316,7 @@ styleInject(css_248z$f);var FormSelect = React__default.forwardRef(function (_a,
                     multiple && checkbox && Array.isArray(value) && React__default.createElement(Checkbox, { checked: value.includes(itemValue) }),
                     itemLabel));
             })) : (React__default.createElement(MenuItem, { value: '' })))));
-});
+}));
 FormSelect.displayName = 'FormSelect';
 FormSelect.defaultProps = FormSelectDefaultProps;var FormCompanyNoDefaultProps = __assign$7(__assign$7({}, FormTextDefaultProps), { validPattern: /(([0-9]{3})([0-9]{2})([0-9]{5}))|(([0-9]{3})-([0-9]{2})-([0-9]{5}))/ });var FormCompanyNo = React__default.forwardRef(function (_a, ref) {
     // Event Handler ---------------------------------------------------------------------------------------------------
@@ -4693,8 +4702,8 @@ FormCheckbox.displayName = 'FormCheckbox';
 FormCheckbox.defaultProps = FormCheckboxDefaultProps;var FormRadioGroupDefaultProps = {
     inline: true,
 };var PADDING_LEFT = 3;
-var FormRadioGroup = React__default.forwardRef(function (_a, ref) {
-    // ID --------------------------------------------------------------------------------------------------------------
+var FormRadioGroup = ToForwardRefExoticComponent(AutoTypeForwardRef(function (_a, ref) {
+    // type ------------------------------------------------------------------------------------------------------------
     var initVariant = _a.variant, initSize = _a.size, initColor = _a.color, initFocused = _a.focused, initFullWidth = _a.fullWidth, hidden = _a.hidden, 
     //----------------------------------------------------------------------------------------------------------------
     name = _a.name, initWidth = _a.width, labelIcon = _a.labelIcon, label = _a.label, inline = _a.inline, initLoading = _a.loading, nowrap = _a.nowrap, initItems = _a.items, initValue = _a.value, initData = _a.data, initError = _a.error, initHelperText = _a.helperText, initDisabled = _a.disabled, readOnly = _a.readOnly, required = _a.required, exceptValue = _a.exceptValue, onLoadItems = _a.onLoadItems, onChange = _a.onChange, onValue = _a.onValue, onValidate = _a.onValidate, 
@@ -4702,6 +4711,7 @@ var FormRadioGroup = React__default.forwardRef(function (_a, ref) {
     className = _a.className, initStyle = _a.style, sx = _a.sx, 
     //----------------------------------------------------------------------------------------------------------------
     props = __rest$4(_a, ["variant", "size", "color", "focused", "fullWidth", "hidden", "name", "width", "labelIcon", "label", "inline", "loading", "nowrap", "items", "value", "data", "error", "helperText", "disabled", "readOnly", "required", "exceptValue", "onLoadItems", "onChange", "onValue", "onValidate", "className", "style", "sx"]);
+    // ID --------------------------------------------------------------------------------------------------------------
     var id = useId();
     // FormState -------------------------------------------------------------------------------------------------------
     var _b = useFormState(), formVariant = _b.variant, formSize = _b.size, formColor = _b.color, formFocused = _b.focused, formFullWidth = _b.fullWidth, onAddValueItem = _b.onAddValueItem, onRemoveValueItem = _b.onRemoveValueItem, onValueChange = _b.onValueChange, onValueChangeByUser = _b.onValueChangeByUser, onRequestSearchSubmit = _b.onRequestSearchSubmit;
@@ -5001,14 +5011,14 @@ var FormRadioGroup = React__default.forwardRef(function (_a, ref) {
                         var value = _a.value, label = _a.label, itemDisabled = _a.disabled;
                         return (React__default.createElement(FormControlLabel, { key: idx, control: React__default.createElement(Radio, { icon: React__default.createElement(RadioButtonUnchecked, { color: error ? 'error' : undefined }), checkedIcon: React__default.createElement(RadioButtonChecked, { color: error ? 'error' : undefined }), color: color, size: size, inputRef: idx === 0 ? firstInputRef : null }), label: label, style: { color: error ? theme.palette.error.main : '', marginTop: -10, whiteSpace: 'nowrap' }, value: value, disabled: disabled || readOnly || itemDisabled }));
                     })))))) }));
-});
+}));
 FormRadioGroup.displayName = 'FormRadioGroup';
 FormRadioGroup.defaultProps = FormRadioGroupDefaultProps;var FormToggleButtonGroupDefaultProps = {
     type: 'button',
     formValueSeparator: ',',
 };var css_248z$d = ".FormToggleButtonGroup .ToggleButton {\n  display: inline-block;\n  padding: 0 10px;\n  white-space: nowrap;\n  overflow: hidden;\n  text-overflow: ellipsis;\n}\n.FormToggleButtonGroup.type-checkbox .ToggleButton, .FormToggleButtonGroup.type-radio .ToggleButton {\n  padding-left: 3px;\n  padding-right: 5px;\n  border: 0 !important;\n  margin-left: 0 !important;\n  justify-content: flex-start;\n  display: flex;\n  background-color: transparent !important;\n}\n.FormToggleButtonGroup.type-checkbox .ToggleButton:not(:last-child), .FormToggleButtonGroup.type-radio .ToggleButton:not(:last-child) {\n  margin-right: 5px;\n}\n.FormToggleButtonGroup.type-checkbox .ToggleButton .__checkbox-checked__,\n.FormToggleButtonGroup.type-checkbox .ToggleButton .__checkbox-unchecked__, .FormToggleButtonGroup.type-radio .ToggleButton .__checkbox-checked__,\n.FormToggleButtonGroup.type-radio .ToggleButton .__checkbox-unchecked__ {\n  margin-right: 3px;\n}\n.FormToggleButtonGroup.type-checkbox .ToggleButton .__checkbox-checked__, .FormToggleButtonGroup.type-radio .ToggleButton .__checkbox-checked__ {\n  display: none;\n}\n.FormToggleButtonGroup.type-checkbox .ToggleButton.Mui-selected .__checkbox-checked__, .FormToggleButtonGroup.type-radio .ToggleButton.Mui-selected .__checkbox-checked__ {\n  display: block;\n}\n.FormToggleButtonGroup.type-checkbox .ToggleButton.Mui-selected .__checkbox-unchecked__, .FormToggleButtonGroup.type-radio .ToggleButton.Mui-selected .__checkbox-unchecked__ {\n  display: none;\n}\n.FormToggleButtonGroup:not(.with-label).variant-outlined .FormItemBase-Control-wrap {\n  margin-top: 15px;\n  margin-bottom: -15px;\n}\n.FormToggleButtonGroup:not(.with-label).variant-outlined .FormItemBase-Control-wrap .ToggleButton {\n  height: 37px;\n}\n.FormToggleButtonGroup:not(.with-label).variant-filled .FormItemBase-Control-wrap {\n  margin-top: 15px;\n  margin-bottom: -15px;\n}\n.FormToggleButtonGroup:not(.with-label).variant-filled .FormItemBase-Control-wrap .ToggleButton {\n  height: 37px;\n}\n.FormToggleButtonGroup:not(.with-label).variant-standard .FormItemBase-Control-wrap {\n  margin-top: 0px;\n  margin-bottom: 0px;\n}\n.FormToggleButtonGroup:not(.with-label).variant-standard .FormItemBase-Control-wrap .ToggleButton {\n  height: 28px;\n}\n.FormToggleButtonGroup:not(.with-label).size-small.variant-outlined .FormItemBase-Control-wrap {\n  margin-top: 13px;\n  margin-bottom: -13px;\n}\n.FormToggleButtonGroup:not(.with-label).size-small.variant-outlined .FormItemBase-Control-wrap .ToggleButton {\n  height: 24px;\n}\n.FormToggleButtonGroup:not(.with-label).size-small.variant-filled .FormItemBase-Control-wrap {\n  margin-top: 13px;\n  margin-bottom: -13px;\n}\n.FormToggleButtonGroup:not(.with-label).size-small.variant-filled .FormItemBase-Control-wrap .ToggleButton {\n  height: 31px;\n}\n.FormToggleButtonGroup:not(.with-label).size-small.variant-standard .FormItemBase-Control-wrap {\n  margin-top: 0px;\n  margin-bottom: 0px;\n}\n.FormToggleButtonGroup:not(.with-label).size-small.variant-standard .FormItemBase-Control-wrap .ToggleButton {\n  height: 26px;\n}\n.FormToggleButtonGroup.with-label.variant-outlined .FormItemBase-Control-wrap {\n  margin-top: 0;\n  margin-bottom: 0;\n}\n.FormToggleButtonGroup.with-label.variant-outlined .FormItemBase-Control-wrap .ToggleButton {\n  height: 37px;\n}\n.FormToggleButtonGroup.with-label.variant-filled .FormItemBase-Control-wrap {\n  margin-top: 0;\n  margin-bottom: 0;\n}\n.FormToggleButtonGroup.with-label.variant-filled .FormItemBase-Control-wrap .ToggleButton {\n  height: 37px;\n}\n.FormToggleButtonGroup.with-label.variant-standard .FormItemBase-Control-wrap {\n  margin-top: 0;\n  margin-bottom: 0;\n}\n.FormToggleButtonGroup.with-label.variant-standard .FormItemBase-Control-wrap .ToggleButton {\n  height: 28px;\n}\n.FormToggleButtonGroup.with-label.size-small.variant-outlined .FormItemBase-Control-wrap {\n  margin-top: 0;\n  margin-bottom: 0;\n}\n.FormToggleButtonGroup.with-label.size-small.variant-outlined .FormItemBase-Control-wrap .ToggleButton {\n  height: 24px;\n}\n.FormToggleButtonGroup.with-label.size-small.variant-filled .FormItemBase-Control-wrap {\n  margin-top: 0;\n  margin-bottom: 0;\n}\n.FormToggleButtonGroup.with-label.size-small.variant-filled .FormItemBase-Control-wrap .ToggleButton {\n  height: 31px;\n}\n.FormToggleButtonGroup.with-label.size-small.variant-standard .FormItemBase-Control-wrap {\n  margin-top: 0;\n  margin-bottom: 0;\n}\n.FormToggleButtonGroup.with-label.size-small.variant-standard .FormItemBase-Control-wrap .ToggleButton {\n  height: 26px;\n}\n\n.Form .FormCol.with-label .FormToggleButtonGroup.variant-outlined .FormItemBase-Control-wrap {\n  margin-top: 0;\n  margin-bottom: 0;\n}\n.Form .FormCol.with-label .FormToggleButtonGroup.variant-outlined .FormItemBase-Control-wrap .ToggleButton {\n  height: 37px;\n}\n.Form .FormCol.with-label .FormToggleButtonGroup.variant-filled .FormItemBase-Control-wrap {\n  margin-top: 0;\n  margin-bottom: 0;\n}\n.Form .FormCol.with-label .FormToggleButtonGroup.variant-filled .FormItemBase-Control-wrap .ToggleButton {\n  height: 37px;\n}\n.Form .FormCol.with-label .FormToggleButtonGroup.variant-standard .FormItemBase-Control-wrap {\n  margin-top: 0;\n  margin-bottom: 0;\n}\n.Form .FormCol.with-label .FormToggleButtonGroup.variant-standard .FormItemBase-Control-wrap .ToggleButton {\n  height: 28px;\n}\n.Form .FormCol.with-label .FormToggleButtonGroup.size-small.variant-outlined .FormItemBase-Control-wrap {\n  margin-top: 0;\n  margin-bottom: 0;\n}\n.Form .FormCol.with-label .FormToggleButtonGroup.size-small.variant-outlined .FormItemBase-Control-wrap .ToggleButton {\n  height: 24px;\n}\n.Form .FormCol.with-label .FormToggleButtonGroup.size-small.variant-filled .FormItemBase-Control-wrap {\n  margin-top: 0;\n  margin-bottom: 0;\n}\n.Form .FormCol.with-label .FormToggleButtonGroup.size-small.variant-filled .FormItemBase-Control-wrap .ToggleButton {\n  height: 31px;\n}\n.Form .FormCol.with-label .FormToggleButtonGroup.size-small.variant-standard .FormItemBase-Control-wrap {\n  margin-top: 0;\n  margin-bottom: 0;\n}\n.Form .FormCol.with-label .FormToggleButtonGroup.size-small.variant-standard .FormItemBase-Control-wrap .ToggleButton {\n  height: 26px;\n}";
-styleInject(css_248z$d);var FormToggleButtonGroup = React__default.forwardRef(function (_a, ref) {
-    // ID --------------------------------------------------------------------------------------------------------------
+styleInject(css_248z$d);var FormToggleButtonGroup = ToForwardRefExoticComponent(AutoTypeForwardRef(function (_a, ref) {
+    // type ------------------------------------------------------------------------------------------------------------
     var initVariant = _a.variant, initSize = _a.size, initColor = _a.color, initFocused = _a.focused, initFullWidth = _a.fullWidth, 
     //----------------------------------------------------------------------------------------------------------------
     name = _a.name, labelIcon = _a.labelIcon, label = _a.label, type = _a.type, initLoading = _a.loading, initItems = _a.items, initValue = _a.value, initData = _a.data, initError = _a.error, initHelperText = _a.helperText, initDisabled = _a.disabled, readOnly = _a.readOnly, required = _a.required, notAllowEmptyValue = _a.notAllowEmptyValue, exceptValue = _a.exceptValue, initWidth = _a.width, multiple = _a.multiple, formValueSeparator = _a.formValueSeparator, formValueSort = _a.formValueSort, hidden = _a.hidden, itemWidth = _a.itemWidth, onLoadItems = _a.onLoadItems, 
@@ -5016,6 +5026,7 @@ styleInject(css_248z$d);var FormToggleButtonGroup = React__default.forwardRef(fu
     onChange = _a.onChange, onValue = _a.onValue, onValidate = _a.onValidate, 
     //----------------------------------------------------------------------------------------------------------------
     className = _a.className, initStyle = _a.style, sx = _a.sx;
+    // ID --------------------------------------------------------------------------------------------------------------
     var id = useId();
     var labelId = useId();
     // Ref ---------------------------------------------------------------------------------------------------------------
@@ -5193,7 +5204,7 @@ styleInject(css_248z$d);var FormToggleButtonGroup = React__default.forwardRef(fu
                     }
                 }
                 if (setFirstItem) {
-                    setValue(multiple ? [items[0].value] : items[0].value);
+                    setValue((multiple ? [items[0].value] : items[0].value));
                 }
             }
         }
@@ -5427,7 +5438,7 @@ styleInject(css_248z$d);var FormToggleButtonGroup = React__default.forwardRef(fu
                         : undefined,
                     flexWrap: type === 'checkbox' || type === 'radio' ? 'wrap' : 'nowrap',
                 }, "aria-labelledby": notEmpty(label) ? labelId : undefined }, isOnGetItemLoading || loading || !items || empty(items) ? (React__default.createElement(ToggleButton, { ref: refForButtonResizeHeightDetect, size: size, className: 'ToggleButton', disabled: disabled || readOnly, value: '', style: { visibility: 'hidden' } })) : (buttons)))) })));
-});
+}));
 FormToggleButtonGroup.displayName = 'FormToggleButtonGroup';
 FormToggleButtonGroup.defaultProps = FormToggleButtonGroupDefaultProps;var FormRatingDefaultProps = {
     value: 0,
@@ -7654,8 +7665,8 @@ FormTextEditor.displayName = 'FormTextEditor';
 FormTextEditor.defaultProps = FormTextEditorDefaultProps;var FormAutocompleteDefaultProps = {
     formValueSeparator: ',',
     noOptionsText: '항목이 없습니다',
-};var FormAutocomplete = React__default.forwardRef(function (_a, ref) {
-    // ID --------------------------------------------------------------------------------------------------------------
+};var FormAutocomplete = ToForwardRefExoticComponent(AutoTypeForwardRef(function (_a, ref) {
+    // type ------------------------------------------------------------------------------------------------------------
     var initVariant = _a.variant, initSize = _a.size, initColor = _a.color, initFocused = _a.focused, initLabelShrink = _a.labelShrink, initFullWidth = _a.fullWidth, 
     //----------------------------------------------------------------------------------------------------------------
     name = _a.name, labelIcon = _a.labelIcon, label = _a.label, initLoading = _a.loading, initItems = _a.items, initValue = _a.value, initData = _a.data, initError = _a.error, initHelperText = _a.helperText, initDisabled = _a.disabled, readOnly = _a.readOnly, required = _a.required, exceptValue = _a.exceptValue, width = _a.width, placeholder = _a.placeholder, multiple = _a.multiple, formValueSeparator = _a.formValueSeparator, formValueSort = _a.formValueSort, disablePortal = _a.disablePortal, noOptionsText = _a.noOptionsText, loadingText = _a.loadingText, limitTags = _a.limitTags, openOnFocus = _a.openOnFocus, disableClearable = _a.disableClearable, async = _a.async, hidden = _a.hidden, onLoadItems = _a.onLoadItems, onAsyncLoadValueItem = _a.onAsyncLoadValueItem, onRenderItem = _a.onRenderItem, onRenderTag = _a.onRenderTag, onAddItem = _a.onAddItem, getOptionDisabled = _a.getOptionDisabled, 
@@ -7663,6 +7674,7 @@ FormTextEditor.defaultProps = FormTextEditorDefaultProps;var FormAutocompleteDef
     onChange = _a.onChange, onValue = _a.onValue, onValidate = _a.onValidate, 
     //----------------------------------------------------------------------------------------------------------------
     className = _a.className, initStyle = _a.style, sx = _a.sx;
+    // ID --------------------------------------------------------------------------------------------------------------
     var id = useId();
     // Ref -------------------------------------------------------------------------------------------------------------
     var textFieldRef = useRef(null);
@@ -7775,16 +7787,17 @@ FormTextEditor.defaultProps = FormTextEditorDefaultProps;var FormAutocompleteDef
             }
         }
         else {
-            finalValue = multiple ? [] : undefined;
+            finalValue = (multiple ? [] : undefined);
         }
-        var newComponentValue = multiple ? [] : null;
+        var newComponentValue = (multiple ? [] : null);
         if (notEmpty(finalValue)) {
             if (items) {
                 if (Array.isArray(finalValue)) {
                     newComponentValue = items.filter(function (info) { return Array.isArray(finalValue) && finalValue.includes(info.value); });
                 }
                 else {
-                    newComponentValue = items.find(function (info) { return info.value === value; }) || (multiple ? [] : null);
+                    newComponentValue = (items.find(function (info) { return info.value === value; }) ||
+                        (multiple ? [] : null));
                 }
             }
             if (empty(newComponentValue) && valueItem) {
@@ -8048,7 +8061,7 @@ FormTextEditor.defaultProps = FormTextEditorDefaultProps;var FormAutocompleteDef
     // Event Handler ---------------------------------------------------------------------------------------------------
     var handleChange = useCallback(function (componentValue, reason, details) {
         var go = function () {
-            var newValue;
+            var newValue = undefined;
             if (componentValue) {
                 if (componentValue) {
                     if (Array.isArray(componentValue)) {
@@ -8111,7 +8124,7 @@ FormTextEditor.defaultProps = FormTextEditorDefaultProps;var FormAutocompleteDef
         }, renderInput: function (params) { return (React__default.createElement(FormTextField, __assign$7({}, 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$7(__assign$7({}, 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$7(__assign$7({}, params.inputProps), { tabIndex: -1 }) : params.inputProps }))); } }));
-});
+}));
 FormAutocomplete.displayName = 'FormAutocomplete';
 FormAutocomplete.defaultProps = FormAutocompleteDefaultProps;var FormDatePickerDefaultProps = {};/* global Reflect, Promise, SuppressedError, Symbol */