fix: updates Select types

packages/react-select/src/Select.js

@@ -313,6 +313,25 @@ type CategorizedGroup = {
 
 type CategorizedGroupOrOption = CategorizedGroup | CategorizedOption;
 
+type CommonProps = {
+  cx(...args: any): string,
+  clearValue(): void,
+  getStyles(key: string, props: {}): {},
+  getValue(): OptionsType,
+  hasValue: boolean,
+  isMulti: boolean,
+  isRtl: boolean,
+  options: OptionsType,
+  selectOption(newValue: OptionType): void,
+  setValue(
+    newValue: ValueType,
+    action?: ActionTypes,
+    option?: OptionType
+  ): void,
+  selectProps: Props,
+  theme: typeof defaultTheme,
+};
+
 function toCategorizedOption(
   props: Props,
   option: OptionType,
@@ -488,7 +507,7 @@ export default class Select extends Component<Props, State> {
 
   blockOptionHover: boolean = false;
   isComposing: boolean = false;
-  commonProps: any; // TODO
+  commonProps: CommonProps;
   initialTouchX: number = 0;
   initialTouchY: number = 0;
   instancePrefix: string = '';
@@ -929,7 +948,7 @@ export default class Select extends Component<Props, State> {
 
   cx = (...args: any) => classNames(this.props.classNamePrefix, ...args);
 
-  getCommonProps() {
+  getCommonProps(): $Exact<CommonProps> {
     const {
       clearValue,
       cx,

packages/react-select/src/components/Group.js

@@ -13,7 +13,7 @@ type ComponentProps = {
   /** Props to pass to Heading. */
   headingProps: any,
   /** Props to be passed to the group element. */
-  innerProps: {},
+  innerProps?: {},
   /** Label to be displayed in the heading component. */
   label: Node,
 };

packages/react-select/src/components/Menu.js

@@ -209,9 +209,9 @@ export function getMenuPlacement({
 
 export type MenuAndPlacerCommon = CommonProps & {
   /** Callback to update the portal after possible flip. */
-  getPortalPlacement: MenuState => void,
+  getPortalPlacement?: MenuState => void,
   /** Props to be passed to the menu wrapper. */
-  innerProps: {},
+  innerProps?: {},
   /** Set the maximum height of the menu. */
   maxMenuHeight: number,
   /** Set whether the menu should be at the top, at the bottom. The auto options sets it to bottom. */
@@ -231,7 +231,7 @@ export type MenuProps = MenuAndPlacerCommon & {
 };
 export type MenuPlacerProps = MenuAndPlacerCommon & {
   /** The children to be rendered. */
-  children: ({}) => Node,
+  children: ({ ref: any, placerProps: any }) => Node,
 };
 
 function alignToControl(placement) {
@@ -351,7 +351,7 @@ export type MenuListProps = {
   /** Inner ref to DOM Node */
   innerRef: InnerRef,
   /** Props to be passed to the menu-list wrapper. */
-  innerProps: {},
+  innerProps?: {},
 };
 export type MenuListComponentProps = CommonProps &
   MenuListProps &
@@ -418,7 +418,7 @@ export type NoticeProps = CommonProps & {
   /** The children to be rendered. */
   children: Node,
   /** Props to be passed on to the wrapper. */
-  innerProps: {},
+  innerProps?: {},
 };
 
 export const NoOptionsMessage = (props: NoticeProps) => {
@@ -473,7 +473,7 @@ export type MenuPortalProps = CommonProps & {
   appendTo: HTMLElement,
   children: Node, // ideally Menu<MenuProps>
   controlElement: HTMLElement,
-  innerProps: {},
+  innerProps?: {},
   menuPlacement: MenuPlacement,
   menuPosition: MenuPosition,
 };

packages/react-select/src/components/MultiValue.js

@@ -8,9 +8,9 @@ import type { CommonProps } from '../types';
 export type MultiValueProps = CommonProps & {
   children: Node,
   components: any,
-  cropWithEllipsis: boolean,
+  cropWithEllipsis?: boolean,
   data: any,
-  innerProps: any,
+  innerProps?: {},
   isFocused: boolean,
   isDisabled: boolean,
   removeProps: {

packages/react-select/src/components/Option.js

@@ -15,9 +15,9 @@ type State = {
 };
 type InnerProps = {
   id: string,
-  key: string,
-  onClick: MouseEventHandler,
-  onMouseOver: MouseEventHandler,
+  key?: string,
+  onClick?: MouseEventHandler,
+  onMouseOver?: MouseEventHandler,
   tabIndex: number,
 };
 export type OptionProps = PropsWithStyles &

packages/react-select/src/components/Placeholder.js

@@ -8,7 +8,7 @@ export type PlaceholderProps = CommonProps & {
   /** The children to be rendered. */
   children: Node,
   /** props passed to the wrapping element for the group. */
-  innerProps: { [string]: any },
+  innerProps?: {},
 };
 
 export const placeholderCSS = ({

packages/react-select/src/components/SingleValue.js

@@ -13,7 +13,7 @@ type ValueProps = {
   /* The data of the selected option rendered in the Single Value component. */
   data: any,
   /** Props passed to the wrapping element for the group. */
-  innerProps: any,
+  innerProps?: {},
 };
 export type SingleValueProps = CommonProps & ValueProps & State;
 

packages/react-select/src/components/indicators.js

@@ -44,9 +44,9 @@ export const DownChevron = (props: any) => (
 
 export type IndicatorProps = CommonProps & {
   /** The children to be rendered inside the indicator. */
-  children: Node,
+  children?: Node,
   /** Props that will be passed on to the children. */
-  innerProps: any,
+  innerProps?: {},
   /** The focused state of the select. */
   isFocused: boolean,
   /** Whether the text is right to left */
@@ -202,7 +202,7 @@ export type LoadingIconProps = {
   isRtl: boolean,
 } & CommonProps & {
     /** Set size of the container. */
-    size: number,
+    size?: number,
   };
 export const LoadingIndicator = (props: LoadingIconProps) => {
   const { className, cx, getStyles, innerProps, isRtl } = props;