baseui 0.0.0-alpha-80026d1 → 0.0.0-alpha-47b62ee

package/data-table/data-table.js

@@ -11,7 +11,7 @@ var React = _interopRequireWildcard(require("react"));
 
 var _reactWindow = require("react-window");
 
-var _reactVirtualizedAutoSizer = _interopRequireDefault(require("react-virtualized-auto-sizer"));
+var _reactVirtualizedAutoSizer = _interopRequireDefault(require("./react-virtualized-auto-sizer.js"));
 
 var _index = require("../button/index.js");
 
@@ -568,24 +568,27 @@ function DataTable(_ref2) {
     }
 
     return rowHeight;
-  }, [rowHeight]);
-  var gridRef = React.useRef(null); // // We use state for our ref, to allow hooks to  update when the ref changes.
-  // // eslint-disable-next-line flowtype/no-weak-types
-  // const [gridRef, setGridRef] = React.useState<?VariableSizeGrid<any>>(null);
+  }, [rowHeight]); // We use state for our ref, to allow hooks to  update when the ref changes.
+  // eslint-disable-next-line flowtype/no-weak-types
 
-  var _React$useState7 = React.useState(columns.map(function () {
-    return 0;
-  })),
+  var _React$useState7 = React.useState(null),
       _React$useState8 = _slicedToArray(_React$useState7, 2),
-      measuredWidths = _React$useState8[0],
-      setMeasuredWidths = _React$useState8[1];
+      gridRef = _React$useState8[0],
+      setGridRef = _React$useState8[1];
 
   var _React$useState9 = React.useState(columns.map(function () {
     return 0;
   })),
       _React$useState10 = _slicedToArray(_React$useState9, 2),
-      resizeDeltas = _React$useState10[0],
-      setResizeDeltas = _React$useState10[1];
+      measuredWidths = _React$useState10[0],
+      setMeasuredWidths = _React$useState10[1];
+
+  var _React$useState11 = React.useState(columns.map(function () {
+    return 0;
+  })),
+      _React$useState12 = _slicedToArray(_React$useState11, 2),
+      resizeDeltas = _React$useState12[0],
+      setResizeDeltas = _React$useState12[1];
 
   React.useEffect(function () {
     setMeasuredWidths(function (prev) {
@@ -600,11 +603,11 @@ function DataTable(_ref2) {
     });
   }, [columns]);
   var resetAfterColumnIndex = React.useCallback(function (columnIndex) {
-    if (gridRef.current) {
+    if (gridRef) {
       // $FlowFixMe trigger react-window to layout the elements again
-      gridRef.current.resetAfterColumnIndex(columnIndex, true);
+      gridRef.resetAfterColumnIndex(columnIndex, true);
     }
-  }, [gridRef.current]);
+  }, [gridRef]);
   var handleWidthsChange = React.useCallback(function (nextWidths) {
     setMeasuredWidths(nextWidths);
     resetAfterColumnIndex(0);
@@ -617,20 +620,20 @@ function DataTable(_ref2) {
     resetAfterColumnIndex(columnIndex);
   }, [setResizeDeltas, resetAfterColumnIndex]);
 
-  var _React$useState11 = React.useState(0),
-      _React$useState12 = _slicedToArray(_React$useState11, 2),
-      scrollLeft = _React$useState12[0],
-      setScrollLeft = _React$useState12[1];
-
-  var _React$useState13 = React.useState(false),
+  var _React$useState13 = React.useState(0),
       _React$useState14 = _slicedToArray(_React$useState13, 2),
-      isScrollingX = _React$useState14[0],
-      setIsScrollingX = _React$useState14[1];
+      scrollLeft = _React$useState14[0],
+      setScrollLeft = _React$useState14[1];
 
   var _React$useState15 = React.useState(false),
       _React$useState16 = _slicedToArray(_React$useState15, 2),
-      recentlyScrolledX = _React$useState16[0],
-      setRecentlyScrolledX = _React$useState16[1];
+      isScrollingX = _React$useState16[0],
+      setIsScrollingX = _React$useState16[1];
+
+  var _React$useState17 = React.useState(false),
+      _React$useState18 = _slicedToArray(_React$useState17, 2),
+      recentlyScrolledX = _React$useState18[0],
+      setRecentlyScrolledX = _React$useState18[1];
 
   React.useLayoutEffect(function () {
     if (recentlyScrolledX !== isScrollingX) {
@@ -752,19 +755,18 @@ function DataTable(_ref2) {
     return result;
   }, [sortedIndices, filteredIndices, onIncludedRowsChange, allRows]);
 
-  var _React$useState17 = React.useState(0),
-      _React$useState18 = _slicedToArray(_React$useState17, 2),
-      browserScrollbarWidth = _React$useState18[0],
-      setBrowserScrollbarWidth = _React$useState18[1];
+  var _React$useState19 = React.useState(0),
+      _React$useState20 = _slicedToArray(_React$useState19, 2),
+      browserScrollbarWidth = _React$useState20[0],
+      setBrowserScrollbarWidth = _React$useState20[1];
 
   var normalizedWidths = React.useMemo(function () {
     var resizedWidths = measuredWidths.map(function (w, i) {
       return Math.floor(w) + Math.floor(resizeDeltas[i]);
     });
 
-    if (gridRef.current) {
-      // $FlowFixMe
-      var gridProps = gridRef.current.props;
+    if (gridRef) {
+      var gridProps = gridRef.props;
       var isContentTallerThanContainer = false;
       var visibleRowHeight = 0;
 
@@ -801,8 +803,7 @@ function DataTable(_ref2) {
     }
 
     return resizedWidths;
-  }, [// gridRef,
-  measuredWidths, resizeDeltas, browserScrollbarWidth, rows.length, columns]);
+  }, [gridRef, measuredWidths, resizeDeltas, browserScrollbarWidth, rows.length, columns]);
   var isSelectable = batchActions ? !!batchActions.length : false;
   var isSelectedAll = React.useMemo(function () {
     if (!selectedRowIds) {
@@ -846,23 +847,23 @@ function DataTable(_ref2) {
     }
   }, [onSort]);
 
-  var _React$useState19 = React.useState(-1),
-      _React$useState20 = _slicedToArray(_React$useState19, 2),
-      columnHighlightIndex = _React$useState20[0],
-      setColumnHighlightIndex = _React$useState20[1];
-
   var _React$useState21 = React.useState(-1),
       _React$useState22 = _slicedToArray(_React$useState21, 2),
-      rowHighlightIndex = _React$useState22[0],
-      setRowHighlightIndex = _React$useState22[1];
+      columnHighlightIndex = _React$useState22[0],
+      setColumnHighlightIndex = _React$useState22[1];
+
+  var _React$useState23 = React.useState(-1),
+      _React$useState24 = _slicedToArray(_React$useState23, 2),
+      rowHighlightIndex = _React$useState24[0],
+      setRowHighlightIndex = _React$useState24[1];
 
   function handleRowHighlightIndexChange(nextIndex) {
     setRowHighlightIndex(nextIndex);
 
-    if (gridRef.current) {
+    if (gridRef) {
       if (nextIndex >= 0) {
         // $FlowFixMe - unable to get react-window types
-        gridRef.current.scrollToItem({
+        gridRef.scrollToItem({
           rowIndex: nextIndex
         });
       }
@@ -953,7 +954,7 @@ function DataTable(_ref2) {
       }
     }, /*#__PURE__*/React.createElement(_reactWindow.VariableSizeGrid // eslint-disable-next-line flowtype/no-weak-types
     , {
-      ref: gridRef,
+      ref: setGridRef,
       overscanRowCount: 10,
       overscanColumnCount: 5,
       innerElementType: InnerTableElement,

package/data-table/data-table.js.flow

@@ -8,7 +8,7 @@ LICENSE file in the root directory of this source tree.
 
 import * as React from 'react';
 import {VariableSizeGrid} from 'react-window';
-import AutoSizer from 'react-virtualized-auto-sizer';
+import AutoSizer from './react-virtualized-auto-sizer.js';
 
 import {
   Button,
@@ -699,12 +699,9 @@ export function DataTable({
     [rowHeight],
   );
 
-  const gridRef = React.useRef<typeof VariableSizeGrid | null>(null);
-
-  // // We use state for our ref, to allow hooks to  update when the ref changes.
-  // // eslint-disable-next-line flowtype/no-weak-types
-  // const [gridRef, setGridRef] = React.useState<?VariableSizeGrid<any>>(null);
-
+  // We use state for our ref, to allow hooks to  update when the ref changes.
+  // eslint-disable-next-line flowtype/no-weak-types
+  const [gridRef, setGridRef] = React.useState<?VariableSizeGrid<any>>(null);
   const [measuredWidths, setMeasuredWidths] = React.useState(
     columns.map(() => 0),
   );
@@ -720,12 +717,12 @@ export function DataTable({
 
   const resetAfterColumnIndex = React.useCallback(
     columnIndex => {
-      if (gridRef.current) {
+      if (gridRef) {
         // $FlowFixMe trigger react-window to layout the elements again
-        gridRef.current.resetAfterColumnIndex(columnIndex, true);
+        gridRef.resetAfterColumnIndex(columnIndex, true);
       }
     },
-    [gridRef.current],
+    [gridRef],
   );
   const handleWidthsChange = React.useCallback(
     nextWidths => {
@@ -854,9 +851,8 @@ export function DataTable({
     const resizedWidths = measuredWidths.map(
       (w, i) => Math.floor(w) + Math.floor(resizeDeltas[i]),
     );
-    if (gridRef.current) {
-      // $FlowFixMe
-      const gridProps = gridRef.current.props;
+    if (gridRef) {
+      const gridProps = gridRef.props;
 
       let isContentTallerThanContainer = false;
       let visibleRowHeight = 0;
@@ -893,7 +889,7 @@ export function DataTable({
     }
     return resizedWidths;
   }, [
-    // gridRef,
+    gridRef,
     measuredWidths,
     resizeDeltas,
     browserScrollbarWidth,
@@ -956,10 +952,10 @@ export function DataTable({
 
   function handleRowHighlightIndexChange(nextIndex) {
     setRowHighlightIndex(nextIndex);
-    if (gridRef.current) {
+    if (gridRef) {
       if (nextIndex >= 0) {
         // $FlowFixMe - unable to get react-window types
-        gridRef.current.scrollToItem({rowIndex: nextIndex});
+        gridRef.scrollToItem({rowIndex: nextIndex});
       }
       if (onRowHighlightChange) {
         onRowHighlightChange(nextIndex, rows[nextIndex - 1]);
@@ -1059,7 +1055,7 @@ export function DataTable({
           >
             <VariableSizeGrid
               // eslint-disable-next-line flowtype/no-weak-types
-              ref={(gridRef: any)}
+              ref={(setGridRef: any)}
               overscanRowCount={10}
               overscanColumnCount={5}
               innerElementType={InnerTableElement}

package/data-table/react-virtualized-auto-sizer.js

@@ -0,0 +1,200 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var React = _interopRequireWildcard(require("react"));
+
+var _reactVirtualizedDetectElementResize = _interopRequireDefault(require("./react-virtualized-detect-element-resize.js"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } return _assertThisInitialized(self); }
+
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
+
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var AutoSizer = /*#__PURE__*/function (_React$PureComponent) {
+  _inherits(AutoSizer, _React$PureComponent);
+
+  var _super = _createSuper(AutoSizer);
+
+  function AutoSizer() {
+    var _this;
+
+    _classCallCheck(this, AutoSizer);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+
+    _defineProperty(_assertThisInitialized(_this), "state", {
+      height: _this.props.defaultHeight || 0,
+      width: _this.props.defaultWidth || 0
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "_parentNode", void 0);
+
+    _defineProperty(_assertThisInitialized(_this), "_autoSizer", void 0);
+
+    _defineProperty(_assertThisInitialized(_this), "_detectElementResize", void 0);
+
+    _defineProperty(_assertThisInitialized(_this), "_onResize", function () {
+      var _this$props = _this.props,
+          disableHeight = _this$props.disableHeight,
+          disableWidth = _this$props.disableWidth,
+          onResize = _this$props.onResize;
+
+      if (_this._parentNode) {
+        // Guard against AutoSizer component being removed from the DOM immediately after being added.
+        // This can result in invalid style values which can result in NaN values if we don't handle them.
+        // See issue #150 for more context.
+        console.log(_this._parentNode.offsetWidth, _this._parentNode.offsetHeight);
+        var height = _this._parentNode.offsetHeight || 0;
+        var width = _this._parentNode.offsetWidth || 0;
+        var style = window.getComputedStyle(_this._parentNode) || {};
+        var paddingLeft = parseInt(style.paddingLeft, 10) || 0;
+        var paddingRight = parseInt(style.paddingRight, 10) || 0;
+        var paddingTop = parseInt(style.paddingTop, 10) || 0;
+        var paddingBottom = parseInt(style.paddingBottom, 10) || 0;
+        var newHeight = height - paddingTop - paddingBottom;
+        var newWidth = width - paddingLeft - paddingRight;
+
+        if (!disableHeight && _this.state.height !== newHeight || !disableWidth && _this.state.width !== newWidth) {
+          _this.setState({
+            height: height - paddingTop - paddingBottom,
+            width: width - paddingLeft - paddingRight
+          });
+
+          onResize({
+            height: height,
+            width: width
+          });
+        }
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "_setRef", function (autoSizer) {
+      _this._autoSizer = autoSizer;
+    });
+
+    return _this;
+  }
+
+  _createClass(AutoSizer, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var nonce = this.props.nonce;
+
+      if (this._autoSizer && this._autoSizer.parentNode && this._autoSizer.parentNode.ownerDocument && this._autoSizer.parentNode.ownerDocument.defaultView && this._autoSizer.parentNode instanceof this._autoSizer.parentNode.ownerDocument.defaultView.HTMLElement) {
+        // Delay access of parentNode until mount.
+        // This handles edge-cases where the component has already been unmounted before its ref has been set,
+        // As well as libraries like react-lite which have a slightly different lifecycle.
+        this._parentNode = this._autoSizer.parentNode; // Defer requiring resize handler in order to support server-side rendering.
+        // See issue #41
+
+        this._detectElementResize = (0, _reactVirtualizedDetectElementResize.default)(nonce);
+
+        this._detectElementResize.addResizeListener(this._parentNode, this._onResize);
+
+        this._onResize();
+      }
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      if (this._detectElementResize && this._parentNode) {
+        this._detectElementResize.removeResizeListener(this._parentNode, this._onResize);
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props2 = this.props,
+          children = _this$props2.children,
+          className = _this$props2.className,
+          disableHeight = _this$props2.disableHeight,
+          disableWidth = _this$props2.disableWidth,
+          style = _this$props2.style;
+      var _this$state = this.state,
+          height = _this$state.height,
+          width = _this$state.width; // Outer div should not force width/height since that may prevent containers from shrinking.
+      // Inner component should overflow and use calculated width/height.
+      // See issue #68 for more information.
+
+      var outerStyle = {
+        overflow: 'visible'
+      };
+      var childParams = {}; // Avoid rendering children before the initial measurements have been collected.
+      // At best this would just be wasting cycles.
+
+      var bailoutOnChildren = false;
+
+      if (!disableHeight) {
+        if (height === 0) {
+          bailoutOnChildren = true;
+        }
+
+        outerStyle.height = 0;
+        childParams.height = height;
+      }
+
+      if (!disableWidth) {
+        if (width === 0) {
+          bailoutOnChildren = true;
+        }
+
+        outerStyle.width = 0;
+        childParams.width = width;
+      }
+
+      return /*#__PURE__*/React.createElement("div", {
+        className: className,
+        ref: this._setRef,
+        style: _objectSpread(_objectSpread({}, outerStyle), style)
+      }, children(childParams));
+    }
+  }]);
+
+  return AutoSizer;
+}(React.PureComponent);
+
+exports.default = AutoSizer;
+
+_defineProperty(AutoSizer, "defaultProps", {
+  onResize: function onResize() {},
+  disableHeight: false,
+  disableWidth: false,
+  style: {}
+});

package/data-table/react-virtualized-auto-sizer.js.flow

@@ -0,0 +1,201 @@
+// https://github.com/bvaughn/react-virtualized-auto-sizer
+// MIT license https://github.com/bvaughn/react-virtualized-auto-sizer/blob/1275e69264dd960d15aca42fea8bd73194672778/package.json#L11
+// @flow
+
+import * as React from 'react';
+import createDetectElementResize from './react-virtualized-detect-element-resize.js';
+
+type Size = {
+  height: number,
+  width: number,
+};
+
+type Props = {
+  /** Function responsible for rendering children.*/
+  children: Size => React.Element<*>,
+
+  /** Optional custom CSS class name to attach to root AutoSizer element.  */
+  className?: string,
+
+  /** Default height to use for initial render; useful for SSR */
+  defaultHeight?: number,
+
+  /** Default width to use for initial render; useful for SSR */
+  defaultWidth?: number,
+
+  /** Disable dynamic :height property */
+  disableHeight: boolean,
+
+  /** Disable dynamic :width property */
+  disableWidth: boolean,
+
+  /** Nonce of the inlined stylesheet for Content Security Policy */
+  nonce?: string,
+
+  /** Callback to be invoked on-resize */
+  onResize: Size => void,
+
+  /** Optional inline style */
+  style: ?Object,
+};
+
+type State = {
+  height: number,
+  width: number,
+};
+
+type ResizeHandler = (element: HTMLElement, onResize: () => void) => void;
+
+type DetectElementResize = {
+  addResizeListener: ResizeHandler,
+  removeResizeListener: ResizeHandler,
+};
+
+export default class AutoSizer extends React.PureComponent<Props, State> {
+  static defaultProps = {
+    onResize: () => {},
+    disableHeight: false,
+    disableWidth: false,
+    style: {},
+  };
+
+  state = {
+    height: this.props.defaultHeight || 0,
+    width: this.props.defaultWidth || 0,
+  };
+
+  _parentNode: ?HTMLElement;
+  _autoSizer: ?HTMLElement;
+  _detectElementResize: DetectElementResize;
+
+  componentDidMount() {
+    const {nonce} = this.props;
+    if (
+      this._autoSizer &&
+      this._autoSizer.parentNode &&
+      this._autoSizer.parentNode.ownerDocument &&
+      this._autoSizer.parentNode.ownerDocument.defaultView &&
+      this._autoSizer.parentNode instanceof
+        this._autoSizer.parentNode.ownerDocument.defaultView.HTMLElement
+    ) {
+      // Delay access of parentNode until mount.
+      // This handles edge-cases where the component has already been unmounted before its ref has been set,
+      // As well as libraries like react-lite which have a slightly different lifecycle.
+      this._parentNode = this._autoSizer.parentNode;
+
+      // Defer requiring resize handler in order to support server-side rendering.
+      // See issue #41
+      this._detectElementResize = createDetectElementResize(nonce);
+      this._detectElementResize.addResizeListener(
+        this._parentNode,
+        this._onResize,
+      );
+
+      this._onResize();
+    }
+  }
+
+  componentWillUnmount() {
+    if (this._detectElementResize && this._parentNode) {
+      this._detectElementResize.removeResizeListener(
+        this._parentNode,
+        this._onResize,
+      );
+    }
+  }
+
+  render() {
+    const {
+      children,
+      className,
+      disableHeight,
+      disableWidth,
+      style,
+    } = this.props;
+    const {height, width} = this.state;
+
+    // Outer div should not force width/height since that may prevent containers from shrinking.
+    // Inner component should overflow and use calculated width/height.
+    // See issue #68 for more information.
+    const outerStyle: Object = {overflow: 'visible'};
+    const childParams: Object = {};
+
+    // Avoid rendering children before the initial measurements have been collected.
+    // At best this would just be wasting cycles.
+    let bailoutOnChildren = false;
+
+    if (!disableHeight) {
+      if (height === 0) {
+        bailoutOnChildren = true;
+      }
+      outerStyle.height = 0;
+      childParams.height = height;
+    }
+
+    if (!disableWidth) {
+      if (width === 0) {
+        bailoutOnChildren = true;
+      }
+      outerStyle.width = 0;
+      childParams.width = width;
+    }
+
+    return (
+      <div
+        className={className}
+        ref={this._setRef}
+        style={{
+          ...outerStyle,
+          ...style,
+        }}
+      >
+        {children(childParams)}
+        {/* {!bailoutOnChildren && children(childParams)} */}
+      </div>
+    );
+  }
+
+  _onResize = () => {
+    const {disableHeight, disableWidth, onResize} = this.props;
+
+    if (this._parentNode) {
+      // Guard against AutoSizer component being removed from the DOM immediately after being added.
+      // This can result in invalid style values which can result in NaN values if we don't handle them.
+      // See issue #150 for more context.
+
+      console.log(this._parentNode.offsetWidth, this._parentNode.offsetHeight);
+
+      const height = this._parentNode.offsetHeight || 0;
+      const width = this._parentNode.offsetWidth || 0;
+
+      const style = window.getComputedStyle(this._parentNode) || {};
+      const paddingLeft = parseInt(style.paddingLeft, 10) || 0;
+      const paddingRight = parseInt(style.paddingRight, 10) || 0;
+      const paddingTop = parseInt(style.paddingTop, 10) || 0;
+      const paddingBottom = parseInt(style.paddingBottom, 10) || 0;
+
+      const newHeight = height - paddingTop - paddingBottom;
+      const newWidth = width - paddingLeft - paddingRight;
+
+      if (
+        (!disableHeight && this.state.height !== newHeight) ||
+        (!disableWidth && this.state.width !== newWidth)
+      ) {
+        this.setState({
+          height: height - paddingTop - paddingBottom,
+          width: width - paddingLeft - paddingRight,
+        });
+
+        onResize({height, width});
+      }
+    }
+  };
+
+  _setRef = (autoSizer: ?HTMLElement) => {
+    this._autoSizer = autoSizer;
+  };
+}
+
+declare var __DEV__: boolean;
+declare var __NODE__: boolean;
+declare var __BROWSER__: boolean;