Fix dialog z index

.flowconfig

@@ -8,4 +8,3 @@ flow
 
 [options]
 esproposal.class_static_fields=enable
-unsafe.enable_getters_and_setters=true

flow/modules.js

@@ -1,31 +1,23 @@
 declare module 'classnames' {
-  declare var exports: {
-    (): any
-  }
+  declare export default function classnames(): any
 }
 
 declare module 'react-click-outside' {
-  declare var exports: {
-    (module: any): any
-  }
+  declare export default function enhanceWithClickOutside(module: any): any
 }
 
 declare module 'throttle-debounce/throttle' {
-  declare var exports: {
-    (...args: Array<any>): any
-  }
+  declare export default function throttle(...args: Array<any>): any
 }
 
 declare module 'throttle-debounce/debounce' {
-  declare var exports: {
-    (...args: Array<any>): any
-  }
+  declare export default function debounce(...args: Array<any>): any
 }
 
 declare module 'async-validator' {
   declare class AsyncValidator {
     constructor(options: Object): void;
     validate(...args: Array<any>): void;
   }
-  declare var exports: typeof AsyncValidator;
+  declare export default typeof AsyncValidator;
 }

libs/collapse/index.jsx

@@ -1,17 +1,15 @@
 /* @flow */
 
-import React, { Component } from 'react';
+import * as React from 'react';
 
 const ANIMATION_DURATION = 300;
 
 type Props = {
   isShow: boolean,
-  children?: React.Element<any>
+  children?: React.Node
 };
 
-export default class CollapseTransition extends Component {
-  props: Props;
-
+export default class CollapseTransition extends React.Component <Props> {
   selfRef: any;
   leaveTimer: any;
   enterTimer: any;

package.json

@@ -32,7 +32,7 @@
   },
   "homepage": "https://github.com/eleme/element-react",
   "devDependencies": {
-    "@types/react": "^15.6.7",
+    "@types/react": "^16.3.18",
     "babel-cli": "^6.26.0",
     "babel-eslint": "^7.2.3",
     "babel-jest": "^21.2.0",
@@ -51,13 +51,13 @@
     "enzyme-adapter-react-16": "^1.1.0",
     "eslint": "^3.19.0",
     "eslint-config-airbnb": "^15.0.1",
-    "eslint-plugin-flowtype": "^2.46.3",
+    "eslint-plugin-flowtype": "^2.50.0",
     "eslint-plugin-import": "^2.6.0",
     "eslint-plugin-jsx-a11y": "^5.1.0",
     "eslint-plugin-react": "^7.8.1",
     "extract-text-webpack-plugin": "^3.0.2",
     "file-loader": "^1.1.5",
-    "flow-bin": "^0.51.1",
+    "flow-bin": "^0.78.0",
     "html-webpack-plugin": "^2.30.1",
     "jest": "^21.2.1",
     "marked": "^0.3.6",
@@ -87,8 +87,8 @@
     "throttle-debounce": "^1.0.1"
   },
   "peerDependencies": {
-    "react": "*",
-    "react-dom": "*"
+    "react": ">=16.3.0",
+    "react-dom": ">=16.3.0"
   },
   "jest": {
     "testRegex": "(/jest/.+\\.(js|jsx)$)|_test.jsx?$",

src/auto-complete/AutoComplete.jsx

@@ -1,6 +1,6 @@
 /* @flow */
 
-import React from 'react';
+import * as React from 'react';
 import ReactDOM from 'react-dom';
 import ClickOutside from 'react-click-outside';
 import { Component, PropTypes } from '../../libs';
@@ -172,7 +172,7 @@ class AutoComplete extends Component {
     return (isValidData || this.state.loading) && this.state.isFocus;
   }
 
-  onKeyDown(e: SyntheticKeyboardEvent): void {
+  onKeyDown(e: SyntheticKeyboardEvent<HTMLInputElement>): void {
     const { highlightedIndex } = this.state;
 
     switch (e.keyCode) {

src/auto-complete/Suggestions.jsx

@@ -1,6 +1,6 @@
 /* @flow */
 
-import React from 'react';
+import * as React from 'react';
 import ReactDOM from 'react-dom';
 import Popper from '../../libs/utils/popper';
 import { Component, PropTypes, Transition, View } from '../../libs';
@@ -72,8 +72,7 @@ export default class Suggestions extends Component {
               'is-loading': loading
             })}
             style={{
-              width: dropdownWidth,
-              zIndex: 1
+              width: dropdownWidth
             }}
           >
             <Scrollbar

src/badge/Badge.jsx

@@ -1,10 +1,10 @@
 /* @flow */
 
-import React from 'react';
+import * as React from 'react';
 import { Component, PropTypes } from '../../libs';
 
 type Props = {
-  children: React.Element<any>,
+  children: React.Node,
   value: number | string,
   max: number,
   isDot: boolean,

src/button/Button.jsx

@@ -1,10 +1,10 @@
 /* @flow */
 
-import React from 'react';
+import * as React from 'react';
 import { Component, PropTypes } from '../../libs';
 
 export default class Button extends Component {
-  onClick(e: SyntheticEvent): void {
+  onClick(e: SyntheticEvent<HTMLButtonElement>): void {
     if (!this.props.loading) {
       this.props.onClick && this.props.onClick(e);
     }

src/button/ButtonGroup.jsx

@@ -1,6 +1,6 @@
 /* @flow */
 
-import React from 'react';
+import * as React from 'react';
 import { Component } from '../../libs';
 
 export default class ButtonGroup extends Component {

src/card/Card.jsx

@@ -1,6 +1,6 @@
 /* @flow */
 
-import React from 'react';
+import * as React from 'react';
 import { Component, PropTypes } from '../../libs';
 
 export default class Card extends Component {

src/carousel/Carousel.jsx

@@ -1,6 +1,6 @@
 /* @flow */
 
-import React from 'react';
+import * as React from 'react';
 import throttle from 'throttle-debounce/throttle';
 import { Component, PropTypes, Transition, View } from '../../libs';
 import { addResizeListener, removeResizeListener } from '../../libs/utils/resize-event';

src/cascader/Cascader.jsx

@@ -243,7 +243,7 @@ class Cascader extends Component {
     return flatOptions;
   }
 
-  clearValue(e: SyntheticEvent) {
+  clearValue(e: SyntheticEvent<HTMLElement>) {
     e.stopPropagation();
 
     this.handlePick([], true);

src/cascader/Menu.jsx

@@ -1,6 +1,6 @@
 /* @flow */
 
-import React from 'react';
+import * as React from 'react';
 import { Component, PropTypes, Transition, View } from '../../libs';
 
 type State = {

src/checkbox/CheckBox.jsx

@@ -1,6 +1,6 @@
 /* @flow */
 
-import React from 'react'
+import * as React from 'react'
 import { Component, PropTypes } from '../../libs'
 
 type State = {
@@ -42,7 +42,7 @@ export default class Checkbox extends Component {
     });
   }
 
-  onChange(e: SyntheticEvent): void {
+  onChange(e: SyntheticEvent<HTMLInputElement>): void {
     if (e.target instanceof HTMLInputElement) {
       const { label } = this.state;
       const { trueLabel, falseLabel} = this.props;

src/checkbox/CheckBoxButton.jsx

@@ -1,6 +1,6 @@
 /* @flow */
 
-import React from 'react';
+import * as React from 'react';
 import CheckBox from './CheckBox';
 
 export default class CheckboxButton extends CheckBox {

src/checkbox/CheckBoxGroup.jsx

@@ -1,6 +1,6 @@
 /* @flow */
 
-import React from 'react';
+import * as React from 'react';
 import { Component, PropTypes } from '../../libs'
 
 type State = {

src/collapse/Collapse.jsx

@@ -1,6 +1,6 @@
 /* @flow */
 
-import React from 'react';
+import * as React from 'react';
 import { Component, PropTypes } from '../../libs';
 
 type State = {

src/collapse/CollapseItem.jsx

@@ -1,6 +1,6 @@
 /* @flow */
 
-import React from 'react';
+import * as React from 'react';
 import { Component, PropTypes, CollapseTransition } from '../../libs';
 
 export default class CollapseItem extends Component {

src/color-picker/ColorPicker.jsx

@@ -1,6 +1,6 @@
 /* @flow */
 
-import React from 'react';
+import * as React from 'react';
 import ClickOutside from 'react-click-outside';
 import { Component, PropTypes } from '../../libs';
 import PickerDropdown from './components/PickerDropdown';

src/color-picker/Types.js

@@ -40,6 +40,6 @@ export type SvPanelState = {
 };
 
 export type DragOptions = {
-  drag: (event: SyntheticMouseEvent) => void,
-  end: (event: SyntheticMouseEvent) => void
+  drag: (event: SyntheticMouseEvent<HTMLDivElement>) => void,
+  end: (event: SyntheticMouseEvent<HTMLDivElement>) => void
 };

src/color-picker/components/AlphaSlider.jsx

@@ -1,6 +1,6 @@
 /* @flow */
 
-import React from 'react';
+import * as React from 'react';
 import { Component, PropTypes } from '../../../libs';
 import draggable from '../draggable';
 import type { AlphaSliderState, DragOptions } from '../Types';
@@ -32,15 +32,15 @@ export default class AlphaSlider extends Component {
     this.update();
   }
 
-  handleClick(event: SyntheticMouseEvent): void {
+  handleClick(event: SyntheticMouseEvent<HTMLDivElement>): void {
     const thumb = this.refs.thumb;
     const target = event.target;
     if (target !== thumb) {
       this.handleDrag(event);
     }
   }
 
-  handleDrag(event: SyntheticMouseEvent): void {
+  handleDrag(event: SyntheticMouseEvent<HTMLDivElement>): void {
     const { vertical, color } = this.props;
     const { onChange } = this.context;
     const rect = this.$el.getBoundingClientRect();

src/color-picker/components/HueSlider.jsx

@@ -1,6 +1,6 @@
 /* @flow */
 
-import React from 'react';
+import * as React from 'react';
 import { Component, PropTypes } from '../../../libs';
 import draggable from '../draggable';
 import type { HueSliderState, DragOptions } from '../Types';
@@ -31,15 +31,15 @@ export default class HueSlider extends Component {
     this.update();
   }
 
-  handleClick(event: SyntheticMouseEvent): void {
+  handleClick(event: SyntheticMouseEvent<HTMLDivElement>): void {
     const thumb = this.refs.thumb;
     const target = event.target;
     if (target !== thumb) {
       this.handleDrag(event);
     }
   }
 
-  handleDrag(event: SyntheticMouseEvent): void {
+  handleDrag(event: SyntheticMouseEvent<HTMLDivElement>): void {
     const rect = this.$el.getBoundingClientRect();
     const { thumb } = this.refs;
     const { vertical, color } = this.props;

src/color-picker/components/PickerDropdown.jsx

@@ -1,6 +1,6 @@
 /* @flow */
 
-import React from 'react';
+import * as React from 'react';
 import SvPanel from './SvPanel';
 import HueSlider from './HueSlider';
 import AlphaSlider from './AlphaSlider';

src/color-picker/components/SvPanel.jsx

@@ -1,6 +1,6 @@
 /* @flow */
 
-import React from 'react';
+import * as React from 'react';
 import { Component, PropTypes } from '../../../libs';
 import draggable from '../draggable';
 import type { SvPanelState, DragOptions } from '../Types';
@@ -52,7 +52,7 @@ export default class SvPanel extends Component {
     });
   }
 
-  handleDrag(event: SyntheticMouseEvent): void {
+  handleDrag(event: SyntheticMouseEvent<HTMLDivElement>): void {
     const { color } = this.props;
     const { onChange } = this.context;
     const el = this.$el;

src/date-picker/BasePicker.jsx

@@ -199,7 +199,7 @@ export default class BasePicker extends Component {
     this.props.onBlur(this);
   }
 
-  handleKeydown(evt: SyntheticKeyboardEvent) {
+  handleKeydown(evt: SyntheticKeyboardEvent<HTMLInputElement>) {
     const keyCode = evt.keyCode;
     // tab
     if (keyCode === 9 || keyCode === 27) {
@@ -234,7 +234,7 @@ export default class BasePicker extends Component {
     return true
   }
 
-  handleClickOutside(evt: SyntheticEvent) {
+  handleClickOutside(evt: SyntheticEvent<*>) {
     const { value, pickerVisible } = this.state
     if (!this.isInputFocus && !pickerVisible) {
       return

src/date-picker/Types.js

@@ -31,6 +31,13 @@ type Range<T> = [T, Date]
 type TimeSpinnerSelectableRange = Range<any>[]
 type TimeSpinnerOnSelectRangeChange = (range: Range<number>)=>void
 export type TimeTypes = 'hours' | 'minutes' | 'seconds'
+
+export type TimeTypeProps = {
+  hours: ?number,
+  minutes: ?number,
+  seconds: ?number
+}
+
 export type TimeSpinnerProps = {
   hours: ?number,
   minutes: ?number,