Revert unwanted changes

examples/app.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react';
+import { PureComponent } from 'react';
 
 import {
   AppRoot,
@@ -29,7 +30,7 @@ interface AppState {
   sidebarOpen: boolean;
 }
 
-class App extends React.PureComponent<{}, AppState> {
+class App extends PureComponent<{}, AppState> {
   public constructor(props: {}) {
     super(props);
 

src/ts/components/banners/banner.tsx

@@ -1,11 +1,10 @@
 import * as classNames from 'classnames';
 import * as React from 'react';
+import { HTMLProps, PureComponent } from 'react';
 
 import { ComponentProps } from '../../types';
 
-export interface BannerProps
-  extends ComponentProps,
-    React.HTMLProps<HTMLElement> {
+export interface BannerProps extends ComponentProps, HTMLProps<HTMLElement> {
   /**
    * If set, displays the component, otherwise it is hidden
    * @default true
@@ -21,7 +20,7 @@ export interface BannerProps
 /**
  * A Banner component that displays fixed to the top or bottom of the screen.
  */
-export class Banner extends React.PureComponent<BannerProps> {
+export class Banner extends PureComponent<BannerProps> {
   public render() {
     const {
       className,

src/ts/components/banners/cookie-banner.tsx

@@ -1,6 +1,7 @@
-import * as classnames from 'classnames';
+import * as classNames from 'classnames';
 import * as cookie from 'cookie';
 import * as React from 'react';
+import { HTMLProps, PureComponent } from 'react';
 
 import { ComponentProps } from '../../types';
 import Banner from './banner';
@@ -15,7 +16,7 @@ export type Render = (
 
 export interface CookieBannerProps
   extends ComponentProps,
-    React.HTMLProps<HTMLElement> {
+    HTMLProps<HTMLElement> {
   /**
    * Takes a component as a function and renders as a child
    */
@@ -36,7 +37,7 @@ export interface CookieBannerState {
  * This component takes a render prop, which can be a component or function, that is passed a dismiss prop
  * which you can then apply as an onClick prop to an element of your choice.
  */
-export class CookieBanner extends React.PureComponent<
+export class CookieBanner extends PureComponent<
   CookieBannerProps,
   CookieBannerState
 > {
@@ -65,7 +66,7 @@ export class CookieBanner extends React.PureComponent<
         {...remainingProps}
         position={position}
         open={!dismissed}
-        className={classnames('cookie-banner', className)}
+        className={classNames('cookie-banner', className)}
       >
         {render && render({ dismiss: this.setCookie })}
       </Banner>

src/ts/components/misc/highlight.tsx

@@ -1,10 +1,11 @@
 import * as classNames from 'classnames';
 import * as React from 'react';
-import * as ReactTransitionGroup from 'react-transition-group';
+import { HTMLProps, PureComponent } from 'react';
+import * as CSSTransitionGroup from 'react-transition-group/CSSTransitionGroup';
 
 import { ComponentProps } from '../../types';
 
-export interface HighlightProps extends ComponentProps, React.HTMLProps<HTMLElement> {
+export interface HighlightProps extends ComponentProps, HTMLProps<HTMLElement> {
   /**
    * Displays the overlay
    * @default false
@@ -20,18 +21,16 @@ export interface HighlightProps extends ComponentProps, React.HTMLProps<HTMLElem
    * @default undefined
    */
   backgroundColor?: string | undefined;
-  timeout?: number;
 }
 
 /**
  * This highlight component is used to display a single element while shading everything else out.
  */
-export class Highlight extends React.PureComponent<HighlightProps> {
+export class Highlight extends PureComponent<HighlightProps, {}> {
   public render() {
     const {
       className,
       children,
-      timeout = 500,
       open = false,
       disabled = false,
       backgroundColor = null,
@@ -44,13 +43,13 @@ export class Highlight extends React.PureComponent<HighlightProps> {
         {...remainingProps}
         className={classNames('highlight', className)}
       >
-        <ReactTransitionGroup.Transition timeout={timeout}>
-          <ReactTransitionGroup.TransitionGroup
-            classNames="highlight-transition"
-          >
-            {open && <div className="highlight-overlay" />}
-          </ReactTransitionGroup.TransitionGroup>
-        </ReactTransitionGroup.Transition>
+        <CSSTransitionGroup
+          transitionName="highlight-transition"
+          transitionEnterTimeout={300}
+          transitionLeaveTimeout={200}
+        >
+          {open && <div className="highlight-overlay" />}
+        </CSSTransitionGroup>
         <div
           className={classNames('highlight-content', open && 'open')}
           style={backgroundColor ? { backgroundColor } : undefined}

src/ts/components/modals/modal-renderer.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { HTMLProps, PureComponent } from 'react';
-// import * as CSSTransitionGroup from 'react-transition-group';
+import * as CSSTransitionGroup from 'react-transition-group/CSSTransitionGroup';
 
 export interface ModalRendererProps extends HTMLProps<HTMLElement> {
   /**
@@ -19,19 +19,18 @@ export class ModalRenderer extends PureComponent<ModalRendererProps, {}> {
     const { modals } = this.props;
 
     return (
-      // <CSSTransitionGroup
-      //   transitionName="modal-transition"
-      //   transitionEnterTimeout={300}
-      //   transitionLeaveTimeout={200}
-      // >
-      //   {modals &&
-      //     modals.map((modal, index) => (
-      //       <div key={index} className="modal-container">
-      //         {modal}
-      //       </div>
-      //     ))}
-      // </CSSTransitionGroup>
-      <span />
+      <CSSTransitionGroup
+        transitionName="modal-transition"
+        transitionEnterTimeout={300}
+        transitionLeaveTimeout={200}
+      >
+        {modals &&
+          modals.map((modal, index) => (
+            <div key={index} className="modal-container">
+              {modal}
+            </div>
+          ))}
+      </CSSTransitionGroup>
     );
   }
 }

src/ts/components/navigation/side-bar.tsx

@@ -1,7 +1,7 @@
 import * as classNames from 'classnames';
 import * as React from 'react';
 import { HTMLProps, PureComponent } from 'react';
-import * as CSSTransitionGroup from 'react-transition-group';
+import * as CSSTransitionGroup from 'react-transition-group/CSSTransitionGroup';
 
 import { ComponentProps } from '../../types';
 
@@ -43,15 +43,15 @@ export class SideBar extends PureComponent<SideBarProps, {}> {
 
     return (
       <div className={classNames('side-bar-container', className)}>
-        {/* <CSSTransitionGroup
+        <CSSTransitionGroup
           transitionName="side-bar-transition"
           transitionEnterTimeout={300}
           transitionLeaveTimeout={200}
         >
           {open && (
             <div className="side-bar-overlay" onClick={onClickOutside} />
           )}
-        </CSSTransitionGroup> */}
+        </CSSTransitionGroup>
         <Component
           {...remainingProps}
           className={classNames(

src/ts/store.tsx

@@ -22,17 +22,12 @@ export class Store {
   }
 
   public setState = (state: StoreState) => {
-    // for (const key in state) {
-    //   /* istanbul ignore else */
-    //   if (Object.prototype.hasOwnProperty.call(state, key)) {
-    //     const stateKey = key as keyof StoreState;
-    //     this.state[stateKey] = state[stateKey] as StoreState[stateKey];
-    //   }
-    // }
-    this.state = {
-      ...this.state,
-      ...state,
-    };
+    for (const key in state) {
+      /* istanbul ignore else */
+      if (Object.prototype.hasOwnProperty.call(state, key)) {
+        this.state[key as keyof StoreState] = state[key as keyof StoreState];
+      }
+    }
 
     this.listeners.forEach(listener => {
       listener({ ...this.state });