Stash

packages/devui/package.json

@@ -47,7 +47,6 @@
     "base16": "^1.0.0",
     "codemirror": "^5.56.0",
     "color": "^3.1.2",
-    "hoist-non-react-statics": "^3.3.2",
     "prop-types": "^15.7.2",
     "react-icons": "^3.10.0",
     "react-jsonschema-form": "^1.8.1",

packages/devui/src/utils/createThemedComponent.tsx

@@ -1,5 +1,4 @@
-import React, { ComponentType } from 'react';
-import hoistNonReactStatics from 'hoist-non-react-statics';
+import React from 'react';
 import getDefaultTheme, { Theme } from '../themes/default';
 import { withTheme } from 'styled-components';
 import { Base16Theme } from 'base16';
@@ -9,33 +8,16 @@ export default <C extends React.ComponentType<any>>(
     ? C
     : never
 ) => {
-  const ThemedComponent = React.forwardRef<C, React.ComponentProps<C>>(
-    (props, ref) => {
-      // eslint-disable-next-line react/prop-types
-      if (props.theme && props.theme.type) {
-        const ThemedComponent = withTheme(
-          UnthemedComponent as ComponentType<{ theme?: Theme }>
-        );
-        return <ThemedComponent {...props} ref={ref} />;
-      }
-      const UnthemedComponentAny = UnthemedComponent as any;
-      return (
-        <UnthemedComponentAny
-          {...props}
-          ref={ref}
-          theme={getDefaultTheme({} as Base16Theme)}
-        />
-      );
-    }
-  );
-
-  hoistNonReactStatics(ThemedComponent, UnthemedComponent);
-
-  ThemedComponent.displayName = `ThemedComponent(${
-    UnthemedComponent.displayName ?? 'Component'
-  })`;
-
-  return ThemedComponent;
+  return withTheme((props) => {
+    return props.theme && props.theme.type ? (
+      <UnthemedComponent {...props} />
+    ) : (
+      <UnthemedComponent
+        {...props}
+        theme={getDefaultTheme({} as Base16Theme)}
+      />
+    );
+  });
 };
 
 // TODO: memoize it?

packages/redux-devtools-test-generator/src/TestGenerator.tsx

@@ -1,5 +1,4 @@
 import React, { PureComponent, Component, ReactNode } from 'react';
-import PropTypes from 'prop-types';
 import { stringify } from 'javascript-stringify';
 import objectPath from 'object-path';
 import jsan from 'jsan';

packages/redux-devtools-test-generator/src/index.tsx

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { Component, CSSProperties } from 'react';
 import PropTypes from 'prop-types';
 import {
   Toolbar,
@@ -130,14 +130,15 @@ export default class TestTab<S, A extends Action<unknown>> extends Component<
     return (
       <Container>
         <Toolbar>
-          <Select
-            options={templates}
-            valueKey="name"
-            labelKey="name"
-            value={name}
-            simpleValue={false}
-            onChange={this.handleSelectTemplate}
-          />
+          <div style={{ flexGrow: 1, zIndex: 100 }}>
+            <Select
+              options={templates}
+              getValueLabel={(template: Template) => template.name}
+              getOptionLabel={(template: Template) => template.name}
+              value={templates.filter((template) => template.name == name)}
+              onChange={this.handleSelectTemplate}
+            />
+          </div>
           <Button onClick={this.editTemplate}>
             <MdEdit />
           </Button>