Add onToggle event in all components using DropdownMenu

examples/components/ColorPickerPage.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
+import { CSSTransition }  from 'react-transition-group';
 
 import { ColorPicker } from '@poool/junipero';
 
@@ -11,6 +12,8 @@ class ColorPickerPage extends React.Component {
       default: {},
       enhanced: {},
       unthemed: {},
+      animated: {},
+      animating: false,
     };
   }
 
@@ -80,6 +83,35 @@ class ColorPickerPage extends React.Component {
             <pre>{ JSON.stringify(this.state.unthemed, null, 2)}</pre>
           </div>
         </div>
+
+        <h2 className="mt-5">Animated</h2>
+        <div className="row mt-5">
+          <div className="col-6">
+            <ColorPicker
+              required={true}
+              boxed={this.props.boxed}
+              error={this.props.error}
+              placeholder="Label"
+              disabled={this.props.disabled}
+              onChange={this.onChange.bind(this, 'animated')}
+              animateMenu={(menu) => (
+                <CSSTransition
+                  in={this.state.animating}
+                  mountOnEnter={true}
+                  unmountOnExit={true}
+                  timeout={100}
+                  classNames="slide-in-up-dropdown"
+                  children={menu}
+                />
+              )}
+              onToggle={opened => this.setState({ animating: opened })}
+            />
+          </div>
+          <div className="col-6">
+            <p>Current state :</p>
+            <pre>{ JSON.stringify(this.state.animated, null, 2)}</pre>
+          </div>
+        </div>
       </div>
     );
   }

examples/components/DateFieldPage.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
+import { CSSTransition }  from 'react-transition-group';
 
 import { DateField } from '@poool/junipero';
 
@@ -16,6 +17,8 @@ class DateFieldPage extends React.Component {
         valid: true,
       },
       customTitle: {},
+      animated: {},
+      animating: false,
     };
   }
 
@@ -124,6 +127,34 @@ class DateFieldPage extends React.Component {
             <pre>{JSON.stringify(this.state.customTitle, null, 2)}</pre>
           </div>
         </div>
+
+        <h2 className="mt-5">Animated</h2>
+        <div className="row mt-5">
+          <div className="col-6">
+            <DateField
+              placeholder="Pick a date"
+              disabled={this.props.disabled}
+              error={this.props.error}
+              boxed={this.props.boxed}
+              onChange={this.onChange.bind(this, 'animated')}
+              animateMenu={(menu) => (
+                <CSSTransition
+                  in={this.state.animating}
+                  mountOnEnter={true}
+                  unmountOnExit={true}
+                  timeout={100}
+                  classNames="slide-in-up-dropdown"
+                  children={menu}
+                />
+              )}
+              onToggle={opened => this.setState({ animating: opened })}
+            />
+          </div>
+          <div className="col-6">
+            <p>Current state :</p>
+            <pre>{JSON.stringify(this.state.animated, null, 2)}</pre>
+          </div>
+        </div>
       </div>
     );
   }

examples/components/SelectFieldPage.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
+import { CSSTransition }  from 'react-transition-group';
 
 import { SelectField } from '@poool/junipero';
 
@@ -16,6 +17,8 @@ class SelectFieldPage extends React.Component {
       objectsForceValue: {},
       autocomplete: {},
       forceLabel: {},
+      animated: {},
+      animating: false,
     };
 
     this.options = [
@@ -202,6 +205,36 @@ class SelectFieldPage extends React.Component {
             <pre>{ JSON.stringify(this.state.forceLabel, null, 2)}</pre>
           </div>
         </div>
+
+        <h2 className="mt-5">Animated</h2>
+        <div className="row mt-5">
+          <div className="col-6">
+            <SelectField
+              required={true}
+              disabled={this.props.disabled}
+              error={this.props.error}
+              boxed={this.props.boxed}
+              onChange={this.onChange.bind(this, 'animated')}
+              placeholder="Select one..."
+              options={this.options}
+              animateMenu={(menu) => (
+                <CSSTransition
+                  in={this.state.animating}
+                  mountOnEnter={true}
+                  unmountOnExit={true}
+                  timeout={100}
+                  classNames="slide-in-up-dropdown"
+                  children={menu}
+                />
+              )}
+              onToggle={opened => this.setState({ animating: opened })}
+            />
+          </div>
+          <div className="col-6">
+            <p>Current state :</p>
+            <pre>{ JSON.stringify(this.state.animated, null, 2)}</pre>
+          </div>
+        </div>
       </div>
     );
   }

examples/components/TagsFieldPage.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
+import { CSSTransition }  from 'react-transition-group';
 
 import { TagsField } from '@poool/junipero';
 
@@ -11,6 +12,8 @@ class TagsFieldPage extends React.Component {
       default: {},
       unthemed: {},
       autocomplete: {},
+      animated: {},
+      animating: false,
     };
 
     this.autoCompleteOptions = [
@@ -93,6 +96,42 @@ class TagsFieldPage extends React.Component {
             <pre>{ JSON.stringify(this.state.autocomplete, null, 2)}</pre>
           </div>
         </div>
+
+        <h2 className="mt-5">Animated</h2>
+        <div className="row mt-5">
+          <div className="col-6">
+            <TagsField
+              label="Keywords"
+              disabled={this.props.disabled}
+              boxed={this.props.boxed}
+              error={this.props.error}
+              placeholder="Type a keyword..."
+              onChange={this.onChange.bind(this, 'animated')}
+              autoCompleteUniqueValues={true}
+              autoComplete={(val, cb) => {
+                const search = new RegExp(val, 'i');
+                cb(this.autoCompleteOptions.filter((item) => (
+                  search.test(item)
+                )));
+              }}
+              animateMenu={(menu) => (
+                <CSSTransition
+                  in={this.state.animating}
+                  mountOnEnter={true}
+                  unmountOnExit={true}
+                  timeout={100}
+                  classNames="slide-in-up-dropdown"
+                  children={menu}
+                />
+              )}
+              onToggle={opened => this.setState({ animating: opened })}
+            />
+          </div>
+          <div className="col-6">
+            <p>Current state :</p>
+            <pre>{ JSON.stringify(this.state.animated, null, 2)}</pre>
+          </div>
+        </div>
       </div>
     );
   }

examples/theme/index.styl

@@ -35,19 +35,19 @@
   &-enter, &-appear
     opacity: 0
     transform: translate3d(0, 10px, 0) scale(.99)
-    transition: opacity .3s ease-out .3s, transform .3s ease-out .3s
 
     &-active
       opacity: 1
       transform: translate3d(0, 0, 0) scale(1)
+      transition: opacity .3s ease-out .3s, transform .3s ease-out .3s
 
   &-exit
     opacity: 1
     transform: translate3d(0, 0, 0) scale(1)
-    transition: opacity .3s ease-out, transform .3s ease-out
 
     &-active
       opacity: 0
+      transition: opacity .3s ease-out, transform .3s ease-out
       transform: translate3d(0, 10px, 0) scale(.99)
 
 .slide-in-up-dropdown
@@ -56,20 +56,20 @@
     .junipero-dropdown-menu-inner
       opacity: 0
       transform: translate3d(0, 10px, 0)
-      transition: opacity .1s ease-out, transform .1s ease-out
 
     &-active
       .junipero-dropdown-menu-inner
         opacity: 1
         transform: translate3d(0, 0, 0)
+        transition: opacity .1s ease-out, transform .1s ease-out
 
   &-exit
     .junipero-dropdown-menu-inner
       opacity: 1
       transform: translate3d(0, 0, 0)
-      transition: opacity .1s ease-out, transform .1s ease-out
 
     &-active
       .junipero-dropdown-menu-inner
         opacity: 0
         transform: translate3d(0, 10px, 0)
+        transition: opacity .1s ease-out, transform .1s ease-out

src/ColorPicker.js

@@ -27,6 +27,7 @@ class ColorPicker extends React.Component {
     onBlur: PropTypes.func,
     onChange: PropTypes.func,
     onFocus: PropTypes.func,
+    onToggle: PropTypes.func,
   }
 
   static defaultProps = {
@@ -39,6 +40,7 @@ class ColorPicker extends React.Component {
     onBlur: () => {},
     onChange: () => {},
     onFocus: () => {},
+    onToggle: () => {},
   }
 
   state = {
@@ -234,7 +236,9 @@ class ColorPicker extends React.Component {
   }
 
   onToggle(opened) {
-    this.setState({ opened });
+    this.setState({ opened }, () => {
+      this.props.onToggle(opened);
+    });
   }
 
   getElementOffset(el) {

src/DateField.js

@@ -29,6 +29,7 @@ class DateField extends React.Component {
     weekDaysNames: PropTypes.array,
     animateMenu: PropTypes.func,
     onChange: PropTypes.func,
+    onToggle: PropTypes.func,
     parseTitle: PropTypes.func,
     parseValue: PropTypes.func,
     validate: PropTypes.func,
@@ -49,6 +50,7 @@ class DateField extends React.Component {
     value: null,
     weekDaysNames: ['Mon', 'Tue', 'Wen', 'Thu', 'Fri', 'Sat', 'Sun'],
     onChange: () => {},
+    onToggle: () => {},
     parseTitle: value => value?.toLocaleDateString('en-US', {
       weekday: 'long',
       year: 'numeric',
@@ -106,6 +108,8 @@ class DateField extends React.Component {
       opened,
       selected: this.state.value || new Date(),
       displayed: this.state.value || new Date(),
+    }, () => {
+      this.props.onToggle(opened);
     });
   }
 
@@ -237,6 +241,14 @@ class DateField extends React.Component {
     });
   }
 
+  open() {
+    this.onToggle(true);
+  }
+
+  close() {
+    this.onToggle(false);
+  }
+
   getDateToUTC(year, month, day) {
     return new Date(Date.UTC(year, month, day, 0, 0, 0));
   }

src/SelectField.js

@@ -31,6 +31,7 @@ class SelectField extends React.Component {
     animateMenu: PropTypes.func,
     autoComplete: PropTypes.func,
     onChange: PropTypes.func,
+    onToggle: PropTypes.func,
     parseTitle: PropTypes.func,
     parseValue: PropTypes.func,
     validate: PropTypes.func,
@@ -50,6 +51,7 @@ class SelectField extends React.Component {
     theme: 'default',
     autoComplete: null,
     onChange: () => {},
+    onToggle: () => {},
     parseTitle: (val) => val?.toString(),
     parseValue: (val) => val,
     validate: value => typeof value !== 'undefined' && value !== null,
@@ -98,6 +100,7 @@ class SelectField extends React.Component {
     }, () => {
       this.resetAutoComplete();
       this.autoCompleteInput?.focus();
+      this.props.onToggle(opened);
     });
   }
 
@@ -234,6 +237,14 @@ class SelectField extends React.Component {
     return options?.findIndex((item) => parseValue(item) === value);
   }
 
+  open() {
+    this.onToggle(true);
+  }
+
+  close() {
+    this.onToggle(false);
+  }
+
   render() {
     const {
       disabled,