From c8caceeb120cd81895205308aed6cfd2dd8cda5d Mon Sep 17 00:00:00 2001
From: Sergii Rudenko <sergii.rudenko@airbnb.com>
Date: Mon, 23 Sep 2019 17:11:26 -0700
Subject: [PATCH 01/12] [ts-migrate][vx-responsive] Init tsconfig.json file

---
 packages/vx-responsive/.eslintrc | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 create mode 100644 packages/vx-responsive/.eslintrc

diff --git a/packages/vx-responsive/.eslintrc b/packages/vx-responsive/.eslintrc
new file mode 100644
index 000000000..e69de29bb

From 1aee9593f57a6d7f7b9fb9993b01d2d27bc7b948 Mon Sep 17 00:00:00 2001
From: Sergii Rudenko <sergii.rudenko@airbnb.com>
Date: Mon, 23 Sep 2019 17:11:30 -0700
Subject: [PATCH 02/12] [ts-migrate][vx-responsive] Rename files from JS/JSX to
 TS/TSX

---
 .../src/components/{ParentSize.jsx => ParentSize.tsx}             | 0
 .../vx-responsive/src/components/{ScaleSVG.jsx => ScaleSVG.tsx}   | 0
 .../src/enhancers/{withParentSize.js => withParentSize.tsx}       | 0
 .../src/enhancers/{withScreenSize.js => withScreenSize.tsx}       | 0
 packages/vx-responsive/src/{index.js => index.ts}                 | 0
 .../test/{ParentSize.test.jsx => ParentSize.test.tsx}             | 0
 .../vx-responsive/test/{ScaleSVG.test.jsx => ScaleSVG.test.tsx}   | 0
 .../test/{withParentSize.test.js => withParentSize.test.tsx}      | 0
 .../test/{withScreenSize.test.js => withScreenSize.test.ts}       | 0
 9 files changed, 0 insertions(+), 0 deletions(-)
 rename packages/vx-responsive/src/components/{ParentSize.jsx => ParentSize.tsx} (100%)
 rename packages/vx-responsive/src/components/{ScaleSVG.jsx => ScaleSVG.tsx} (100%)
 rename packages/vx-responsive/src/enhancers/{withParentSize.js => withParentSize.tsx} (100%)
 rename packages/vx-responsive/src/enhancers/{withScreenSize.js => withScreenSize.tsx} (100%)
 rename packages/vx-responsive/src/{index.js => index.ts} (100%)
 rename packages/vx-responsive/test/{ParentSize.test.jsx => ParentSize.test.tsx} (100%)
 rename packages/vx-responsive/test/{ScaleSVG.test.jsx => ScaleSVG.test.tsx} (100%)
 rename packages/vx-responsive/test/{withParentSize.test.js => withParentSize.test.tsx} (100%)
 rename packages/vx-responsive/test/{withScreenSize.test.js => withScreenSize.test.ts} (100%)

diff --git a/packages/vx-responsive/src/components/ParentSize.jsx b/packages/vx-responsive/src/components/ParentSize.tsx
similarity index 100%
rename from packages/vx-responsive/src/components/ParentSize.jsx
rename to packages/vx-responsive/src/components/ParentSize.tsx
diff --git a/packages/vx-responsive/src/components/ScaleSVG.jsx b/packages/vx-responsive/src/components/ScaleSVG.tsx
similarity index 100%
rename from packages/vx-responsive/src/components/ScaleSVG.jsx
rename to packages/vx-responsive/src/components/ScaleSVG.tsx
diff --git a/packages/vx-responsive/src/enhancers/withParentSize.js b/packages/vx-responsive/src/enhancers/withParentSize.tsx
similarity index 100%
rename from packages/vx-responsive/src/enhancers/withParentSize.js
rename to packages/vx-responsive/src/enhancers/withParentSize.tsx
diff --git a/packages/vx-responsive/src/enhancers/withScreenSize.js b/packages/vx-responsive/src/enhancers/withScreenSize.tsx
similarity index 100%
rename from packages/vx-responsive/src/enhancers/withScreenSize.js
rename to packages/vx-responsive/src/enhancers/withScreenSize.tsx
diff --git a/packages/vx-responsive/src/index.js b/packages/vx-responsive/src/index.ts
similarity index 100%
rename from packages/vx-responsive/src/index.js
rename to packages/vx-responsive/src/index.ts
diff --git a/packages/vx-responsive/test/ParentSize.test.jsx b/packages/vx-responsive/test/ParentSize.test.tsx
similarity index 100%
rename from packages/vx-responsive/test/ParentSize.test.jsx
rename to packages/vx-responsive/test/ParentSize.test.tsx
diff --git a/packages/vx-responsive/test/ScaleSVG.test.jsx b/packages/vx-responsive/test/ScaleSVG.test.tsx
similarity index 100%
rename from packages/vx-responsive/test/ScaleSVG.test.jsx
rename to packages/vx-responsive/test/ScaleSVG.test.tsx
diff --git a/packages/vx-responsive/test/withParentSize.test.js b/packages/vx-responsive/test/withParentSize.test.tsx
similarity index 100%
rename from packages/vx-responsive/test/withParentSize.test.js
rename to packages/vx-responsive/test/withParentSize.test.tsx
diff --git a/packages/vx-responsive/test/withScreenSize.test.js b/packages/vx-responsive/test/withScreenSize.test.ts
similarity index 100%
rename from packages/vx-responsive/test/withScreenSize.test.js
rename to packages/vx-responsive/test/withScreenSize.test.ts

From bfc5de53643e2f7be8dac115a5afc3f1bb6e63b7 Mon Sep 17 00:00:00 2001
From: Sergii Rudenko <sergii.rudenko@airbnb.com>
Date: Mon, 23 Sep 2019 17:11:40 -0700
Subject: [PATCH 03/12] [ts-migrate][vx-responsive] Run TS Migrate

---
 packages/vx-responsive/.eslintrc              |   0
 .../src/components/ParentSize.tsx             |  40 +++--
 .../vx-responsive/src/components/ScaleSVG.tsx |  87 ++++-----
 .../src/enhancers/withParentSize.tsx          | 165 ++++++++++--------
 .../src/enhancers/withScreenSize.tsx          | 124 +++++++------
 packages/vx-responsive/src/index.ts           |   4 +
 .../vx-responsive/test/ParentSize.test.tsx    |   3 +
 packages/vx-responsive/test/ScaleSVG.test.tsx |   7 +
 .../test/withParentSize.test.tsx              |  12 ++
 .../vx-responsive/test/withScreenSize.test.ts |   3 +
 10 files changed, 261 insertions(+), 184 deletions(-)
 delete mode 100644 packages/vx-responsive/.eslintrc

diff --git a/packages/vx-responsive/.eslintrc b/packages/vx-responsive/.eslintrc
deleted file mode 100644
index e69de29bb..000000000
diff --git a/packages/vx-responsive/src/components/ParentSize.tsx b/packages/vx-responsive/src/components/ParentSize.tsx
index 5309edbcc..d7fbfd867 100644
--- a/packages/vx-responsive/src/components/ParentSize.tsx
+++ b/packages/vx-responsive/src/components/ParentSize.tsx
@@ -1,10 +1,33 @@
+// @ts-ignore ts-migrate(2307) FIXME: Cannot find module ':ts-utils/types/WithDefaultPro... Remove this comment to see the full error message
+import { WithDefaultProps } from ':ts-utils/types/WithDefaultProps';
+// @ts-ignore ts-migrate(1259) FIXME: Module '"/Users/sergii_rudenko/Projects/vx/node_mo... Remove this comment to see the full error message
 import debounce from 'lodash/debounce';
-import PropTypes from 'prop-types';
+// @ts-ignore ts-migrate(1259) FIXME: Module '"/Users/sergii_rudenko/Projects/vx/node_mo... Remove this comment to see the full error message
 import React from 'react';
 import ResizeObserver from 'resize-observer-polyfill';
 
-export default class ParentSize extends React.Component {
-  constructor(props) {
+type OwnProps = {
+  className?: string;
+  debounceTime?: number;
+};
+
+type State = any;
+
+type Props = WithDefaultProps<OwnProps, typeof ParentSize.defaultProps>;
+
+export default class ParentSize extends React.Component<Props, State> {
+  static defaultProps = {
+    debounceTime: 300,
+  };
+
+  animationFrameID: any;
+  props: any;
+  ro: any;
+  setState: any;
+  state: any;
+  target: any;
+
+  constructor(props: Props) {
     super(props);
     this.state = {
       width: 0,
@@ -45,6 +68,7 @@ export default class ParentSize extends React.Component {
   render() {
     const { className, children, debounceTime, ...restProps } = this.props;
     return (
+      // @ts-ignore ts-migrate(17004) FIXME: Cannot use JSX unless the '--jsx' flag is provided... Remove this comment to see the full error message
       <div
         style={{ width: '100%', height: '100%' }}
         ref={this.setTarget}
@@ -60,13 +84,3 @@ export default class ParentSize extends React.Component {
     );
   }
 }
-
-ParentSize.defaultProps = {
-  debounceTime: 300,
-};
-
-ParentSize.propTypes = {
-  className: PropTypes.string,
-  children: PropTypes.func.isRequired,
-  debounceTime: PropTypes.number,
-};
diff --git a/packages/vx-responsive/src/components/ScaleSVG.tsx b/packages/vx-responsive/src/components/ScaleSVG.tsx
index 47574be41..504e6652c 100644
--- a/packages/vx-responsive/src/components/ScaleSVG.tsx
+++ b/packages/vx-responsive/src/components/ScaleSVG.tsx
@@ -1,42 +1,45 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-ResponsiveSVG.propTypes = {
-  children: PropTypes.any,
-  width: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  xOrigin: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  yOrigin: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  preserveAspectRatio: PropTypes.string,
-  innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-};
-
-export default function ResponsiveSVG({
-  children,
-  width,
-  height,
-  xOrigin = 0,
-  yOrigin = 0,
-  preserveAspectRatio = 'xMinYMin meet',
-  innerRef,
-}) {
-  return (
-    <div
-      style={{
-        display: 'inline-block',
-        position: 'relative',
-        width: '100%',
-        verticalAlign: 'top',
-        overflow: 'hidden',
-      }}
-    >
-      <svg
-        preserveAspectRatio={preserveAspectRatio}
-        viewBox={`${xOrigin} ${yOrigin} ${width} ${height}`}
-        ref={innerRef}
-      >
-        {children}
-      </svg>
-    </div>
-  );
-}
+// @ts-ignore ts-migrate(1259) FIXME: Module '"/Users/sergii_rudenko/Projects/vx/node_mo... Remove this comment to see the full error message
+import React from 'react';
+
+type Props = {
+  children?: any;
+  width?: number | string;
+  height?: number | string;
+  xOrigin?: number | string;
+  yOrigin?: number | string;
+  preserveAspectRatio?: string;
+  innerRef?: ((...args: any[]) => any) | any;
+};
+
+export default function ResponsiveSVG({
+  children,
+  width,
+  height,
+  xOrigin = 0,
+  yOrigin = 0,
+  preserveAspectRatio = 'xMinYMin meet',
+  innerRef,
+}: Props) {
+  return (
+    // @ts-ignore ts-migrate(17004) FIXME: Cannot use JSX unless the '--jsx' flag is provided... Remove this comment to see the full error message
+    <div
+      style={{
+        display: 'inline-block',
+        position: 'relative',
+        width: '100%',
+        verticalAlign: 'top',
+        overflow: 'hidden',
+      }}
+    >
+      {/*
+// @ts-ignore ts-migrate(17004) FIXME: Cannot use JSX unless the '--jsx' flag is provided... Remove this comment to see the full error message */}
+      <svg
+        preserveAspectRatio={preserveAspectRatio}
+        viewBox={`${xOrigin} ${yOrigin} ${width} ${height}`}
+        ref={innerRef}
+      >
+        {children}
+      </svg>
+    </div>
+  );
+}
diff --git a/packages/vx-responsive/src/enhancers/withParentSize.tsx b/packages/vx-responsive/src/enhancers/withParentSize.tsx
index 6fa82d622..2d6b776f0 100644
--- a/packages/vx-responsive/src/enhancers/withParentSize.tsx
+++ b/packages/vx-responsive/src/enhancers/withParentSize.tsx
@@ -1,73 +1,92 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import debounce from 'lodash/debounce';
-import ResizeObserver from 'resize-observer-polyfill';
-
-export default function withParentSize(BaseComponent) {
-  class WrappedComponent extends React.Component {
-    constructor(props) {
-      super(props);
-
-      this.state = {
-        parentWidth: null,
-        parentHeight: null,
-      };
-
-      this.animationFrameID = null;
-      this.debouncedResize = debounce(this.resize.bind(this), props.debounceTime).bind(this);
-    }
-
-    componentDidMount() {
-      this.ro = new ResizeObserver((entries /** , observer */) => {
-        entries.forEach(entry => {
-          const { width, height } = entry.contentRect;
-          this.animationFrameID = window.requestAnimationFrame(() => {
-            this.debouncedResize({
-              width,
-              height,
-            });
-          });
-        });
-      });
-      this.ro.observe(this.container);
-    }
-
-    componentWillUnmount() {
-      window.cancelAnimationFrame(this.animationFrameID);
-      this.ro.disconnect();
-    }
-
-    resize({ width, height }) {
-      this.setState({
-        parentWidth: width,
-        parentHeight: height,
-      });
-    }
-
-    render() {
-      const { parentWidth, parentHeight } = this.state;
-      return (
-        <div
-          style={{ width: '100%', height: '100%' }}
-          ref={ref => {
-            this.container = ref;
-          }}
-        >
-          {parentWidth !== null && parentHeight !== null && (
-            <BaseComponent parentWidth={parentWidth} parentHeight={parentHeight} {...this.props} />
-          )}
-        </div>
-      );
-    }
-  }
-
-  WrappedComponent.propTypes = {
-    debounceTime: PropTypes.number,
-  };
-
-  WrappedComponent.defaultProps = {
-    debounceTime: 300,
-  };
-
-  return WrappedComponent;
-}
+// @ts-ignore ts-migrate(1259) FIXME: Module '"/Users/sergii_rudenko/Projects/vx/node_mo... Remove this comment to see the full error message
+import React from 'react';
+// @ts-ignore ts-migrate(1192) FIXME: Module '"/Users/sergii_rudenko/Projects/vx/node_mo... Remove this comment to see the full error message
+import PropTypes from 'prop-types';
+// @ts-ignore ts-migrate(1259) FIXME: Module '"/Users/sergii_rudenko/Projects/vx/node_mo... Remove this comment to see the full error message
+import debounce from 'lodash/debounce';
+import ResizeObserver from 'resize-observer-polyfill';
+
+export default function withParentSize(BaseComponent) {
+  class WrappedComponent extends React.Component {
+    constructor(props) {
+      super(props);
+
+      // @ts-ignore ts-migrate(2339) FIXME: Property 'state' does not exist on type 'WrappedCo... Remove this comment to see the full error message
+      this.state = {
+        parentWidth: null,
+        parentHeight: null,
+      };
+
+      // @ts-ignore ts-migrate(2339) FIXME: Property 'animationFrameID' does not exist on type... Remove this comment to see the full error message
+      this.animationFrameID = null;
+      // @ts-ignore ts-migrate(2339) FIXME: Property 'debouncedResize' does not exist on type ... Remove this comment to see the full error message
+      this.debouncedResize = debounce(this.resize.bind(this), props.debounceTime).bind(this);
+    }
+
+    componentDidMount() {
+      // @ts-ignore ts-migrate(2339) FIXME: Property 'ro' does not exist on type 'WrappedCompo... Remove this comment to see the full error message
+      this.ro = new ResizeObserver((entries /** , observer */) => {
+        entries.forEach(entry => {
+          const { width, height } = entry.contentRect;
+          // @ts-ignore ts-migrate(2339) FIXME: Property 'animationFrameID' does not exist on type... Remove this comment to see the full error message
+          this.animationFrameID = window.requestAnimationFrame(() => {
+            // @ts-ignore ts-migrate(2339) FIXME: Property 'debouncedResize' does not exist on type ... Remove this comment to see the full error message
+            this.debouncedResize({
+              width,
+              height,
+            });
+          });
+        });
+      });
+      // @ts-ignore ts-migrate(2339) FIXME: Property 'ro' does not exist on type 'WrappedCompo... Remove this comment to see the full error message
+      this.ro.observe(this.container);
+    }
+
+    componentWillUnmount() {
+      // @ts-ignore ts-migrate(2339) FIXME: Property 'animationFrameID' does not exist on type... Remove this comment to see the full error message
+      window.cancelAnimationFrame(this.animationFrameID);
+      // @ts-ignore ts-migrate(2339) FIXME: Property 'ro' does not exist on type 'WrappedCompo... Remove this comment to see the full error message
+      this.ro.disconnect();
+    }
+
+    resize({ width, height }) {
+      // @ts-ignore ts-migrate(2339) FIXME: Property 'setState' does not exist on type 'Wrappe... Remove this comment to see the full error message
+      this.setState({
+        parentWidth: width,
+        parentHeight: height,
+      });
+    }
+
+    render() {
+      // @ts-ignore ts-migrate(2339) FIXME: Property 'state' does not exist on type 'WrappedCo... Remove this comment to see the full error message
+      const { parentWidth, parentHeight } = this.state;
+      return (
+        // @ts-ignore ts-migrate(17004) FIXME: Cannot use JSX unless the '--jsx' flag is provided... Remove this comment to see the full error message
+        <div
+          style={{ width: '100%', height: '100%' }}
+          ref={ref => {
+            // @ts-ignore ts-migrate(2339) FIXME: Property 'container' does not exist on type 'Wrapp... Remove this comment to see the full error message
+            this.container = ref;
+          }}
+        >
+          {parentWidth !== null && parentHeight !== null && (
+            // @ts-ignore ts-migrate(17004) FIXME: Cannot use JSX unless the '--jsx' flag is provided... Remove this comment to see the full error message
+            <BaseComponent parentWidth={parentWidth} parentHeight={parentHeight} {...this.props} />
+          )}
+        </div>
+      );
+    }
+  }
+
+  // @ts-ignore ts-migrate(2339) FIXME: Property 'propTypes' does not exist on type 'typeo... Remove this comment to see the full error message
+  WrappedComponent.propTypes = {
+    debounceTime: PropTypes.number,
+  };
+
+  // @ts-ignore ts-migrate(2339) FIXME: Property 'defaultProps' does not exist on type 'ty... Remove this comment to see the full error message
+  WrappedComponent.defaultProps = {
+    debounceTime: 300,
+  };
+
+  return WrappedComponent;
+}
diff --git a/packages/vx-responsive/src/enhancers/withScreenSize.tsx b/packages/vx-responsive/src/enhancers/withScreenSize.tsx
index d2b6c8f4d..f79e52700 100644
--- a/packages/vx-responsive/src/enhancers/withScreenSize.tsx
+++ b/packages/vx-responsive/src/enhancers/withScreenSize.tsx
@@ -1,56 +1,68 @@
-import debounce from 'lodash/debounce';
-import React from 'react';
-import PropTypes from 'prop-types';
-
-export default function withScreenSize(BaseComponent) {
-  class WrappedComponent extends React.Component {
-    constructor(props) {
-      super(props);
-
-      this.state = {
-        screenWidth: null,
-        screenHeight: null,
-      };
-
-      this.handleResize = debounce(this.resize.bind(this), props.windowResizeDebounceTime).bind(
-        this,
-      );
-    }
-
-    componentDidMount() {
-      window.addEventListener('resize', this.handleResize, false);
-      this.resize();
-    }
-
-    componentWillUnmount() {
-      window.removeEventListener('resize', this.handleResize, false);
-    }
-
-    resize(/** event */) {
-      this.setState((/** prevState, props */) => {
-        return {
-          screenWidth: window.innerWidth,
-          screenHeight: window.innerHeight,
-        };
-      });
-    }
-
-    render() {
-      const { screenWidth, screenHeight } = this.state;
-      if (!screenWidth && !screenHeight) return null;
-      return (
-        <BaseComponent screenWidth={screenWidth} screenHeight={screenHeight} {...this.props} />
-      );
-    }
-  }
-
-  WrappedComponent.propTypes = {
-    windowResizeDebounceTime: PropTypes.number,
-  };
-
-  WrappedComponent.defaultProps = {
-    windowResizeDebounceTime: 300,
-  };
-
-  return WrappedComponent;
-}
+// @ts-ignore ts-migrate(1259) FIXME: Module '"/Users/sergii_rudenko/Projects/vx/node_mo... Remove this comment to see the full error message
+import debounce from 'lodash/debounce';
+// @ts-ignore ts-migrate(1259) FIXME: Module '"/Users/sergii_rudenko/Projects/vx/node_mo... Remove this comment to see the full error message
+import React from 'react';
+// @ts-ignore ts-migrate(1192) FIXME: Module '"/Users/sergii_rudenko/Projects/vx/node_mo... Remove this comment to see the full error message
+import PropTypes from 'prop-types';
+
+export default function withScreenSize(BaseComponent) {
+  class WrappedComponent extends React.Component {
+    constructor(props) {
+      super(props);
+
+      // @ts-ignore ts-migrate(2339) FIXME: Property 'state' does not exist on type 'WrappedCo... Remove this comment to see the full error message
+      this.state = {
+        screenWidth: null,
+        screenHeight: null,
+      };
+
+      // @ts-ignore ts-migrate(2339) FIXME: Property 'handleResize' does not exist on type 'Wr... Remove this comment to see the full error message
+      this.handleResize = debounce(this.resize.bind(this), props.windowResizeDebounceTime).bind(
+        this,
+      );
+    }
+
+    componentDidMount() {
+      // @ts-ignore ts-migrate(2339) FIXME: Property 'handleResize' does not exist on type 'Wr... Remove this comment to see the full error message
+      window.addEventListener('resize', this.handleResize, false);
+      this.resize();
+    }
+
+    componentWillUnmount() {
+      // @ts-ignore ts-migrate(2339) FIXME: Property 'handleResize' does not exist on type 'Wr... Remove this comment to see the full error message
+      window.removeEventListener('resize', this.handleResize, false);
+    }
+
+    resize(/** event */) {
+      // @ts-ignore ts-migrate(2339) FIXME: Property 'setState' does not exist on type 'Wrappe... Remove this comment to see the full error message
+      this.setState((/** prevState, props */) => {
+        return {
+          screenWidth: window.innerWidth,
+          screenHeight: window.innerHeight,
+        };
+      });
+    }
+
+    render() {
+      // @ts-ignore ts-migrate(2339) FIXME: Property 'state' does not exist on type 'WrappedCo... Remove this comment to see the full error message
+      const { screenWidth, screenHeight } = this.state;
+      if (!screenWidth && !screenHeight) return null;
+      return (
+        // @ts-ignore ts-migrate(17004) FIXME: Cannot use JSX unless the '--jsx' flag is provided... Remove this comment to see the full error message
+        <BaseComponent screenWidth={screenWidth} screenHeight={screenHeight} {...this.props} />
+      );
+    }
+  }
+
+  // @ts-ignore ts-migrate(2339) FIXME: Property 'propTypes' does not exist on type 'typeo... Remove this comment to see the full error message
+  WrappedComponent.propTypes = {
+    windowResizeDebounceTime: PropTypes.number,
+  };
+
+  // @ts-ignore ts-migrate(2339) FIXME: Property 'defaultProps' does not exist on type 'ty... Remove this comment to see the full error message
+  WrappedComponent.defaultProps = {
+    windowResizeDebounceTime: 300,
+  };
+
+  return WrappedComponent;
+}
diff --git a/packages/vx-responsive/src/index.ts b/packages/vx-responsive/src/index.ts
index 53cedbcee..b42926e53 100644
--- a/packages/vx-responsive/src/index.ts
+++ b/packages/vx-responsive/src/index.ts
@@ -1,4 +1,8 @@
+// @ts-ignore ts-migrate(6142) FIXME: Module './components/ScaleSVG' was resolved to '/U... Remove this comment to see the full error message
 export { default as ScaleSVG } from './components/ScaleSVG';
+// @ts-ignore ts-migrate(6142) FIXME: Module './components/ParentSize' was resolved to '... Remove this comment to see the full error message
 export { default as ParentSize } from './components/ParentSize';
+// @ts-ignore ts-migrate(6142) FIXME: Module './enhancers/withParentSize' was resolved t... Remove this comment to see the full error message
 export { default as withParentSize } from './enhancers/withParentSize';
+// @ts-ignore ts-migrate(6142) FIXME: Module './enhancers/withScreenSize' was resolved t... Remove this comment to see the full error message
 export { default as withScreenSize } from './enhancers/withScreenSize';
diff --git a/packages/vx-responsive/test/ParentSize.test.tsx b/packages/vx-responsive/test/ParentSize.test.tsx
index 8f06130b5..2cd7a3b2f 100644
--- a/packages/vx-responsive/test/ParentSize.test.tsx
+++ b/packages/vx-responsive/test/ParentSize.test.tsx
@@ -1,7 +1,10 @@
 import { ParentSize } from '../src';
 
+// @ts-ignore ts-migrate(2582) FIXME: Cannot find name 'describe'. Do you need to instal... Remove this comment to see the full error message
 describe('<ParentSize />', () => {
+  // @ts-ignore ts-migrate(2582) FIXME: Cannot find name 'test'. Do you need to install ty... Remove this comment to see the full error message
   test('it should be defined', () => {
+    // @ts-ignore ts-migrate(2304) FIXME: Cannot find name 'expect'.
     expect(ParentSize).toBeDefined();
   });
 });
diff --git a/packages/vx-responsive/test/ScaleSVG.test.tsx b/packages/vx-responsive/test/ScaleSVG.test.tsx
index 35900847f..72730b1b0 100644
--- a/packages/vx-responsive/test/ScaleSVG.test.tsx
+++ b/packages/vx-responsive/test/ScaleSVG.test.tsx
@@ -1,20 +1,27 @@
+// @ts-ignore ts-migrate(1259) FIXME: Module '"/Users/sergii_rudenko/Projects/vx/node_mo... Remove this comment to see the full error message
 import React from 'react';
 import { mount } from 'enzyme';
 
 import { ScaleSVG } from '../src';
 
+// @ts-ignore ts-migrate(2582) FIXME: Cannot find name 'describe'. Do you need to instal... Remove this comment to see the full error message
 describe('<ScaleSVG />', () => {
+  // @ts-ignore ts-migrate(2582) FIXME: Cannot find name 'test'. Do you need to install ty... Remove this comment to see the full error message
   test('it should be defined', () => {
+    // @ts-ignore ts-migrate(2304) FIXME: Cannot find name 'expect'.
     expect(ScaleSVG).toBeDefined();
   });
 
+  // @ts-ignore ts-migrate(2582) FIXME: Cannot find name 'test'. Do you need to install ty... Remove this comment to see the full error message
   test('it should expose its ref via an innerRef prop', () => {
     return new Promise(done => {
       const refCallback = n => {
+        // @ts-ignore ts-migrate(2304) FIXME: Cannot find name 'expect'.
         expect(n.tagName).toEqual('svg');
         done();
       };
 
+      // @ts-ignore ts-migrate(17004) FIXME: Cannot use JSX unless the '--jsx' flag is provided... Remove this comment to see the full error message
       mount(<ScaleSVG innerRef={refCallback} />);
     });
   });
diff --git a/packages/vx-responsive/test/withParentSize.test.tsx b/packages/vx-responsive/test/withParentSize.test.tsx
index a8e3f5e7e..fd55bc049 100644
--- a/packages/vx-responsive/test/withParentSize.test.tsx
+++ b/packages/vx-responsive/test/withParentSize.test.tsx
@@ -1,11 +1,15 @@
+// @ts-ignore ts-migrate(1259) FIXME: Module '"/Users/sergii_rudenko/Projects/vx/node_mo... Remove this comment to see the full error message
 import React from 'react';
 import { mount } from 'enzyme';
 
 import { withParentSize } from '../src';
 
+// @ts-ignore ts-migrate(2582) FIXME: Cannot find name 'describe'. Do you need to instal... Remove this comment to see the full error message
 describe('withParentSize', () => {
+  // @ts-ignore ts-migrate(2304) FIXME: Cannot find name 'beforeAll'.
   beforeAll(() => {
     // mock getBoundingClientRect
+    // @ts-ignore ts-migrate(2304) FIXME: Cannot find name 'jest'.
     Element.prototype.getBoundingClientRect = jest.fn(() => ({
       width: 220,
       height: 120,
@@ -16,20 +20,28 @@ describe('withParentSize', () => {
     }));
   });
 
+  // @ts-ignore ts-migrate(2582) FIXME: Cannot find name 'test'. Do you need to install ty... Remove this comment to see the full error message
   test('it should be defined', () => {
+    // @ts-ignore ts-migrate(2304) FIXME: Cannot find name 'expect'.
     expect(withParentSize).toBeDefined();
   });
 
+  // @ts-ignore ts-migrate(2582) FIXME: Cannot find name 'test'. Do you need to install ty... Remove this comment to see the full error message
   test('it chould pass parentWidth and parentHeight props to its child', () => {
+    // @ts-ignore ts-migrate(17004) FIXME: Cannot use JSX unless the '--jsx' flag is provided... Remove this comment to see the full error message
     const Component = () => <div />;
     const HOC = withParentSize(Component);
+    // @ts-ignore ts-migrate(17004) FIXME: Cannot use JSX unless the '--jsx' flag is provided... Remove this comment to see the full error message
     const wrapper = mount(<HOC />);
 
     // wait for the resizeObserver to run
     setTimeout(() => {
       const RenderedComponent = wrapper.find(Component);
+      // @ts-ignore ts-migrate(2304) FIXME: Cannot find name 'expect'.
       expect(Element.prototype.getBoundingClientRect).toHaveBeenCalled();
+      // @ts-ignore ts-migrate(2304) FIXME: Cannot find name 'expect'.
       expect(RenderedComponent.prop('parentWidth')).toBe(220);
+      // @ts-ignore ts-migrate(2304) FIXME: Cannot find name 'expect'.
       expect(RenderedComponent.prop('parentHeight')).toBe(120);
     }, 0);
   });
diff --git a/packages/vx-responsive/test/withScreenSize.test.ts b/packages/vx-responsive/test/withScreenSize.test.ts
index 764d613dc..dbd5485c7 100644
--- a/packages/vx-responsive/test/withScreenSize.test.ts
+++ b/packages/vx-responsive/test/withScreenSize.test.ts
@@ -1,7 +1,10 @@
 import { withScreenSize } from '../src';
 
+// @ts-ignore ts-migrate(2582) FIXME: Cannot find name 'describe'. Do you need to instal... Remove this comment to see the full error message
 describe('withScreenSize', () => {
+  // @ts-ignore ts-migrate(2582) FIXME: Cannot find name 'test'. Do you need to install ty... Remove this comment to see the full error message
   test('it should be defined', () => {
+    // @ts-ignore ts-migrate(2304) FIXME: Cannot find name 'expect'.
     expect(withScreenSize).toBeDefined();
   });
 });

From 0928bd355603ff5ee365e0759e584ee2b6ec4841 Mon Sep 17 00:00:00 2001
From: Sergii Rudenko <sergii.rudenko@airbnb.com>
Date: Tue, 24 Sep 2019 12:01:30 -0700
Subject: [PATCH 04/12] Fixes after ts-migrate

---
 packages/vx-responsive/package.json           |  2 +
 .../src/components/ParentSize.tsx             | 40 ++++++------
 .../vx-responsive/src/components/ScaleSVG.tsx |  6 +-
 .../src/enhancers/withParentSize.tsx          | 64 ++++++++-----------
 .../src/enhancers/withScreenSize.tsx          | 45 ++++++-------
 packages/vx-responsive/src/index.ts           |  4 --
 .../vx-responsive/test/ParentSize.test.tsx    |  3 -
 packages/vx-responsive/test/ScaleSVG.test.tsx |  6 --
 .../test/withParentSize.test.tsx              | 11 ----
 .../vx-responsive/test/withScreenSize.test.ts |  3 -
 10 files changed, 68 insertions(+), 116 deletions(-)

diff --git a/packages/vx-responsive/package.json b/packages/vx-responsive/package.json
index 53f247b5d..72c4b9206 100644
--- a/packages/vx-responsive/package.json
+++ b/packages/vx-responsive/package.json
@@ -5,6 +5,7 @@
   "sideEffects": false,
   "main": "lib/index.js",
   "module": "esm/index.js",
+  "types": "lib/index.d.ts",
   "files": [
     "lib",
     "esm"
@@ -30,6 +31,7 @@
   },
   "homepage": "https://github.com/hshoff/vx#readme",
   "dependencies": {
+    "@types/react": "*",
     "lodash": "^4.17.10",
     "prop-types": "^15.6.1",
     "resize-observer-polyfill": "1.5.0"
diff --git a/packages/vx-responsive/src/components/ParentSize.tsx b/packages/vx-responsive/src/components/ParentSize.tsx
index d7fbfd867..e777f9d1c 100644
--- a/packages/vx-responsive/src/components/ParentSize.tsx
+++ b/packages/vx-responsive/src/components/ParentSize.tsx
@@ -1,31 +1,32 @@
-// @ts-ignore ts-migrate(2307) FIXME: Cannot find module ':ts-utils/types/WithDefaultPro... Remove this comment to see the full error message
-import { WithDefaultProps } from ':ts-utils/types/WithDefaultProps';
-// @ts-ignore ts-migrate(1259) FIXME: Module '"/Users/sergii_rudenko/Projects/vx/node_mo... Remove this comment to see the full error message
 import debounce from 'lodash/debounce';
-// @ts-ignore ts-migrate(1259) FIXME: Module '"/Users/sergii_rudenko/Projects/vx/node_mo... Remove this comment to see the full error message
 import React from 'react';
 import ResizeObserver from 'resize-observer-polyfill';
 
-type OwnProps = {
+type Props = {
   className?: string;
   debounceTime?: number;
+  innerRef?: React.Ref<HTMLDivElement>;
+  children: (args: {
+    ref: HTMLDivElement | null;
+    resize: (state: State) => void;
+  }) => React.ReactNode;
 };
 
-type State = any;
-
-type Props = WithDefaultProps<OwnProps, typeof ParentSize.defaultProps>;
+type State = {
+  width: number;
+  height: number;
+  top: number;
+  left: number;
+};
 
 export default class ParentSize extends React.Component<Props, State> {
   static defaultProps = {
     debounceTime: 300,
   };
 
-  animationFrameID: any;
-  props: any;
-  ro: any;
-  setState: any;
-  state: any;
-  target: any;
+  animationFrameID: number | null;
+  ro: ResizeObserver | undefined;
+  target: HTMLDivElement | null = null;
 
   constructor(props: Props) {
     super(props);
@@ -49,26 +50,25 @@ export default class ParentSize extends React.Component<Props, State> {
         });
       });
     });
-    this.ro.observe(this.target);
+    this.ro.observe(this.target as Element);
   }
 
   componentWillUnmount() {
-    window.cancelAnimationFrame(this.animationFrameID);
-    this.ro.disconnect();
+    this.animationFrameID && window.cancelAnimationFrame(this.animationFrameID);
+    this.ro && this.ro.disconnect();
   }
 
-  resize({ width, height, top, left }) {
+  resize({ width, height, top, left }: State) {
     this.setState(() => ({ width, height, top, left }));
   }
 
-  setTarget(ref) {
+  setTarget(ref: HTMLDivElement | null) {
     this.target = ref;
   }
 
   render() {
     const { className, children, debounceTime, ...restProps } = this.props;
     return (
-      // @ts-ignore ts-migrate(17004) FIXME: Cannot use JSX unless the '--jsx' flag is provided... Remove this comment to see the full error message
       <div
         style={{ width: '100%', height: '100%' }}
         ref={this.setTarget}
diff --git a/packages/vx-responsive/src/components/ScaleSVG.tsx b/packages/vx-responsive/src/components/ScaleSVG.tsx
index 504e6652c..3af49644d 100644
--- a/packages/vx-responsive/src/components/ScaleSVG.tsx
+++ b/packages/vx-responsive/src/components/ScaleSVG.tsx
@@ -1,4 +1,3 @@
-// @ts-ignore ts-migrate(1259) FIXME: Module '"/Users/sergii_rudenko/Projects/vx/node_mo... Remove this comment to see the full error message
 import React from 'react';
 
 type Props = {
@@ -8,7 +7,7 @@ type Props = {
   xOrigin?: number | string;
   yOrigin?: number | string;
   preserveAspectRatio?: string;
-  innerRef?: ((...args: any[]) => any) | any;
+  innerRef?: React.Ref<SVGSVGElement>;
 };
 
 export default function ResponsiveSVG({
@@ -21,7 +20,6 @@ export default function ResponsiveSVG({
   innerRef,
 }: Props) {
   return (
-    // @ts-ignore ts-migrate(17004) FIXME: Cannot use JSX unless the '--jsx' flag is provided... Remove this comment to see the full error message
     <div
       style={{
         display: 'inline-block',
@@ -31,8 +29,6 @@ export default function ResponsiveSVG({
         overflow: 'hidden',
       }}
     >
-      {/*
-// @ts-ignore ts-migrate(17004) FIXME: Cannot use JSX unless the '--jsx' flag is provided... Remove this comment to see the full error message */}
       <svg
         preserveAspectRatio={preserveAspectRatio}
         viewBox={`${xOrigin} ${yOrigin} ${width} ${height}`}
diff --git a/packages/vx-responsive/src/enhancers/withParentSize.tsx b/packages/vx-responsive/src/enhancers/withParentSize.tsx
index 2d6b776f0..a80767023 100644
--- a/packages/vx-responsive/src/enhancers/withParentSize.tsx
+++ b/packages/vx-responsive/src/enhancers/withParentSize.tsx
@@ -1,36 +1,44 @@
-// @ts-ignore ts-migrate(1259) FIXME: Module '"/Users/sergii_rudenko/Projects/vx/node_mo... Remove this comment to see the full error message
 import React from 'react';
-// @ts-ignore ts-migrate(1192) FIXME: Module '"/Users/sergii_rudenko/Projects/vx/node_mo... Remove this comment to see the full error message
-import PropTypes from 'prop-types';
-// @ts-ignore ts-migrate(1259) FIXME: Module '"/Users/sergii_rudenko/Projects/vx/node_mo... Remove this comment to see the full error message
 import debounce from 'lodash/debounce';
 import ResizeObserver from 'resize-observer-polyfill';
 
-export default function withParentSize(BaseComponent) {
-  class WrappedComponent extends React.Component {
-    constructor(props) {
-      super(props);
+type WithParentSizeProps = {
+  debounceTime?: number;
+};
+
+type WithParentSizeState = {
+  parentWidth: number | null;
+  parentHeight: number | null;
+};
 
-      // @ts-ignore ts-migrate(2339) FIXME: Property 'state' does not exist on type 'WrappedCo... Remove this comment to see the full error message
+export default function withParentSize<Props extends WithParentSizeProps = {}>(
+  BaseComponent: React.ComponentType<Props>,
+) {
+  return class WrappedComponent extends React.Component<Props, WithParentSizeState> {
+    static defaultProps = {
+      debounceTime: 300,
+    };
+    animationFrameID: number | null;
+    ro: ResizeObserver | undefined;
+    container: HTMLDivElement | null = null;
+    debouncedResize: ({ width, height }: { width: number; height: number }) => void;
+
+    constructor(props: Props) {
+      super(props);
       this.state = {
         parentWidth: null,
         parentHeight: null,
       };
 
-      // @ts-ignore ts-migrate(2339) FIXME: Property 'animationFrameID' does not exist on type... Remove this comment to see the full error message
       this.animationFrameID = null;
-      // @ts-ignore ts-migrate(2339) FIXME: Property 'debouncedResize' does not exist on type ... Remove this comment to see the full error message
       this.debouncedResize = debounce(this.resize.bind(this), props.debounceTime).bind(this);
     }
 
     componentDidMount() {
-      // @ts-ignore ts-migrate(2339) FIXME: Property 'ro' does not exist on type 'WrappedCompo... Remove this comment to see the full error message
       this.ro = new ResizeObserver((entries /** , observer */) => {
         entries.forEach(entry => {
           const { width, height } = entry.contentRect;
-          // @ts-ignore ts-migrate(2339) FIXME: Property 'animationFrameID' does not exist on type... Remove this comment to see the full error message
           this.animationFrameID = window.requestAnimationFrame(() => {
-            // @ts-ignore ts-migrate(2339) FIXME: Property 'debouncedResize' does not exist on type ... Remove this comment to see the full error message
             this.debouncedResize({
               width,
               height,
@@ -38,19 +46,15 @@ export default function withParentSize(BaseComponent) {
           });
         });
       });
-      // @ts-ignore ts-migrate(2339) FIXME: Property 'ro' does not exist on type 'WrappedCompo... Remove this comment to see the full error message
-      this.ro.observe(this.container);
+      this.container && this.ro.observe(this.container);
     }
 
     componentWillUnmount() {
-      // @ts-ignore ts-migrate(2339) FIXME: Property 'animationFrameID' does not exist on type... Remove this comment to see the full error message
-      window.cancelAnimationFrame(this.animationFrameID);
-      // @ts-ignore ts-migrate(2339) FIXME: Property 'ro' does not exist on type 'WrappedCompo... Remove this comment to see the full error message
-      this.ro.disconnect();
+      this.animationFrameID && window.cancelAnimationFrame(this.animationFrameID);
+      this.ro && this.ro.disconnect();
     }
 
-    resize({ width, height }) {
-      // @ts-ignore ts-migrate(2339) FIXME: Property 'setState' does not exist on type 'Wrappe... Remove this comment to see the full error message
+    resize({ width, height }: { width: number; height: number }) {
       this.setState({
         parentWidth: width,
         parentHeight: height,
@@ -58,35 +62,19 @@ export default function withParentSize(BaseComponent) {
     }
 
     render() {
-      // @ts-ignore ts-migrate(2339) FIXME: Property 'state' does not exist on type 'WrappedCo... Remove this comment to see the full error message
       const { parentWidth, parentHeight } = this.state;
       return (
-        // @ts-ignore ts-migrate(17004) FIXME: Cannot use JSX unless the '--jsx' flag is provided... Remove this comment to see the full error message
         <div
           style={{ width: '100%', height: '100%' }}
           ref={ref => {
-            // @ts-ignore ts-migrate(2339) FIXME: Property 'container' does not exist on type 'Wrapp... Remove this comment to see the full error message
             this.container = ref;
           }}
         >
           {parentWidth !== null && parentHeight !== null && (
-            // @ts-ignore ts-migrate(17004) FIXME: Cannot use JSX unless the '--jsx' flag is provided... Remove this comment to see the full error message
             <BaseComponent parentWidth={parentWidth} parentHeight={parentHeight} {...this.props} />
           )}
         </div>
       );
     }
-  }
-
-  // @ts-ignore ts-migrate(2339) FIXME: Property 'propTypes' does not exist on type 'typeo... Remove this comment to see the full error message
-  WrappedComponent.propTypes = {
-    debounceTime: PropTypes.number,
-  };
-
-  // @ts-ignore ts-migrate(2339) FIXME: Property 'defaultProps' does not exist on type 'ty... Remove this comment to see the full error message
-  WrappedComponent.defaultProps = {
-    debounceTime: 300,
   };
-
-  return WrappedComponent;
 }
diff --git a/packages/vx-responsive/src/enhancers/withScreenSize.tsx b/packages/vx-responsive/src/enhancers/withScreenSize.tsx
index f79e52700..a8e62a9ee 100644
--- a/packages/vx-responsive/src/enhancers/withScreenSize.tsx
+++ b/packages/vx-responsive/src/enhancers/withScreenSize.tsx
@@ -1,40 +1,47 @@
-// @ts-ignore ts-migrate(1259) FIXME: Module '"/Users/sergii_rudenko/Projects/vx/node_mo... Remove this comment to see the full error message
 import debounce from 'lodash/debounce';
-// @ts-ignore ts-migrate(1259) FIXME: Module '"/Users/sergii_rudenko/Projects/vx/node_mo... Remove this comment to see the full error message
 import React from 'react';
-// @ts-ignore ts-migrate(1192) FIXME: Module '"/Users/sergii_rudenko/Projects/vx/node_mo... Remove this comment to see the full error message
-import PropTypes from 'prop-types';
 
-export default function withScreenSize(BaseComponent) {
-  class WrappedComponent extends React.Component {
-    constructor(props) {
+type WithScreenSizeProps = {
+  windowResizeDebounceTime?: number;
+};
+
+type WithScreenSizeState = {
+  screenWidth: number | null;
+  screenHeight: number | null;
+};
+
+export default function withScreenSize<Props extends WithScreenSizeProps = {}>(
+  BaseComponent: React.ComponentType<Props>,
+) {
+  return class WrappedComponent extends React.Component<Props, WithScreenSizeState> {
+    static defaultProps = {
+      windowResizeDebounceTime: 300,
+    };
+    handleResize: () => void;
+
+    constructor(props: Props) {
       super(props);
 
-      // @ts-ignore ts-migrate(2339) FIXME: Property 'state' does not exist on type 'WrappedCo... Remove this comment to see the full error message
       this.state = {
         screenWidth: null,
         screenHeight: null,
       };
 
-      // @ts-ignore ts-migrate(2339) FIXME: Property 'handleResize' does not exist on type 'Wr... Remove this comment to see the full error message
       this.handleResize = debounce(this.resize.bind(this), props.windowResizeDebounceTime).bind(
         this,
       );
     }
 
     componentDidMount() {
-      // @ts-ignore ts-migrate(2339) FIXME: Property 'handleResize' does not exist on type 'Wr... Remove this comment to see the full error message
       window.addEventListener('resize', this.handleResize, false);
       this.resize();
     }
 
     componentWillUnmount() {
-      // @ts-ignore ts-migrate(2339) FIXME: Property 'handleResize' does not exist on type 'Wr... Remove this comment to see the full error message
       window.removeEventListener('resize', this.handleResize, false);
     }
 
     resize(/** event */) {
-      // @ts-ignore ts-migrate(2339) FIXME: Property 'setState' does not exist on type 'Wrappe... Remove this comment to see the full error message
       this.setState((/** prevState, props */) => {
         return {
           screenWidth: window.innerWidth,
@@ -44,25 +51,11 @@ export default function withScreenSize(BaseComponent) {
     }
 
     render() {
-      // @ts-ignore ts-migrate(2339) FIXME: Property 'state' does not exist on type 'WrappedCo... Remove this comment to see the full error message
       const { screenWidth, screenHeight } = this.state;
       if (!screenWidth && !screenHeight) return null;
       return (
-        // @ts-ignore ts-migrate(17004) FIXME: Cannot use JSX unless the '--jsx' flag is provided... Remove this comment to see the full error message
         <BaseComponent screenWidth={screenWidth} screenHeight={screenHeight} {...this.props} />
       );
     }
-  }
-
-  // @ts-ignore ts-migrate(2339) FIXME: Property 'propTypes' does not exist on type 'typeo... Remove this comment to see the full error message
-  WrappedComponent.propTypes = {
-    windowResizeDebounceTime: PropTypes.number,
-  };
-
-  // @ts-ignore ts-migrate(2339) FIXME: Property 'defaultProps' does not exist on type 'ty... Remove this comment to see the full error message
-  WrappedComponent.defaultProps = {
-    windowResizeDebounceTime: 300,
   };
-
-  return WrappedComponent;
 }
diff --git a/packages/vx-responsive/src/index.ts b/packages/vx-responsive/src/index.ts
index b42926e53..53cedbcee 100644
--- a/packages/vx-responsive/src/index.ts
+++ b/packages/vx-responsive/src/index.ts
@@ -1,8 +1,4 @@
-// @ts-ignore ts-migrate(6142) FIXME: Module './components/ScaleSVG' was resolved to '/U... Remove this comment to see the full error message
 export { default as ScaleSVG } from './components/ScaleSVG';
-// @ts-ignore ts-migrate(6142) FIXME: Module './components/ParentSize' was resolved to '... Remove this comment to see the full error message
 export { default as ParentSize } from './components/ParentSize';
-// @ts-ignore ts-migrate(6142) FIXME: Module './enhancers/withParentSize' was resolved t... Remove this comment to see the full error message
 export { default as withParentSize } from './enhancers/withParentSize';
-// @ts-ignore ts-migrate(6142) FIXME: Module './enhancers/withScreenSize' was resolved t... Remove this comment to see the full error message
 export { default as withScreenSize } from './enhancers/withScreenSize';
diff --git a/packages/vx-responsive/test/ParentSize.test.tsx b/packages/vx-responsive/test/ParentSize.test.tsx
index 2cd7a3b2f..8f06130b5 100644
--- a/packages/vx-responsive/test/ParentSize.test.tsx
+++ b/packages/vx-responsive/test/ParentSize.test.tsx
@@ -1,10 +1,7 @@
 import { ParentSize } from '../src';
 
-// @ts-ignore ts-migrate(2582) FIXME: Cannot find name 'describe'. Do you need to instal... Remove this comment to see the full error message
 describe('<ParentSize />', () => {
-  // @ts-ignore ts-migrate(2582) FIXME: Cannot find name 'test'. Do you need to install ty... Remove this comment to see the full error message
   test('it should be defined', () => {
-    // @ts-ignore ts-migrate(2304) FIXME: Cannot find name 'expect'.
     expect(ParentSize).toBeDefined();
   });
 });
diff --git a/packages/vx-responsive/test/ScaleSVG.test.tsx b/packages/vx-responsive/test/ScaleSVG.test.tsx
index 72730b1b0..580482658 100644
--- a/packages/vx-responsive/test/ScaleSVG.test.tsx
+++ b/packages/vx-responsive/test/ScaleSVG.test.tsx
@@ -4,24 +4,18 @@ import { mount } from 'enzyme';
 
 import { ScaleSVG } from '../src';
 
-// @ts-ignore ts-migrate(2582) FIXME: Cannot find name 'describe'. Do you need to instal... Remove this comment to see the full error message
 describe('<ScaleSVG />', () => {
-  // @ts-ignore ts-migrate(2582) FIXME: Cannot find name 'test'. Do you need to install ty... Remove this comment to see the full error message
   test('it should be defined', () => {
-    // @ts-ignore ts-migrate(2304) FIXME: Cannot find name 'expect'.
     expect(ScaleSVG).toBeDefined();
   });
 
-  // @ts-ignore ts-migrate(2582) FIXME: Cannot find name 'test'. Do you need to install ty... Remove this comment to see the full error message
   test('it should expose its ref via an innerRef prop', () => {
     return new Promise(done => {
       const refCallback = n => {
-        // @ts-ignore ts-migrate(2304) FIXME: Cannot find name 'expect'.
         expect(n.tagName).toEqual('svg');
         done();
       };
 
-      // @ts-ignore ts-migrate(17004) FIXME: Cannot use JSX unless the '--jsx' flag is provided... Remove this comment to see the full error message
       mount(<ScaleSVG innerRef={refCallback} />);
     });
   });
diff --git a/packages/vx-responsive/test/withParentSize.test.tsx b/packages/vx-responsive/test/withParentSize.test.tsx
index fd55bc049..8127b99d6 100644
--- a/packages/vx-responsive/test/withParentSize.test.tsx
+++ b/packages/vx-responsive/test/withParentSize.test.tsx
@@ -4,12 +4,9 @@ import { mount } from 'enzyme';
 
 import { withParentSize } from '../src';
 
-// @ts-ignore ts-migrate(2582) FIXME: Cannot find name 'describe'. Do you need to instal... Remove this comment to see the full error message
 describe('withParentSize', () => {
-  // @ts-ignore ts-migrate(2304) FIXME: Cannot find name 'beforeAll'.
   beforeAll(() => {
     // mock getBoundingClientRect
-    // @ts-ignore ts-migrate(2304) FIXME: Cannot find name 'jest'.
     Element.prototype.getBoundingClientRect = jest.fn(() => ({
       width: 220,
       height: 120,
@@ -20,28 +17,20 @@ describe('withParentSize', () => {
     }));
   });
 
-  // @ts-ignore ts-migrate(2582) FIXME: Cannot find name 'test'. Do you need to install ty... Remove this comment to see the full error message
   test('it should be defined', () => {
-    // @ts-ignore ts-migrate(2304) FIXME: Cannot find name 'expect'.
     expect(withParentSize).toBeDefined();
   });
 
-  // @ts-ignore ts-migrate(2582) FIXME: Cannot find name 'test'. Do you need to install ty... Remove this comment to see the full error message
   test('it chould pass parentWidth and parentHeight props to its child', () => {
-    // @ts-ignore ts-migrate(17004) FIXME: Cannot use JSX unless the '--jsx' flag is provided... Remove this comment to see the full error message
     const Component = () => <div />;
     const HOC = withParentSize(Component);
-    // @ts-ignore ts-migrate(17004) FIXME: Cannot use JSX unless the '--jsx' flag is provided... Remove this comment to see the full error message
     const wrapper = mount(<HOC />);
 
     // wait for the resizeObserver to run
     setTimeout(() => {
       const RenderedComponent = wrapper.find(Component);
-      // @ts-ignore ts-migrate(2304) FIXME: Cannot find name 'expect'.
       expect(Element.prototype.getBoundingClientRect).toHaveBeenCalled();
-      // @ts-ignore ts-migrate(2304) FIXME: Cannot find name 'expect'.
       expect(RenderedComponent.prop('parentWidth')).toBe(220);
-      // @ts-ignore ts-migrate(2304) FIXME: Cannot find name 'expect'.
       expect(RenderedComponent.prop('parentHeight')).toBe(120);
     }, 0);
   });
diff --git a/packages/vx-responsive/test/withScreenSize.test.ts b/packages/vx-responsive/test/withScreenSize.test.ts
index dbd5485c7..764d613dc 100644
--- a/packages/vx-responsive/test/withScreenSize.test.ts
+++ b/packages/vx-responsive/test/withScreenSize.test.ts
@@ -1,10 +1,7 @@
 import { withScreenSize } from '../src';
 
-// @ts-ignore ts-migrate(2582) FIXME: Cannot find name 'describe'. Do you need to instal... Remove this comment to see the full error message
 describe('withScreenSize', () => {
-  // @ts-ignore ts-migrate(2582) FIXME: Cannot find name 'test'. Do you need to install ty... Remove this comment to see the full error message
   test('it should be defined', () => {
-    // @ts-ignore ts-migrate(2304) FIXME: Cannot find name 'expect'.
     expect(withScreenSize).toBeDefined();
   });
 });

From baff07b3a845691e8576eab99a6824fa1227d157 Mon Sep 17 00:00:00 2001
From: Sergii Rudenko <sergii.rudenko@airbnb.com>
Date: Tue, 24 Sep 2019 12:05:09 -0700
Subject: [PATCH 05/12] Cleanup

---
 packages/vx-responsive/test/ScaleSVG.test.tsx       | 1 -
 packages/vx-responsive/test/withParentSize.test.tsx | 1 -
 2 files changed, 2 deletions(-)

diff --git a/packages/vx-responsive/test/ScaleSVG.test.tsx b/packages/vx-responsive/test/ScaleSVG.test.tsx
index 580482658..35900847f 100644
--- a/packages/vx-responsive/test/ScaleSVG.test.tsx
+++ b/packages/vx-responsive/test/ScaleSVG.test.tsx
@@ -1,4 +1,3 @@
-// @ts-ignore ts-migrate(1259) FIXME: Module '"/Users/sergii_rudenko/Projects/vx/node_mo... Remove this comment to see the full error message
 import React from 'react';
 import { mount } from 'enzyme';
 
diff --git a/packages/vx-responsive/test/withParentSize.test.tsx b/packages/vx-responsive/test/withParentSize.test.tsx
index 8127b99d6..a8e3f5e7e 100644
--- a/packages/vx-responsive/test/withParentSize.test.tsx
+++ b/packages/vx-responsive/test/withParentSize.test.tsx
@@ -1,4 +1,3 @@
-// @ts-ignore ts-migrate(1259) FIXME: Module '"/Users/sergii_rudenko/Projects/vx/node_mo... Remove this comment to see the full error message
 import React from 'react';
 import { mount } from 'enzyme';
 

From 663af37abc4a1bf41227d94d35a3564f7c860380 Mon Sep 17 00:00:00 2001
From: Sergii Rudenko <sergii.rudenko@airbnb.com>
Date: Tue, 24 Sep 2019 12:12:39 -0700
Subject: [PATCH 06/12] Fix lint

---
 packages/vx-responsive/src/components/ParentSize.tsx    | 6 +++---
 packages/vx-responsive/src/enhancers/withParentSize.tsx | 6 +++---
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/vx-responsive/src/components/ParentSize.tsx b/packages/vx-responsive/src/components/ParentSize.tsx
index e777f9d1c..b033ccf92 100644
--- a/packages/vx-responsive/src/components/ParentSize.tsx
+++ b/packages/vx-responsive/src/components/ParentSize.tsx
@@ -50,12 +50,12 @@ export default class ParentSize extends React.Component<Props, State> {
         });
       });
     });
-    this.ro.observe(this.target as Element);
+    if (this.target) this.ro.observe(this.target);
   }
 
   componentWillUnmount() {
-    this.animationFrameID && window.cancelAnimationFrame(this.animationFrameID);
-    this.ro && this.ro.disconnect();
+    if (this.animationFrameID) window.cancelAnimationFrame(this.animationFrameID);
+    if (this.ro) this.ro.disconnect();
   }
 
   resize({ width, height, top, left }: State) {
diff --git a/packages/vx-responsive/src/enhancers/withParentSize.tsx b/packages/vx-responsive/src/enhancers/withParentSize.tsx
index a80767023..f317bbaa7 100644
--- a/packages/vx-responsive/src/enhancers/withParentSize.tsx
+++ b/packages/vx-responsive/src/enhancers/withParentSize.tsx
@@ -46,12 +46,12 @@ export default function withParentSize<Props extends WithParentSizeProps = {}>(
           });
         });
       });
-      this.container && this.ro.observe(this.container);
+      if (this.container) this.ro.observe(this.container);
     }
 
     componentWillUnmount() {
-      this.animationFrameID && window.cancelAnimationFrame(this.animationFrameID);
-      this.ro && this.ro.disconnect();
+      if (this.animationFrameID) window.cancelAnimationFrame(this.animationFrameID);
+      if (this.ro) this.ro.disconnect();
     }
 
     resize({ width, height }: { width: number; height: number }) {

From c1410024cec8d266cbd1bbbd2a7b9db64540f774 Mon Sep 17 00:00:00 2001
From: Sergii Rudenko <sergii.rudenko@airbnb.com>
Date: Wed, 25 Sep 2019 11:53:51 -0700
Subject: [PATCH 07/12] Fixes for the types, review comments

---
 .../src/components/ParentSize.tsx             | 25 +++++++++++--------
 .../vx-responsive/src/components/ScaleSVG.tsx |  6 ++---
 .../src/enhancers/withParentSize.tsx          |  3 ++-
 .../src/enhancers/withScreenSize.tsx          |  3 ++-
 4 files changed, 22 insertions(+), 15 deletions(-)

diff --git a/packages/vx-responsive/src/components/ParentSize.tsx b/packages/vx-responsive/src/components/ParentSize.tsx
index b033ccf92..5e3205628 100644
--- a/packages/vx-responsive/src/components/ParentSize.tsx
+++ b/packages/vx-responsive/src/components/ParentSize.tsx
@@ -2,24 +2,28 @@ import debounce from 'lodash/debounce';
 import React from 'react';
 import ResizeObserver from 'resize-observer-polyfill';
 
-type Props = {
+export type ParentSizeProps = {
   className?: string;
   debounceTime?: number;
-  innerRef?: React.Ref<HTMLDivElement>;
-  children: (args: {
-    ref: HTMLDivElement | null;
-    resize: (state: State) => void;
-  }) => React.ReactNode;
+  children: (
+    args: {
+      ref: HTMLDivElement | null;
+      resize: (state: ParentSizeState) => void;
+    } & ParentSizeState,
+  ) => React.ReactNode;
 };
 
-type State = {
+type ParentSizeState = {
   width: number;
   height: number;
   top: number;
   left: number;
 };
 
-export default class ParentSize extends React.Component<Props, State> {
+export default class ParentSize extends React.Component<
+  ParentSizeProps & JSX.IntrinsicElements['div'],
+  ParentSizeState
+> {
   static defaultProps = {
     debounceTime: 300,
   };
@@ -28,7 +32,7 @@ export default class ParentSize extends React.Component<Props, State> {
   ro: ResizeObserver | undefined;
   target: HTMLDivElement | null = null;
 
-  constructor(props: Props) {
+  constructor(props: ParentSizeProps) {
     super(props);
     this.state = {
       width: 0,
@@ -58,7 +62,7 @@ export default class ParentSize extends React.Component<Props, State> {
     if (this.ro) this.ro.disconnect();
   }
 
-  resize({ width, height, top, left }: State) {
+  resize({ width, height, top, left }: ParentSizeState) {
     this.setState(() => ({ width, height, top, left }));
   }
 
@@ -84,3 +88,4 @@ export default class ParentSize extends React.Component<Props, State> {
     );
   }
 }
+export { ParentSizeState as ParentSizeProvidedProps };
diff --git a/packages/vx-responsive/src/components/ScaleSVG.tsx b/packages/vx-responsive/src/components/ScaleSVG.tsx
index 3af49644d..fef7f0018 100644
--- a/packages/vx-responsive/src/components/ScaleSVG.tsx
+++ b/packages/vx-responsive/src/components/ScaleSVG.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 
-type Props = {
-  children?: any;
+export type ScaleSVGProps = {
+  children?: React.ReactNode;
   width?: number | string;
   height?: number | string;
   xOrigin?: number | string;
@@ -18,7 +18,7 @@ export default function ResponsiveSVG({
   yOrigin = 0,
   preserveAspectRatio = 'xMinYMin meet',
   innerRef,
-}: Props) {
+}: ScaleSVGProps) {
   return (
     <div
       style={{
diff --git a/packages/vx-responsive/src/enhancers/withParentSize.tsx b/packages/vx-responsive/src/enhancers/withParentSize.tsx
index f317bbaa7..7af849ff3 100644
--- a/packages/vx-responsive/src/enhancers/withParentSize.tsx
+++ b/packages/vx-responsive/src/enhancers/withParentSize.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import debounce from 'lodash/debounce';
 import ResizeObserver from 'resize-observer-polyfill';
 
-type WithParentSizeProps = {
+export type WithParentSizeProps = {
   debounceTime?: number;
 };
 
@@ -78,3 +78,4 @@ export default function withParentSize<Props extends WithParentSizeProps = {}>(
     }
   };
 }
+export { WithParentSizeState as WithParentSizeProvidedProps };
diff --git a/packages/vx-responsive/src/enhancers/withScreenSize.tsx b/packages/vx-responsive/src/enhancers/withScreenSize.tsx
index a8e62a9ee..40660e707 100644
--- a/packages/vx-responsive/src/enhancers/withScreenSize.tsx
+++ b/packages/vx-responsive/src/enhancers/withScreenSize.tsx
@@ -1,7 +1,7 @@
 import debounce from 'lodash/debounce';
 import React from 'react';
 
-type WithScreenSizeProps = {
+export type WithScreenSizeProps = {
   windowResizeDebounceTime?: number;
 };
 
@@ -59,3 +59,4 @@ export default function withScreenSize<Props extends WithScreenSizeProps = {}>(
     }
   };
 }
+export { WithScreenSizeState as WithScreenSizeProvidedProps };

From ab3aff463ea577519284f10b773d95f46bf35e49 Mon Sep 17 00:00:00 2001
From: Sergii Rudenko <sergii.rudenko@airbnb.com>
Date: Fri, 4 Oct 2019 10:51:43 -0700
Subject: [PATCH 08/12] Better naming, remove binds, cleanup

---
 .../src/components/ParentSize.tsx             | 29 ++++++++-----------
 .../src/enhancers/withParentSize.tsx          | 15 +++++-----
 .../src/enhancers/withScreenSize.tsx          | 10 ++-----
 3 files changed, 22 insertions(+), 32 deletions(-)

diff --git a/packages/vx-responsive/src/components/ParentSize.tsx b/packages/vx-responsive/src/components/ParentSize.tsx
index 5e3205628..ce4731b87 100644
--- a/packages/vx-responsive/src/components/ParentSize.tsx
+++ b/packages/vx-responsive/src/components/ParentSize.tsx
@@ -20,6 +20,8 @@ type ParentSizeState = {
   left: number;
 };
 
+const PARENT_SIZE_STYLES = { width: '100%', height: '100%' };
+
 export default class ParentSize extends React.Component<
   ParentSizeProps & JSX.IntrinsicElements['div'],
   ParentSizeState
@@ -27,9 +29,8 @@ export default class ParentSize extends React.Component<
   static defaultProps = {
     debounceTime: 300,
   };
-
   animationFrameID: number | null;
-  ro: ResizeObserver | undefined;
+  resizeObserver: ResizeObserver | undefined;
   target: HTMLDivElement | null = null;
 
   constructor(props: ParentSizeProps) {
@@ -40,13 +41,12 @@ export default class ParentSize extends React.Component<
       top: 0,
       left: 0,
     };
-    this.resize = debounce(this.resize.bind(this), props.debounceTime);
-    this.setTarget = this.setTarget.bind(this);
+    this.resize = debounce(this.resize, props.debounceTime);
     this.animationFrameID = null;
   }
 
   componentDidMount() {
-    this.ro = new ResizeObserver((entries = [] /** , observer */) => {
+    this.resizeObserver = new ResizeObserver((entries = [] /** , observer */) => {
       entries.forEach(entry => {
         const { left, top, width, height } = entry.contentRect;
         this.animationFrameID = window.requestAnimationFrame(() => {
@@ -54,31 +54,26 @@ export default class ParentSize extends React.Component<
         });
       });
     });
-    if (this.target) this.ro.observe(this.target);
+    if (this.target) this.resizeObserver.observe(this.target);
   }
 
   componentWillUnmount() {
     if (this.animationFrameID) window.cancelAnimationFrame(this.animationFrameID);
-    if (this.ro) this.ro.disconnect();
+    if (this.resizeObserver) this.resizeObserver.disconnect();
   }
 
-  resize({ width, height, top, left }: ParentSizeState) {
+  resize = ({ width, height, top, left }: ParentSizeState) => {
     this.setState(() => ({ width, height, top, left }));
-  }
+  };
 
-  setTarget(ref: HTMLDivElement | null) {
+  setTarget = (ref: HTMLDivElement | null) => {
     this.target = ref;
-  }
+  };
 
   render() {
     const { className, children, debounceTime, ...restProps } = this.props;
     return (
-      <div
-        style={{ width: '100%', height: '100%' }}
-        ref={this.setTarget}
-        className={className}
-        {...restProps}
-      >
+      <div style={PARENT_SIZE_STYLES} ref={this.setTarget} className={className} {...restProps}>
         {children({
           ...this.state,
           ref: this.target,
diff --git a/packages/vx-responsive/src/enhancers/withParentSize.tsx b/packages/vx-responsive/src/enhancers/withParentSize.tsx
index 7af849ff3..d3248f5c0 100644
--- a/packages/vx-responsive/src/enhancers/withParentSize.tsx
+++ b/packages/vx-responsive/src/enhancers/withParentSize.tsx
@@ -19,7 +19,7 @@ export default function withParentSize<Props extends WithParentSizeProps = {}>(
       debounceTime: 300,
     };
     animationFrameID: number | null;
-    ro: ResizeObserver | undefined;
+    resizeObserver: ResizeObserver | undefined;
     container: HTMLDivElement | null = null;
     debouncedResize: ({ width, height }: { width: number; height: number }) => void;
 
@@ -29,13 +29,12 @@ export default function withParentSize<Props extends WithParentSizeProps = {}>(
         parentWidth: null,
         parentHeight: null,
       };
-
       this.animationFrameID = null;
-      this.debouncedResize = debounce(this.resize.bind(this), props.debounceTime).bind(this);
+      this.debouncedResize = debounce(this.resize, props.debounceTime);
     }
 
     componentDidMount() {
-      this.ro = new ResizeObserver((entries /** , observer */) => {
+      this.resizeObserver = new ResizeObserver((entries /** , observer */) => {
         entries.forEach(entry => {
           const { width, height } = entry.contentRect;
           this.animationFrameID = window.requestAnimationFrame(() => {
@@ -46,20 +45,20 @@ export default function withParentSize<Props extends WithParentSizeProps = {}>(
           });
         });
       });
-      if (this.container) this.ro.observe(this.container);
+      if (this.container) this.resizeObserver.observe(this.container);
     }
 
     componentWillUnmount() {
       if (this.animationFrameID) window.cancelAnimationFrame(this.animationFrameID);
-      if (this.ro) this.ro.disconnect();
+      if (this.resizeObserver) this.resizeObserver.disconnect();
     }
 
-    resize({ width, height }: { width: number; height: number }) {
+    resize = ({ width, height }: { width: number; height: number }) => {
       this.setState({
         parentWidth: width,
         parentHeight: height,
       });
-    }
+    };
 
     render() {
       const { parentWidth, parentHeight } = this.state;
diff --git a/packages/vx-responsive/src/enhancers/withScreenSize.tsx b/packages/vx-responsive/src/enhancers/withScreenSize.tsx
index 40660e707..608cd88f6 100644
--- a/packages/vx-responsive/src/enhancers/withScreenSize.tsx
+++ b/packages/vx-responsive/src/enhancers/withScreenSize.tsx
@@ -21,15 +21,11 @@ export default function withScreenSize<Props extends WithScreenSizeProps = {}>(
 
     constructor(props: Props) {
       super(props);
-
       this.state = {
         screenWidth: null,
         screenHeight: null,
       };
-
-      this.handleResize = debounce(this.resize.bind(this), props.windowResizeDebounceTime).bind(
-        this,
-      );
+      this.handleResize = debounce(this.resize, props.windowResizeDebounceTime);
     }
 
     componentDidMount() {
@@ -41,14 +37,14 @@ export default function withScreenSize<Props extends WithScreenSizeProps = {}>(
       window.removeEventListener('resize', this.handleResize, false);
     }
 
-    resize(/** event */) {
+    resize = (/** event */) => {
       this.setState((/** prevState, props */) => {
         return {
           screenWidth: window.innerWidth,
           screenHeight: window.innerHeight,
         };
       });
-    }
+    };
 
     render() {
       const { screenWidth, screenHeight } = this.state;

From 4a8282fbcc657ba7c6476e32f1f57694ea570694 Mon Sep 17 00:00:00 2001
From: Sergii Rudenko <sergii.rudenko@airbnb.com>
Date: Fri, 4 Oct 2019 15:41:43 -0700
Subject: [PATCH 09/12] Fix tests

---
 packages/vx-responsive/test/ScaleSVG.test.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/vx-responsive/test/ScaleSVG.test.tsx b/packages/vx-responsive/test/ScaleSVG.test.tsx
index 35900847f..3d36ce1bf 100644
--- a/packages/vx-responsive/test/ScaleSVG.test.tsx
+++ b/packages/vx-responsive/test/ScaleSVG.test.tsx
@@ -10,7 +10,7 @@ describe('<ScaleSVG />', () => {
 
   test('it should expose its ref via an innerRef prop', () => {
     return new Promise(done => {
-      const refCallback = n => {
+      const refCallback = (n: SVGSVGElement) => {
         expect(n.tagName).toEqual('svg');
         done();
       };

From 141807f60723fda2663cc3c5e1972c3082bfb9fb Mon Sep 17 00:00:00 2001
From: Sergii Rudenko <sergii.rudenko@airbnb.com>
Date: Mon, 7 Oct 2019 12:11:33 -0700
Subject: [PATCH 10/12] Bump resize-observer-polyfill version to fix ts types
 issue

---
 packages/vx-responsive/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/vx-responsive/package.json b/packages/vx-responsive/package.json
index 72c4b9206..e619faf80 100644
--- a/packages/vx-responsive/package.json
+++ b/packages/vx-responsive/package.json
@@ -34,7 +34,7 @@
     "@types/react": "*",
     "lodash": "^4.17.10",
     "prop-types": "^15.6.1",
-    "resize-observer-polyfill": "1.5.0"
+    "resize-observer-polyfill": "1.5.1"
   },
   "peerDependencies": {
     "react": "^15.0.0-0 || ^16.0.0-0"

From 19e82c0aef319ffe9223a4fc5c98cf358f57e3e3 Mon Sep 17 00:00:00 2001
From: Sergii Rudenko <sergii.rudenko@airbnb.com>
Date: Mon, 7 Oct 2019 12:55:36 -0700
Subject: [PATCH 11/12] Fix export types lint issues

---
 packages/vx-responsive/src/components/ParentSize.tsx    | 3 ++-
 packages/vx-responsive/src/enhancers/withParentSize.tsx | 3 ++-
 packages/vx-responsive/src/enhancers/withScreenSize.tsx | 3 ++-
 3 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/packages/vx-responsive/src/components/ParentSize.tsx b/packages/vx-responsive/src/components/ParentSize.tsx
index ce4731b87..d81b356cf 100644
--- a/packages/vx-responsive/src/components/ParentSize.tsx
+++ b/packages/vx-responsive/src/components/ParentSize.tsx
@@ -20,6 +20,8 @@ type ParentSizeState = {
   left: number;
 };
 
+export type ParentSizeProvidedProps = ParentSizeState;
+
 const PARENT_SIZE_STYLES = { width: '100%', height: '100%' };
 
 export default class ParentSize extends React.Component<
@@ -83,4 +85,3 @@ export default class ParentSize extends React.Component<
     );
   }
 }
-export { ParentSizeState as ParentSizeProvidedProps };
diff --git a/packages/vx-responsive/src/enhancers/withParentSize.tsx b/packages/vx-responsive/src/enhancers/withParentSize.tsx
index d3248f5c0..6b0311086 100644
--- a/packages/vx-responsive/src/enhancers/withParentSize.tsx
+++ b/packages/vx-responsive/src/enhancers/withParentSize.tsx
@@ -11,6 +11,8 @@ type WithParentSizeState = {
   parentHeight: number | null;
 };
 
+export type WithParentSizeProvidedProps = WithParentSizeState;
+
 export default function withParentSize<Props extends WithParentSizeProps = {}>(
   BaseComponent: React.ComponentType<Props>,
 ) {
@@ -77,4 +79,3 @@ export default function withParentSize<Props extends WithParentSizeProps = {}>(
     }
   };
 }
-export { WithParentSizeState as WithParentSizeProvidedProps };
diff --git a/packages/vx-responsive/src/enhancers/withScreenSize.tsx b/packages/vx-responsive/src/enhancers/withScreenSize.tsx
index 608cd88f6..62725ceb9 100644
--- a/packages/vx-responsive/src/enhancers/withScreenSize.tsx
+++ b/packages/vx-responsive/src/enhancers/withScreenSize.tsx
@@ -10,6 +10,8 @@ type WithScreenSizeState = {
   screenHeight: number | null;
 };
 
+export type WithScreenSizeProvidedProps = WithScreenSizeState;
+
 export default function withScreenSize<Props extends WithScreenSizeProps = {}>(
   BaseComponent: React.ComponentType<Props>,
 ) {
@@ -55,4 +57,3 @@ export default function withScreenSize<Props extends WithScreenSizeProps = {}>(
     }
   };
 }
-export { WithScreenSizeState as WithScreenSizeProvidedProps };

From 701c5dafcb0287848842553632a1ec6de91cf32c Mon Sep 17 00:00:00 2001
From: Sergii Rudenko <sergii.rudenko@airbnb.com>
Date: Wed, 9 Oct 2019 11:26:34 -0700
Subject: [PATCH 12/12] Move PARENT_SIZE_STYLES to the props with default value

---
 packages/vx-responsive/src/components/ParentSize.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/vx-responsive/src/components/ParentSize.tsx b/packages/vx-responsive/src/components/ParentSize.tsx
index d81b356cf..e13d66ff9 100644
--- a/packages/vx-responsive/src/components/ParentSize.tsx
+++ b/packages/vx-responsive/src/components/ParentSize.tsx
@@ -5,6 +5,7 @@ import ResizeObserver from 'resize-observer-polyfill';
 export type ParentSizeProps = {
   className?: string;
   debounceTime?: number;
+  parentSizeStyles?: React.CSSProperties;
   children: (
     args: {
       ref: HTMLDivElement | null;
@@ -22,14 +23,13 @@ type ParentSizeState = {
 
 export type ParentSizeProvidedProps = ParentSizeState;
 
-const PARENT_SIZE_STYLES = { width: '100%', height: '100%' };
-
 export default class ParentSize extends React.Component<
   ParentSizeProps & JSX.IntrinsicElements['div'],
   ParentSizeState
 > {
   static defaultProps = {
     debounceTime: 300,
+    parentSizeStyles: { width: '100%', height: '100%' },
   };
   animationFrameID: number | null;
   resizeObserver: ResizeObserver | undefined;
@@ -73,9 +73,9 @@ export default class ParentSize extends React.Component<
   };
 
   render() {
-    const { className, children, debounceTime, ...restProps } = this.props;
+    const { className, children, debounceTime, parentSizeStyles, ...restProps } = this.props;
     return (
-      <div style={PARENT_SIZE_STYLES} ref={this.setTarget} className={className} {...restProps}>
+      <div style={parentSizeStyles} ref={this.setTarget} className={className} {...restProps}>
         {children({
           ...this.state,
           ref: this.target,