From f858ed99a0263935a0636ad37c0bf60e70bb2dd4 Mon Sep 17 00:00:00 2001
From: mertsincan <sincan.mert@gmail.com>
Date: Mon, 12 Apr 2021 11:36:52 +0300
Subject: [PATCH] Refactor #1917 - For AutoComplete

---
 src/components/autocomplete/AutoComplete.d.ts    | 1 +
 src/components/autocomplete/AutoComplete.js      | 5 ++++-
 src/components/autocomplete/AutoCompletePanel.js | 4 ++--
 src/showcase/autocomplete/AutoCompleteDoc.js     | 6 ++++++
 4 files changed, 13 insertions(+), 3 deletions(-)

diff --git a/src/components/autocomplete/AutoComplete.d.ts b/src/components/autocomplete/AutoComplete.d.ts
index 137eb877a2..7316fb864b 100755
--- a/src/components/autocomplete/AutoComplete.d.ts
+++ b/src/components/autocomplete/AutoComplete.d.ts
@@ -78,6 +78,7 @@ interface AutoCompleteProps {
     completeMethod?(e: CompleteMethodParams): void;
     itemTemplate?: ItemTemplateType;
     selectedItemTemplate?: SelectedItemTemplateType;
+    transitionOptions?: object;
     onChange?(e: ChangeParams): void;
     onFocus?(event: React.FormEvent<HTMLInputElement>): void;
     onBlur?(event: React.FormEvent<HTMLInputElement>): void;
diff --git a/src/components/autocomplete/AutoComplete.js b/src/components/autocomplete/AutoComplete.js
index e843da9f99..9f708fe08d 100644
--- a/src/components/autocomplete/AutoComplete.js
+++ b/src/components/autocomplete/AutoComplete.js
@@ -54,6 +54,7 @@ export class AutoComplete extends Component {
         completeMethod: null,
         itemTemplate: null,
         selectedItemTemplate: null,
+        transitionOptions: null,
         onChange: null,
         onFocus: null,
         onBlur: null,
@@ -109,6 +110,7 @@ export class AutoComplete extends Component {
         completeMethod: PropTypes.func,
         itemTemplate: PropTypes.any,
         selectedItemTemplate: PropTypes.any,
+        transitionOptions: PropTypes.object,
         onChange: PropTypes.func,
         onFocus: PropTypes.func,
         onBlur: PropTypes.func,
@@ -829,7 +831,8 @@ export class AutoComplete extends Component {
                     panelStyle={this.props.panelStyle} panelClassName={this.props.panelClassName} onClick={this.onPanelClick}
                     optionGroupLabel={this.props.optionGroupLabel} optionGroupChildren={this.props.optionGroupChildren} optionGroupTemplate={this.props.optionGroupTemplate}
                     getOptionGroupLabel={this.getOptionGroupLabel} getOptionGroupChildren={this.getOptionGroupChildren}
-                    in={this.state.overlayVisible} onEnter={this.onOverlayEnter} onEntering={this.onOverlayEntering} onEntered={this.onOverlayEntered} onExit={this.onOverlayExit} onExited={this.onOverlayExited}/>
+                    in={this.state.overlayVisible} onEnter={this.onOverlayEnter} onEntering={this.onOverlayEntering} onEntered={this.onOverlayEntered} onExit={this.onOverlayExit} onExited={this.onOverlayExited}
+                    transitionOptions={this.props.transitionOptions} />
             </span>
         );
     }
diff --git a/src/components/autocomplete/AutoCompletePanel.js b/src/components/autocomplete/AutoCompletePanel.js
index 0e792ca916..6f8b2ffbec 100644
--- a/src/components/autocomplete/AutoCompletePanel.js
+++ b/src/components/autocomplete/AutoCompletePanel.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import ObjectUtils from '../utils/ObjectUtils';
 import { Ripple } from '../ripple/Ripple';
 import { classNames } from '../utils/ClassNames';
-import { CSSTransition } from 'react-transition-group';
+import { CSSTransition } from '../transition/CSSTransition';
 import { Portal } from '../portal/Portal';
 
 class AutoCompletePanelComponent extends Component {
@@ -109,7 +109,7 @@ class AutoCompletePanelComponent extends Component {
         let items = this.renderItems();
 
         return (
-            <CSSTransition nodeRef={this.props.forwardRef} classNames="p-connected-overlay" in={this.props.in} timeout={{ enter: 120, exit: 100 }}
+            <CSSTransition nodeRef={this.props.forwardRef} classNames="p-connected-overlay" in={this.props.in} timeout={{ enter: 120, exit: 100 }} options={this.props.transitionOptions}
                 unmountOnExit onEnter={this.props.onEnter} onEntering={this.props.onEntering} onEntered={this.props.onEntered} onExit={this.props.onExit} onExited={this.props.onExited}>
                 <div ref={this.props.forwardRef} className={panelClassName} style={panelStyle} onClick={this.props.onClick}>
                     <ul className="p-autocomplete-items" role="listbox" id={this.props.listId} style={{ maxHeight: this.props.scrollHeight || 'auto' }}>
diff --git a/src/showcase/autocomplete/AutoCompleteDoc.js b/src/showcase/autocomplete/AutoCompleteDoc.js
index 7087df3c7c..bde6294080 100644
--- a/src/showcase/autocomplete/AutoCompleteDoc.js
+++ b/src/showcase/autocomplete/AutoCompleteDoc.js
@@ -761,6 +761,12 @@ itemTemplate(item) {
                                         <td>null</td>
                                         <td>Template of an option group item.</td>
                                     </tr>
+                                    <tr>
+                                        <td>transitionOptions</td>
+                                        <td>object</td>
+                                        <td>null</td>
+                                        <td>The properties of <a href="https://reactcommunity.org/react-transition-group/css-transition" rel="noopener noreferrer" target="_blank">CSSTransition</a> can be customized, except for "nodeRef" and "in" properties.</td>
+                                    </tr>
                                 </tbody>
                             </table>
                         </div>