stash

packages/devui/src/Select/Select.tsx

@@ -81,7 +81,7 @@ export class Select<
   };
 }
 
-interface ExternalSelectProps<
+export interface ExternalSelectProps<
   Option extends OptionTypeBase = OptionTypeBase,
   IsMulti extends boolean = false
 > extends Omit<ReactSelectProps<Option, IsMulti>, 'theme'> {

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

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

packages/redux-devtools-app/src/containers/monitors/Dispatcher.tsx

@@ -182,9 +182,10 @@ class Dispatcher extends Component<Props, State> {
       );
     }
 
-    let options: { value: string | number; label: string }[] = [
-      { value: 'default', label: 'Custom action' },
-    ];
+    let options: {
+      value: 'default' | 'actions-help' | number;
+      label: string;
+    }[] = [{ value: 'default', label: 'Custom action' }];
     if (actionCreators && actionCreators.length > 0) {
       options = options.concat(
         actionCreators.map(({ name, args }, i) => ({
@@ -204,9 +205,11 @@ class Dispatcher extends Component<Props, State> {
         {actionElement}
         <Toolbar>
           <Select
-            openOuterUp
-            onChange={this.selectActionCreator}
-            value={this.state.selected || 'default'}
+            onChange={(option) => this.selectActionCreator(option!.value)}
+            value={
+              options.find((option) => option.value === this.state.selected) ||
+              options.find((option) => option.value === 'default')
+            }
             options={options}
           />
           <Button onClick={this.dispatchAction} primary={this.state.changed}>

packages/redux-devtools-inspector-monitor-test-tab/src/index.tsx

@@ -52,9 +52,9 @@ export default class TestTab<S, A extends Action<unknown>> extends Component<
     (this.props.monitorState as { testGenerator?: TestGeneratorMonitorState })
       .testGenerator || {};
 
-  handleSelectTemplate = (selectedTemplate: Template) => {
+  handleSelectTemplate = (selectedTemplate: Template | null | undefined) => {
     const { templates = getDefaultTemplates() } = this.getPersistedState();
-    this.updateState({ selected: templates.indexOf(selectedTemplate) });
+    this.updateState({ selected: templates.indexOf(selectedTemplate!) });
   };
 
   handleCloseTip = () => {
@@ -133,9 +133,9 @@ export default class TestTab<S, A extends Action<unknown>> extends Component<
           <div style={{ flexGrow: 1, zIndex: 100 }}>
             <Select
               options={templates}
-              getOptionValue={(template: Template) => template.name}
-              getOptionLabel={(template: Template) => template.name}
-              value={templates.filter((template) => template.name === name)}
+              getOptionValue={(template: Template) => template.name!}
+              getOptionLabel={(template: Template) => template.name!}
+              value={templates.find((template) => template.name === name)}
               onChange={this.handleSelectTemplate}
             />
           </div>