stash

packages/devui/src/Select/Select.stories.tsx

@@ -22,7 +22,10 @@ export default {
   component: Select,
 };
 
-type TemplateArgs = Omit<SelectProps, 'value'> & { value: string };
+type TemplateArgs = Omit<
+  SelectProps<{ value: string; label: string }, boolean>,
+  'value'
+> & { value: string };
 
 // eslint-disable-next-line react/prop-types
 const Template: Story<TemplateArgs> = ({ value, ...args }) => (

packages/devui/src/Select/Select.tsx

@@ -1,17 +1,26 @@
-import React, { PureComponent, Component } from 'react';
+import React, { PureComponent, Component, ReactElement } from 'react';
 import PropTypes from 'prop-types';
-import ReactSelect, { Props as ReactSelectProps } from 'react-select';
+import ReactSelect, {
+  NamedProps as ReactSelectProps,
+  OptionTypeBase,
+} from 'react-select';
 import createThemedComponent from '../utils/createThemedComponent';
 import { Theme } from '../themes/default';
 
-export interface SelectProps extends Omit<ReactSelectProps, 'theme'> {
+export interface SelectProps<
+  Option extends OptionTypeBase = OptionTypeBase,
+  IsMulti extends boolean = false
+> extends Omit<ReactSelectProps<Option, IsMulti>, 'theme'> {
   theme: Theme;
 }
 
 /**
  * Wrapper around [React Select](https://github.com/JedWatson/react-select).
  */
-export class Select extends (PureComponent || Component)<SelectProps> {
+export class Select<
+  Option extends OptionTypeBase = OptionTypeBase,
+  IsMulti extends boolean = false
+> extends (PureComponent || Component)<SelectProps<Option, IsMulti>> {
   render() {
     return (
       <ReactSelect
@@ -45,7 +54,7 @@ export class Select extends (PureComponent || Component)<SelectProps> {
           },
         })}
         styles={{
-          container: (base, props) => ({
+          container: (base) => ({
             ...base,
             flexGrow: 1,
           }),
@@ -72,4 +81,13 @@ export class Select extends (PureComponent || Component)<SelectProps> {
   };
 }
 
-export default createThemedComponent(Select);
+type SelectComponent = <
+  Option extends OptionTypeBase = OptionTypeBase,
+  IsMulti extends boolean = false
+>(
+  props: SelectProps<Option, IsMulti>
+) => ReactElement;
+
+export default createThemedComponent(Select) as SelectComponent & {
+  theme?: Theme;
+};

packages/redux-devtools-app/src/components/InstanceSelector.tsx

@@ -24,8 +24,13 @@ class InstanceSelector extends Component<Props> {
       <Select
         options={this.select}
         // TODO Where's the type-checking?
-        onChange={this.props.onSelect}
-        value={this.props.selected || ''}
+        onChange={(option: { value: string }) =>
+          this.props.onSelect(option.value)
+        }
+        value={
+          this.select.find((option) => option.value === this.props.selected) ||
+          ''
+        }
       />
     );
   }

packages/redux-devtools-app/webpack.config.ts

@@ -82,7 +82,7 @@ module.exports = (env: { development?: boolean; platform?: string } = {}) => ({
     hints: false,
   },
   devServer: {
-    port: 3000,
+    port: 3001,
   },
   devtool: env.development ? 'eval-source-map' : 'source-map',
 });