@pdg/react-form 1.0.49 → 1.0.51

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

@@ -1,5 +1,5 @@
 import { FormTextFieldProps } from '../FormTextField';
-export interface FormPasswordProps extends Omit<FormTextFieldProps, 'type'> {
+export interface FormPasswordProps extends Omit<FormTextFieldProps, 'disableReturnKey' | 'type'> {
     eye?: boolean;
 }
 export declare const FormPasswordDefaultProps: Pick<FormPasswordProps, 'clear' | 'eye'>;

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

@@ -1,3 +1,3 @@
 import { FormTextFieldProps } from '../FormTextField';
-export declare type FormTextProps = Omit<FormTextFieldProps, 'multiline' | 'minRows' | 'maxRows'>;
+export declare type FormTextProps = Omit<FormTextFieldProps, 'disableReturnKey' | 'minRows' | 'maxRows'>;
 export declare const FormTextDefaultProps: Pick<FormTextProps, 'clear' | 'value'>;

package/dist/FormItemTextFieldBase/FormTextField/FormTextField.d.ts

@@ -12,6 +12,7 @@ declare const FormTextField: React.ForwardRefExoticComponent<Omit<import("@mui/m
     endAdornment?: React.ReactNode;
     noFormValueItem?: boolean | undefined;
     hidden?: boolean | undefined;
+    disableReturnKey?: boolean | undefined;
     onValue?(value: any): any;
 } & React.RefAttributes<FormTextFieldCommands>>;
 export default FormTextField;

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

@@ -14,6 +14,7 @@ export declare type FormTextFieldProps = Omit<TextFieldProps, 'ref' | 'name' | '
     endAdornment?: ReactNode;
     noFormValueItem?: boolean;
     hidden?: boolean;
+    disableReturnKey?: boolean;
     onValue?(value: FormItemValue): FormItemValue;
 };
 export declare const FormTextFieldDefaultProps: {};

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

@@ -1,3 +1,3 @@
 import { FormTextFieldProps } from '../FormTextField';
-export declare type FormTextareaProps = Omit<FormTextFieldProps, 'type' | 'multiline' | 'minRows' | 'maxRows'>;
+export declare type FormTextareaProps = Omit<FormTextFieldProps, 'disableReturnKey' | 'type' | 'multiline' | 'minRows' | 'maxRows'>;
 export declare const FormTextareaDefaultProps: Pick<FormTextareaProps, 'clear' | 'rows' | 'value'>;

package/dist/Search/SearchMenuButton/SearchMenuButton.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { SearchMenuButtonProps as Props } from './SearchMenuButton.types';
+declare const SearchMenuButton: React.FC<Props>;
+export default SearchMenuButton;

package/dist/Search/SearchMenuButton/SearchMenuButton.types.d.ts

@@ -0,0 +1,7 @@
+import { FormButtonProps } from '../../FormCommon';
+import { ReactNode } from 'react';
+export interface SearchMenuButtonProps extends Omit<FormButtonProps, 'fullWidth' | 'endIcon' | 'onClick'> {
+    menuList: ReactNode;
+    placement?: 'top' | 'top-left' | 'top-right' | 'left' | 'left-top' | 'left-bottom' | 'right' | 'right-top' | 'right-bottom' | 'bottom' | 'bottom-left' | 'bottom-right';
+}
+export declare const SearchMenuButtonDefaultProps: {};

package/dist/Search/SearchMenuButton/index.d.ts

@@ -0,0 +1,4 @@
+import SearchMenuButton from './SearchMenuButton';
+export default SearchMenuButton;
+export { SearchMenuButton };
+export * from './SearchMenuButton.types';

package/dist/Search/index.d.ts

@@ -1,4 +1,5 @@
 export * from './Search';
 export * from './SearchGroup';
 export * from './SearchButton';
+export * from './SearchMenuButton';
 export * from './SearchGroupRow';

package/dist/index.esm.js

@@ -1,4 +1,4 @@
-import*as React from'react';import React__default,{createContext,useContext,useMemo,useRef,useState,useCallback,useLayoutEffect,useEffect,cloneElement,isValidElement,createRef,PureComponent,useId}from'react';import {Box,Icon as Icon$1,Button,styled,useTheme,InputLabel,Grid,Collapse,FormHelperText,InputAdornment,IconButton,TextField,Chip,Autocomplete,CircularProgress,MenuItem,Checkbox,FormControl,Input,OutlinedInput,FilledInput,FormControlLabel,Typography,RadioGroup,Radio,ToggleButton,ToggleButtonGroup,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,{createContext,useContext,useMemo,useRef,useState,useCallback,useLayoutEffect,useEffect,cloneElement,isValidElement,createRef,PureComponent,useId}from'react';import {Box,Icon as Icon$1,Button,styled,useTheme,InputLabel,Grid,Collapse,FormHelperText,InputAdornment,IconButton,TextField,Chip,Autocomplete,CircularProgress,MenuItem,Checkbox,FormControl,Input,OutlinedInput,FilledInput,FormControlLabel,Typography,RadioGroup,Radio,ToggleButton,ToggleButtonGroup,Rating,Skeleton,darken,Tooltip,tooltipClasses,ClickAwayListener,Dialog,DialogTitle,DialogContent,DialogActions,Paper,Menu}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
@@ -2125,13 +2125,13 @@ styleInject(css_248z$j);var FormTextField = React__default.forwardRef(function (
     var _b;
     var initVariant = _a.variant, initSize = _a.size, initColor = _a.color, initFocused = _a.focused, initLabelShrink = _a.labelShrink, initFullWidth = _a.fullWidth, 
     //----------------------------------------------------------------------------------------------------------------
-    name = _a.name, required = _a.required, initValue = _a.value, initData = _a.data, icon = _a.icon, labelIcon = _a.labelIcon, initLabel = _a.label, initError = _a.error, initHelperText = _a.helperText, exceptValue = _a.exceptValue, readOnly = _a.readOnly, tabIndex = _a.tabIndex, initDisabled = _a.disabled, placeholder = _a.placeholder, maxLength = _a.maxLength, clear = _a.clear, width = _a.width, initMuiInputProps = _a.InputProps, initMuiInputLabelProps = _a.InputLabelProps, initInputProps = _a.inputProps, initInputRef = _a.inputRef, select = _a.select, SelectProps = _a.SelectProps, multiline = _a.multiline, validPattern = _a.validPattern, invalidPattern = _a.invalidPattern, startAdornment = _a.startAdornment, endAdornment = _a.endAdornment, noFormValueItem = _a.noFormValueItem, hidden = _a.hidden, 
+    name = _a.name, required = _a.required, initValue = _a.value, initData = _a.data, icon = _a.icon, labelIcon = _a.labelIcon, initLabel = _a.label, initError = _a.error, initHelperText = _a.helperText, exceptValue = _a.exceptValue, readOnly = _a.readOnly, tabIndex = _a.tabIndex, initDisabled = _a.disabled, placeholder = _a.placeholder, maxLength = _a.maxLength, clear = _a.clear, width = _a.width, initMuiInputProps = _a.InputProps, initMuiInputLabelProps = _a.InputLabelProps, initInputProps = _a.inputProps, initInputRef = _a.inputRef, select = _a.select, SelectProps = _a.SelectProps, multiline = _a.multiline, validPattern = _a.validPattern, invalidPattern = _a.invalidPattern, startAdornment = _a.startAdornment, endAdornment = _a.endAdornment, noFormValueItem = _a.noFormValueItem, hidden = _a.hidden, disableReturnKey = _a.disableReturnKey, 
     //----------------------------------------------------------------------------------------------------------------
     onChange = _a.onChange, onValue = _a.onValue, onValidate = _a.onValidate, onBlur = _a.onBlur, onKeyDown = _a.onKeyDown, 
     //----------------------------------------------------------------------------------------------------------------
     className = _a.className, initStyle = _a.style, 
     //----------------------------------------------------------------------------------------------------------------
-    props = __rest$3(_a, ["variant", "size", "color", "focused", "labelShrink", "fullWidth", "name", "required", "value", "data", "icon", "labelIcon", "label", "error", "helperText", "exceptValue", "readOnly", "tabIndex", "disabled", "placeholder", "maxLength", "clear", "width", "InputProps", "InputLabelProps", "inputProps", "inputRef", "select", "SelectProps", "multiline", "validPattern", "invalidPattern", "startAdornment", "endAdornment", "noFormValueItem", "hidden", "onChange", "onValue", "onValidate", "onBlur", "onKeyDown", "className", "style"]);
+    props = __rest$3(_a, ["variant", "size", "color", "focused", "labelShrink", "fullWidth", "name", "required", "value", "data", "icon", "labelIcon", "label", "error", "helperText", "exceptValue", "readOnly", "tabIndex", "disabled", "placeholder", "maxLength", "clear", "width", "InputProps", "InputLabelProps", "inputProps", "inputRef", "select", "SelectProps", "multiline", "validPattern", "invalidPattern", "startAdornment", "endAdornment", "noFormValueItem", "hidden", "disableReturnKey", "onChange", "onValue", "onValidate", "onBlur", "onKeyDown", "className", "style"]);
     var id = useId();
     // Ref -------------------------------------------------------------------------------------------------------------
     var inputRef = useRef(null);
@@ -2411,14 +2411,17 @@ styleInject(css_248z$j);var FormTextField = React__default.forwardRef(function (
             onBlur(e);
     }, [error, value, validate, onBlur]);
     var handleKeyDown = useCallback(function (e) {
-        if (!select && !multiline && !noFormValueItem && ['Enter'].includes(e.key)) {
+        if (['Enter'].includes(e.key) &&
+            !select &&
+            (!multiline || (multiline && disableReturnKey)) &&
+            !noFormValueItem) {
             e.preventDefault();
             e.stopPropagation();
             onRequestSearchSubmit(name, value);
         }
         if (onKeyDown)
             onKeyDown(e);
-    }, [select, multiline, noFormValueItem, onKeyDown, onRequestSearchSubmit, name, value]);
+    }, [select, multiline, disableReturnKey, noFormValueItem, onKeyDown, onRequestSearchSubmit, name, value]);
     // Render ----------------------------------------------------------------------------------------------------------
     return (React__default.createElement(TextField, __assign$6({}, props, { variant: variant, size: size, color: color, focused: focused || undefined, name: name, label: label, placeholder: placeholder, className: classNames$1(className, 'FormValueItem', 'FormTextField', "variant-".concat(variant)), inputRef: initInputRef ? initInputRef : inputRef, value: value, required: required, fullWidth: !width && fullWidth, error: error, helperText: formColWithHelperText ? undefined : helperText, FormHelperTextProps: { component: 'div' }, disabled: disabled, InputProps: muiInputProps, InputLabelProps: muiInputLabelProps, inputProps: ((_b = initInputProps === null || initInputProps === void 0 ? void 0 : initInputProps.className) === null || _b === void 0 ? void 0 : _b.includes('FormTag-Input')) ? initInputProps : inputProps, style: style, select: select, SelectProps: SelectProps, multiline: multiline, onChange: handleChange, onBlur: handleBlur, onKeyDown: handleKeyDown })));
 });
@@ -2434,7 +2437,7 @@ FormTextField.defaultProps = FormTextFieldDefaultProps;var FormTextDefaultProps
         return finalValue;
     }, [onValue]);
     // Render ----------------------------------------------------------------------------------------------------------
-    return React__default.createElement(FormTextField, __assign$6({ ref: ref, className: classNames$1(className, 'FormText'), onValue: handleValue }, props));
+    return (React__default.createElement(FormTextField, __assign$6({ ref: ref, className: classNames$1(className, 'FormText'), disableReturnKey: true, onValue: handleValue }, props)));
 });
 FormText.displayName = 'FormText';
 FormText.defaultProps = FormTextDefaultProps;var FormHiddenDefaultProps = {};var css_248z$i = ".FormHidden {\n  display: none !important;\n}";
@@ -12375,6 +12378,87 @@ SearchGroup.defaultProps = SearchGroupDefaultProps;var SearchButtonDefaultProps
     // Render ----------------------------------------------------------------------------------------------------------
     return (React__default.createElement(FormButton, __assign$6({ className: classNames$1(className, 'SearchButton'), size: 'medium', sx: sx, fullWidth: false, startIcon: startIcon, endIcon: endIcon, icon: icon }, props), children));
 };
-SearchButton.defaultProps = SearchButtonDefaultProps;dayjs.extend(dayjsIsSameOrAfter);
+SearchButton.defaultProps = SearchButtonDefaultProps;var SearchMenuButtonDefaultProps = {};var SearchMenuButton = function (_a) {
+    // ID ----------------------------------------------------------------------------------------------------------------
+    var children = _a.children, className = _a.className, initSx = _a.sx, menuList = _a.menuList, startIcon = _a.startIcon, icon = _a.icon, placement = _a.placement, props = __rest$3(_a, ["children", "className", "sx", "menuList", "startIcon", "icon", "placement"]);
+    var buttonId = useId();
+    var menuId = useId();
+    // State -------------------------------------------------------------------------------------------------------------
+    var _b = useState(null), anchorEl = _b[0], setAnchorEl = _b[1];
+    var _c = useState('ArrowDropDown'), endIcon = _c[0], setEndIcon = _c[1];
+    // Event Handler -----------------------------------------------------------------------------------------------------
+    var handleClick = useCallback(function (e) {
+        setAnchorEl(e.currentTarget);
+        setEndIcon('ArrowDropUp');
+    }, []);
+    var handleClose = useCallback(function () {
+        setAnchorEl(null);
+        setEndIcon('ArrowDropDown');
+    }, []);
+    // Memo --------------------------------------------------------------------------------------------------------------
+    var open = useMemo(function () { return !!anchorEl; }, [anchorEl]);
+    var sx = useMemo(function () { return (__assign$6({ minWidth: 0, px: !startIcon && !endIcon && !icon ? 1.2 : 1.7 }, initSx)); }, [endIcon, icon, initSx, startIcon]);
+    var anchorOrigin = useMemo(function () {
+        switch (placement || 'bottom') {
+            case 'bottom':
+                return { vertical: 'bottom', horizontal: 'center' };
+            case 'bottom-left':
+                return { vertical: 'bottom', horizontal: 'left' };
+            case 'bottom-right':
+                return { vertical: 'bottom', horizontal: 'right' };
+            case 'top':
+                return { vertical: 'top', horizontal: 'center' };
+            case 'top-left':
+                return { vertical: 'top', horizontal: 'left' };
+            case 'top-right':
+                return { vertical: 'top', horizontal: 'right' };
+            case 'left':
+                return { vertical: 'center', horizontal: 'left' };
+            case 'left-top':
+                return { vertical: 'top', horizontal: 'left' };
+            case 'left-bottom':
+                return { vertical: 'bottom', horizontal: 'left' };
+            case 'right':
+                return { vertical: 'center', horizontal: 'right' };
+            case 'right-top':
+                return { vertical: 'top', horizontal: 'right' };
+            case 'right-bottom':
+                return { vertical: 'bottom', horizontal: 'right' };
+        }
+    }, [placement]);
+    var transformOrigin = useMemo(function () {
+        switch (placement || 'bottom') {
+            case 'bottom':
+                return { vertical: 'top', horizontal: 'center' };
+            case 'bottom-left':
+                return { vertical: 'top', horizontal: 'left' };
+            case 'bottom-right':
+                return { vertical: 'top', horizontal: 'right' };
+            case 'top':
+                return { vertical: 'bottom', horizontal: 'center' };
+            case 'top-left':
+                return { vertical: 'bottom', horizontal: 'left' };
+            case 'top-right':
+                return { vertical: 'bottom', horizontal: 'right' };
+            case 'left':
+                return { vertical: 'center', horizontal: 'right' };
+            case 'left-top':
+                return { vertical: 'top', horizontal: 'right' };
+            case 'left-bottom':
+                return { vertical: 'bottom', horizontal: 'right' };
+            case 'right':
+                return { vertical: 'center', horizontal: 'left' };
+            case 'right-top':
+                return { vertical: 'top', horizontal: 'left' };
+            case 'right-bottom':
+                return { vertical: 'bottom', horizontal: 'left' };
+        }
+    }, [placement]);
+    // Render ----------------------------------------------------------------------------------------------------------
+    return (React__default.createElement(React__default.Fragment, null,
+        React__default.createElement(FormButton, __assign$6({ className: classNames$1(className, 'SearchMenuButton'), size: 'medium', sx: sx, fullWidth: false, startIcon: startIcon, icon: icon }, props, { id: buttonId, "aria-controls": open ? menuId : undefined, "aria-haspopup": 'true', "aria-expanded": open ? 'true' : undefined, endIcon: endIcon, onClick: handleClick }), children),
+        React__default.createElement(Menu, { id: menuId, "aria-labelledby": buttonId, anchorEl: anchorEl, open: open, onClose: handleClose, onClick: handleClose, anchorOrigin: anchorOrigin, transformOrigin: transformOrigin }, menuList)));
+};
+SearchMenuButton.defaultProps = SearchMenuButtonDefaultProps;dayjs.extend(dayjsIsSameOrAfter);
 dayjs.extend(dayjsIsSameOrBefore);
-dayjs.extend(dayjsIsBetween);export{Form,FormAutocomplete,FormAutocompleteDefaultProps,FormBlock,FormBlockDefaultProps,FormBody,FormBodyDefaultProps,FormButton,FormButtonDefaultProps,FormCheckbox,FormCheckboxDefaultProps,FormCol,FormColDefaultProps,FormContext,FormContextDefaultValue,FormContextProvider,FormDatePicker,FormDatePickerDefaultProps,FormDateRangePicker,FormDateRangePickerDefaultProps,FormDateTimePicker,FormDateTimePickerDefaultProps,FormDefaultProps,FormDivider,FormDividerDefaultProps,FormEmail,FormEmailDefaultProps,FormFile,FormFileDefaultProps,FormFooter,FormFooterDefaultProps,FormHidden,FormHiddenDefaultProps,FormIcon,FormIconDefaultProps,FormImageFile,FormImageFileDefaultProps,FormLabel,FormLabelDefaultProps,FormMobile,FormMobileDefaultProps,FormNumber,FormNumberDefaultProps,FormPassword,FormPasswordDefaultProps,FormRadioGroup,FormRadioGroupDefaultProps,FormRating,FormRatingDefaultProps,FormRow,FormRowDefaultProps,FormSearch,FormSearchDefaultProps,FormSelect,FormSelectDefaultProps,FormTag,FormTagDefaultProps,FormTel,FormTelDefaultProps,FormText,FormTextDefaultProps,FormTextEditor,FormTextEditorDefaultProps,FormTextField,FormTextFieldDefaultProps,FormTextarea,FormTextareaDefaultProps,FormTimePicker,FormTimePickerDefaultProps,FormToggleButtonGroup,FormToggleButtonGroupDefaultProps,FormUrl,FormUrlDefaultProps,Search,SearchButton,SearchButtonDefaultProps,SearchDefaultProps,SearchGroup,SearchGroupDefaultProps,SearchGroupRow,SearchGroupRowDefaultProps,useFormState};//# sourceMappingURL=index.esm.js.map
+dayjs.extend(dayjsIsBetween);export{Form,FormAutocomplete,FormAutocompleteDefaultProps,FormBlock,FormBlockDefaultProps,FormBody,FormBodyDefaultProps,FormButton,FormButtonDefaultProps,FormCheckbox,FormCheckboxDefaultProps,FormCol,FormColDefaultProps,FormContext,FormContextDefaultValue,FormContextProvider,FormDatePicker,FormDatePickerDefaultProps,FormDateRangePicker,FormDateRangePickerDefaultProps,FormDateTimePicker,FormDateTimePickerDefaultProps,FormDefaultProps,FormDivider,FormDividerDefaultProps,FormEmail,FormEmailDefaultProps,FormFile,FormFileDefaultProps,FormFooter,FormFooterDefaultProps,FormHidden,FormHiddenDefaultProps,FormIcon,FormIconDefaultProps,FormImageFile,FormImageFileDefaultProps,FormLabel,FormLabelDefaultProps,FormMobile,FormMobileDefaultProps,FormNumber,FormNumberDefaultProps,FormPassword,FormPasswordDefaultProps,FormRadioGroup,FormRadioGroupDefaultProps,FormRating,FormRatingDefaultProps,FormRow,FormRowDefaultProps,FormSearch,FormSearchDefaultProps,FormSelect,FormSelectDefaultProps,FormTag,FormTagDefaultProps,FormTel,FormTelDefaultProps,FormText,FormTextDefaultProps,FormTextEditor,FormTextEditorDefaultProps,FormTextField,FormTextFieldDefaultProps,FormTextarea,FormTextareaDefaultProps,FormTimePicker,FormTimePickerDefaultProps,FormToggleButtonGroup,FormToggleButtonGroupDefaultProps,FormUrl,FormUrlDefaultProps,Search,SearchButton,SearchButtonDefaultProps,SearchDefaultProps,SearchGroup,SearchGroupDefaultProps,SearchGroupRow,SearchGroupRowDefaultProps,SearchMenuButton,SearchMenuButtonDefaultProps,useFormState};//# sourceMappingURL=index.esm.js.map