@sis-cc/dotstatsuite-visions 7.18.6 → 7.19.0

package/lib/HierarchicalFilter/index.js

@@ -0,0 +1,16 @@
+'use strict';
+
+exports.__esModule = true;
+
+var _HierarchicalFilter = require('./HierarchicalFilter');
+
+Object.defineProperty(exports, 'default', {
+  enumerable: true,
+  get: function get() {
+    return _interopRequireDefault(_HierarchicalFilter).default;
+  }
+});
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+module.exports = exports['default'];

package/lib/ScopeList/Item.js

@@ -94,7 +94,9 @@ var Item = function Item(_ref) {
       labelRenderer = _ref.labelRenderer,
       HTMLRenderer = _ref.HTMLRenderer,
       hierarchicalId = _ref.hierarchicalId,
-      labels = _ref.labels;
+      labels = _ref.labels,
+      _ref$depth = _ref.depth,
+      depth = _ref$depth === undefined ? 0 : _ref$depth;
 
   var _React$useState = _react2.default.useState(false),
       isTooltipShown = _React$useState[0],
@@ -128,6 +130,7 @@ var Item = function Item(_ref) {
       secondaryTypographyProps: { color: 'inherit' },
       classes: { root: classes.listItem },
       className: (0, _classnames2.default)((_cx2 = {}, _cx2[classes.accessibilityItemHover] = accessibility, _cx2[classes.listItemSelected] = R.and(isSelected, R.not(isDisabled)), _cx2[classes.listItemHover] = R.not(isDisabled), _cx2)),
+      style: { marginLeft: depth * 20 + 'px' },
       title: isDisabled ? R.propOr('', 'disableItemLabel')(labels) + ' ' + label : label,
       primary: _react2.default.createElement(
         'div',
@@ -272,7 +275,8 @@ Item.propTypes = process.env.NODE_ENV !== "production" ? {
   labelRenderer: _propTypes2.default.func,
   HTMLRenderer: _propTypes2.default.func,
   hierarchicalId: _propTypes2.default.string,
-  labels: _propTypes2.default.object
+  labels: _propTypes2.default.object,
+  depth: _propTypes2.default.number
 } : {};
 
 exports.default = Item;

package/lib/VirtualizedTree/Item.js

@@ -0,0 +1,223 @@
+'use strict';
+
+exports.__esModule = true;
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _ramda = require('ramda');
+
+var R = _interopRequireWildcard(_ramda);
+
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+var _ListItem = require('@material-ui/core/ListItem');
+
+var _ListItem2 = _interopRequireDefault(_ListItem);
+
+var _Typography = require('@material-ui/core/Typography');
+
+var _Typography2 = _interopRequireDefault(_Typography);
+
+var _ListItemText = require('@material-ui/core/ListItemText');
+
+var _ListItemText2 = _interopRequireDefault(_ListItemText);
+
+var _IconButton = require('@material-ui/core/IconButton');
+
+var _IconButton2 = _interopRequireDefault(_IconButton);
+
+var _SvgIcon = require('@material-ui/core/SvgIcon');
+
+var _SvgIcon2 = _interopRequireDefault(_SvgIcon);
+
+var _classnames = require('classnames');
+
+var _classnames2 = _interopRequireDefault(_classnames);
+
+var _ = require('../');
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var checkBoxPath = 'M19 5v14H5V5h14m0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2z';
+var checkPath = 'M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z';
+
+var Item = function Item(_ref) {
+  var _cx, _extends2, _cx2, _cx3, _cx4, _cx5, _cx6;
+
+  var classes = _ref.classes,
+      id = _ref.id,
+      label = _ref.label,
+      _ref$description = _ref.description,
+      description = _ref$description === undefined ? '' : _ref$description,
+      isSelected = _ref.isSelected,
+      isDisabled = _ref.isDisabled,
+      changeList = _ref.changeList,
+      ariaLabel = _ref.ariaLabel,
+      NavigateIcon = _ref.NavigateIcon,
+      hasChild = _ref.hasChild,
+      hasChildrenOnLevel = _ref.hasChildrenOnLevel,
+      count = _ref.count,
+      svgPath = _ref.svgPath,
+      testId = _ref.testId,
+      style = _ref.style,
+      isRtl = _ref.isRtl,
+      accessibility = _ref.accessibility,
+      index = _ref.index,
+      HTMLRenderer = _ref.HTMLRenderer,
+      hierarchicalId = _ref.hierarchicalId,
+      labels = _ref.labels,
+      _ref$depth = _ref.depth,
+      depth = _ref$depth === undefined ? 0 : _ref$depth,
+      eventsCallbacks = _ref.eventsCallbacks;
+
+  var _React$useState = _react2.default.useState(false),
+      isTooltipShown = _React$useState[0],
+      setIsTooltipShown = _React$useState[1];
+
+  var callbacks = eventsCallbacks(hierarchicalId || id, index);
+  var padding = depth * 30 + (depth > 0 && !hasChildrenOnLevel ? 30 : 0) + (!hasChild && hasChildrenOnLevel ? 30 : 0);
+  return _react2.default.createElement(
+    _ListItem2.default,
+    {
+      disableGutters: true,
+      classes: { disabled: classes.disabled },
+      className: (0, _classnames2.default)(classes.listItemContainer, (_cx = {}, _cx[classes.disableSecondaryAction] = R.not(hasChild), _cx)),
+      disabled: isDisabled,
+      tabIndex: -1,
+      style: _extends({}, style, (_extends2 = {
+        flexDirection: isRtl ? 'row-reverse' : 'row'
+      }, _extends2['' + (isRtl ? 'paddingRight' : 'paddingLeft')] = padding + 'px', _extends2))
+    },
+    R.and(NavigateIcon, hasChild) && _react2.default.createElement(
+      _IconButton2.default,
+      {
+        disableRipple: true,
+        disableFocusRipple: true,
+        className: classes.arrow,
+        'aria-label': ariaLabel,
+        tabIndex: -1,
+        size: 'small',
+        color: 'inherit',
+        onClick: function onClick() {
+          return changeList(hierarchicalId || id);
+        }
+      },
+      _react2.default.createElement(NavigateIcon, null)
+    ),
+    _react2.default.createElement(_ListItemText2.default, _extends({
+      tabIndex: 0,
+      'aria-label': isDisabled ? R.propOr('', 'disableItemLabel')(labels) + ' ' + label : label,
+      'aria-pressed': isSelected,
+      'aria-disabled': isDisabled,
+      primaryTypographyProps: { noWrap: true, color: 'inherit' },
+      secondaryTypographyProps: { color: 'inherit' },
+      classes: { root: classes.listItem },
+      className: (0, _classnames2.default)((_cx2 = {}, _cx2[classes.accessibilityItemHover] = accessibility, _cx2[classes.listItemSelected] = R.and(isSelected, R.not(isDisabled)), _cx2[classes.listItemHover] = R.not(isDisabled), _cx2)),
+      onMouseDown: isDisabled || isTooltipShown ? null : callbacks.onMouseDown,
+      onMouseUp: isDisabled || isTooltipShown ? null : callbacks.onMouseUp,
+      onMouseEnter: isDisabled || isTooltipShown ? null : callbacks.onMouseEnter
+    }, R.pick(['onKeyPress'], callbacks), {
+      title: isDisabled ? R.propOr('', 'disableItemLabel')(labels) + ' ' + label : label,
+      primary: _react2.default.createElement(
+        'div',
+        {
+          className: (0, _classnames2.default)(classes.labelContainer, (_cx3 = {}, _cx3[classes.rtlLabelContainer] = isRtl, _cx3))
+        },
+        _react2.default.createElement(
+          _SvgIcon2.default,
+          {
+            color: 'primary',
+            className: (0, _classnames2.default)(classes.labelIcon, (_cx4 = {}, _cx4[classes.disabledLabel] = isDisabled, _cx4))
+          },
+          _react2.default.createElement('path', { d: R.and(isSelected, R.not(isDisabled)) ? checkPath : checkBoxPath })
+        ),
+        svgPath && _react2.default.createElement(
+          _SvgIcon2.default,
+          {
+            color: 'primary',
+            className: (0, _classnames2.default)(classes.labelIcon, (_cx5 = {}, _cx5[classes.disabledLabel] = isDisabled, _cx5))
+          },
+          _react2.default.createElement('path', { d: svgPath })
+        ),
+        _react2.default.createElement(
+          _.Tooltip,
+          {
+            title: R.or(R.isNil(HTMLRenderer), R.isEmpty(description)) ? description : _react2.default.createElement(HTMLRenderer, { html: description, onClick: function onClick(e) {
+                return e.stopPropagation();
+              } }),
+            enterDelay: 400,
+            tabIndex: 0,
+            'aria-label': description,
+            'aria-hidden': false,
+            placement: 'top',
+            interactive: Boolean(HTMLRenderer),
+            onOpen: function onOpen() {
+              return setIsTooltipShown(true);
+            },
+            onClose: function onClose() {
+              return setIsTooltipShown(false);
+            }
+          },
+          _react2.default.createElement(
+            _Typography2.default,
+            {
+              'data-testid': testId + '_value_' + id,
+              color: 'inherit',
+              variant: 'body2',
+              className: (0, _classnames2.default)(classes.label, (_cx6 = {}, _cx6[classes.disabledLabel] = isDisabled, _cx6[classes.tooltipNotice] = !R.isEmpty(description), _cx6))
+            },
+            label
+          )
+        ),
+        R.not(R.isNil(count)) && _react2.default.createElement(
+          _Typography2.default,
+          { variant: 'body2', className: classes.count },
+          '(',
+          count,
+          ')'
+        )
+      )
+    }))
+  );
+};
+
+Item.propTypes = process.env.NODE_ENV !== "production" ? {
+  classes: _propTypes2.default.object,
+  id: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number]),
+  label: _propTypes2.default.string,
+  description: _propTypes2.default.string,
+  parentId: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number]),
+  ariaLabel: _propTypes2.default.string,
+  NavigateIcon: _propTypes2.default.object,
+  isSelected: _propTypes2.default.bool,
+  isDisabled: _propTypes2.default.bool,
+  hasChild: _propTypes2.default.bool,
+  hasChildrenOnLevel: _propTypes2.default.bool,
+  isSection: _propTypes2.default.bool,
+  changeList: _propTypes2.default.func,
+  changeListDescription: _propTypes2.default.string,
+  count: _propTypes2.default.number,
+  svgPath: _propTypes2.default.string,
+  style: _propTypes2.default.object,
+  isRtl: _propTypes2.default.bool,
+  testId: _propTypes2.default.string,
+  accessibility: _propTypes2.default.bool,
+  index: _propTypes2.default.number,
+  labelRenderer: _propTypes2.default.func,
+  HTMLRenderer: _propTypes2.default.func,
+  hierarchicalId: _propTypes2.default.string,
+  labels: _propTypes2.default.object,
+  depth: _propTypes2.default.number,
+  eventsCallbacks: _propTypes2.default.func
+} : {};
+
+exports.default = Item;
+module.exports = exports['default'];

package/lib/VirtualizedTree/VirtualizedTree.js

@@ -0,0 +1,382 @@
+'use strict';
+
+exports.__esModule = true;
+exports.getDepth = exports.getHasChildrenOnLevel = exports.getDisplayedIds = exports.getHierarchicalId = undefined;
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+var _ramda = require('ramda');
+
+var R = _interopRequireWildcard(_ramda);
+
+var _AutoSizer = require('react-virtualized/dist/commonjs/AutoSizer');
+
+var _AutoSizer2 = _interopRequireDefault(_AutoSizer);
+
+var _List = require('react-virtualized/dist/commonjs/List');
+
+var _List2 = _interopRequireDefault(_List);
+
+var _Button = require('@material-ui/core/Button');
+
+var _Button2 = _interopRequireDefault(_Button);
+
+var _ExpandMore = require('@material-ui/icons/ExpandMore');
+
+var _ExpandMore2 = _interopRequireDefault(_ExpandMore);
+
+var _ExpandLess = require('@material-ui/icons/ExpandLess');
+
+var _ExpandLess2 = _interopRequireDefault(_ExpandLess);
+
+var _List3 = require('@material-ui/core/List');
+
+var _List4 = _interopRequireDefault(_List3);
+
+var _Item = require('./Item');
+
+var _Item2 = _interopRequireDefault(_Item);
+
+var _core = require('@material-ui/core');
+
+var _styles = require('../ScopeList/styles');
+
+var _utils = require('../utils');
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var getSingleItemScope = function getSingleItemScope(item) {
+  return [item];
+};
+
+var getHierarchicalId = exports.getHierarchicalId = function getHierarchicalId(item) {
+  return R.prop('hierarchicalId', item) || R.prop('id', item);
+};
+
+var getDisplayedIds = exports.getDisplayedIds = function getDisplayedIds(items, grouped, expanded) {
+  return R.pipe(R.map(function (item) {
+    var hierarchicalId = getHierarchicalId(item);
+    if (R.has(hierarchicalId, grouped) && R.has(hierarchicalId, expanded)) {
+      var children = getDisplayedIds(R.prop(hierarchicalId, grouped), grouped, expanded);
+      return R.prepend(hierarchicalId, children);
+    }
+    return [hierarchicalId];
+  }), R.unnest)(items);
+};
+
+var getHasChildrenOnLevel = exports.getHasChildrenOnLevel = function getHasChildrenOnLevel(groupedItems) {
+  return function (item) {
+    if (R.has(getHierarchicalId(item), groupedItems)) {
+      return true;
+    }
+    return R.pipe(R.prop(R.propOr('#ROOT', 'parentId', item)), R.find(function (it) {
+      return R.has(getHierarchicalId(it), groupedItems);
+    }), R.complement(R.isNil))(groupedItems);
+  };
+};
+
+var getDepth = exports.getDepth = function getDepth(indexedItems) {
+  return function (item) {
+    if (R.isNil(item.parentId)) {
+      return 0;
+    }
+    var parent = R.prop(item.parentId, indexedItems);
+    return getDepth(indexedItems)(parent) + 1;
+  };
+};
+
+var VirtualizedTree = function VirtualizedTree(props) {
+  var accessibility = props.accessibility,
+      changeSelection = props.changeSelection,
+      disableAccessor = props.disableAccessor,
+      HTMLRenderer = props.HTMLRenderer,
+      items = props.items,
+      labelRenderer = props.labelRenderer,
+      labels = props.labels,
+      withExpandControl = props.withExpandControl,
+      _props$maxTreeHeight = props.maxTreeHeight,
+      maxTreeHeight = _props$maxTreeHeight === undefined ? 250 : _props$maxTreeHeight,
+      _props$getItemScope = props.getItemScope,
+      getItemScope = _props$getItemScope === undefined ? getSingleItemScope : _props$getItemScope;
+
+  var theme = (0, _core.useTheme)();
+
+  var _useState = (0, _react.useState)({}),
+      expandedIds = _useState[0],
+      setExpandedIds = _useState[1];
+
+  var _useState2 = (0, _react.useState)(undefined),
+      scrollTop = _useState2[0],
+      setScrollTop = _useState2[1];
+
+  var _useState3 = (0, _react.useState)([]),
+      shiftIndexes = _useState3[0],
+      setShiftIndexes = _useState3[1];
+
+  var _useState4 = (0, _react.useState)({}),
+      selectIds = _useState4[0],
+      setSelectIds = _useState4[1];
+
+  var _useState5 = (0, _react.useState)(false),
+      isMouseDown = _useState5[0],
+      setIsMouseDown = _useState5[1];
+
+  var _useMemo = (0, _react.useMemo)(function () {
+    var indexedItemsById = R.indexBy(getHierarchicalId, items);
+    var groupedItemsByParentId = R.groupBy(R.propOr('#ROOT', 'parentId'), items);
+    return { indexedItemsById: indexedItemsById, groupedItemsByParentId: groupedItemsByParentId };
+  }, [items]),
+      indexedItemsById = _useMemo.indexedItemsById,
+      groupedItemsByParentId = _useMemo.groupedItemsByParentId;
+
+  var list = (0, _react.useMemo)(function () {
+    return getDisplayedIds(R.propOr([], '#ROOT', groupedItemsByParentId), groupedItemsByParentId, expandedIds);
+  }, [items, expandedIds]);
+  var multiSelect = function multiSelect(id) {
+    var item = R.prop(id, indexedItemsById);
+    var ids = R.pipe(getItemScope, R.filter(function (v) {
+      return v.isSelected === item.isSelected;
+    }), R.map(getHierarchicalId))(item);
+    if (R.has(id, selectIds)) {
+      setSelectIds(R.omit(ids, selectIds));
+    } else {
+      setSelectIds(_extends({}, selectIds, R.indexBy(R.identity, ids)));
+    }
+  };
+  var shiftSelect = function shiftSelect(index) {
+    if (R.isEmpty(shiftIndexes)) {
+      var item = R.nth(index, list);
+      var ids = R.pipe(getItemScope, R.filter(function (v) {
+        return v.isSelected === item.isSelected;
+      }), R.map(getHierarchicalId), R.indexBy(R.identity))(item);
+      setShiftIndexes(R.append(index, shiftIndexes));
+      setSelectIds(ids);
+    } else if (R.length(shiftIndexes) === 1 && index === R.head(shiftIndexes)) {
+      setShiftIndexes([]);
+      setSelectIds({});
+    } else {
+      var indexes = [R.head(shiftIndexes), index];
+      var isSelected = void 0;
+      var _selectIds = R.pipe(R.slice(Math.min.apply(Math, indexes), Math.max.apply(Math, indexes) + 1), function (ids) {
+        return R.props(ids, indexedItemsById);
+      }, function (items) {
+        isSelected = R.pipe(R.head, R.prop('isSelected'))(items);
+        return items;
+      }, R.map(getItemScope), R.unnest, R.filter(function (v) {
+        return v.isSelected === isSelected;
+      }), R.map(getHierarchicalId), R.indexBy(R.identity))(list);
+      setShiftIndexes(indexes);
+      setSelectIds(_selectIds);
+    }
+  };
+  var apply = function apply() {
+    if (!R.isEmpty(selectIds)) {
+      var ids = R.values(selectIds);
+      var selection = R.pipe(R.props(ids), R.pluck('id'), R.uniq)(indexedItemsById);
+      changeSelection(selection);
+      setShiftIndexes([]);
+      setSelectIds({});
+      setIsMouseDown(false);
+    }
+  };
+  var eventsCallbacks = function eventsCallbacks(id, index) {
+    return {
+      onMouseUp: isMouseDown ? function () {
+        apply();
+      } : null,
+      onMouseDown: function onMouseDown(e) {
+        if (e.ctrlKey || e.shiftKey) {
+          return;
+        }
+        multiSelect(id);
+        setIsMouseDown(true);
+      },
+      onMouseEnter: isMouseDown ? function (e) {
+        if (e.ctrlKey || e.shiftKey) {
+          return;
+        }
+        multiSelect(id);
+      } : null,
+      onClick: function onClick(e) {
+        if (e.ctrlKey) {
+          multiSelect(id);
+        } else if (e.shiftKey) {
+          shiftSelect(index);
+        }
+      }
+    };
+  };
+  var onKeyUp = function onKeyUp(e) {
+    if (e.key === 'Shift' && !R.isEmpty(shiftIndexes)) {
+      apply();
+    } else if (e.key === 'Control' && !R.isEmpty(selectIds)) {
+      apply();
+    }
+  };
+  var isItemSelected = function isItemSelected(item, index) {
+    if (!R.isEmpty(shiftIndexes) && index >= Math.min.apply(Math, shiftIndexes) && index <= Math.max.apply(Math, shiftIndexes)) {
+      return !item.isSelected;
+    }
+    if (!R.isEmpty(selectIds) && R.has(getHierarchicalId(item), selectIds)) {
+      return !item.isSelected;
+    }
+    return !!item.isSelected;
+  };
+  var ref = (0, _react.useRef)();
+  var classes = (0, _styles.useStyles)();
+
+  (0, _react.useEffect)(function () {
+    var current = ref.current;
+    var handler = function handler(event) {
+      if (R.or(event.ctrlKey, event.shiftKey)) {
+        // ugly hack, to get div element created by react-virtuliase (get scroll height)
+        // ReactVirtualized__Grid ReactVirtualized__List made the scrollbar
+        var scrollEl = R.path(['children', 0, 'children', 0], current);
+        var isBottom = R.gte(R.add(R.prop('scrollTop')(scrollEl), R.prop('clientHeight')(scrollEl)), R.prop('scrollHeight')(scrollEl));
+        var nextpos = (scrollTop || scrollEl.scrollTop) + event.deltaY / 2;
+        if (R.or(event.deltaY < 0, event.deltaY > 0 && R.not(isBottom))) {
+          setScrollTop(nextpos < 0 ? 0 : nextpos);
+        }
+        event.preventDefault();
+      }
+      if (R.not(event.ctrlKey) && R.not(event.shiftKey)) {
+        setScrollTop(undefined); // should be undefined if the user want use the normal scroll
+      }
+    };
+    if (scrollTop === 0) {
+      setScrollTop(undefined);
+    }
+    if (R.isNil(current)) return;
+
+    current.addEventListener('wheel', handler, { passive: false });
+    return function () {
+      current.removeEventListener('wheel', handler, { passive: false });
+    };
+  }, [scrollTop]);
+  var maxHeight = R.pipe(R.length, R.multiply(_styles.height), R.ifElse(R.gt(maxTreeHeight), R.add(10), R.always(maxTreeHeight)))(list);
+
+  var expand = function expand(index) {
+    var parentId = R.nth(index, list);
+    setExpandedIds(R.assoc(parentId, parentId, expandedIds));
+  };
+
+  var collapse = function collapse(index) {
+    var parentId = R.nth(index, list);
+    setExpandedIds(R.dissoc(parentId, expandedIds));
+  };
+
+  var expandAll = function expandAll() {
+    setExpandedIds(indexedItemsById);
+  };
+
+  var collapseAll = function collapseAll() {
+    setExpandedIds({});
+  };
+
+  if (R.isEmpty(list)) {
+    return null;
+  }
+  var isRtl = (0, _utils.getIsRtl)(theme);
+
+  return _react2.default.createElement(
+    _react.Fragment,
+    null,
+    _react2.default.createElement(
+      _List4.default,
+      { disablePadding: true, style: { height: maxHeight + 2 }, onKeyUp: onKeyUp, ref: ref },
+      _react2.default.createElement(
+        _AutoSizer2.default,
+        null,
+        function (_ref) {
+          var height = _ref.height,
+              width = _ref.width;
+          return _react2.default.createElement(_List2.default, {
+            overscan: 10,
+            tabIndex: -1,
+            height: height + 2,
+            width: width,
+            scrollTop: scrollTop // control scroll position with ctrl or shift key
+            , rowCount: R.length(list),
+            rowHeight: R.add(1)(_styles.height) // 1 is space between elements
+            , rowRenderer: function rowRenderer(_ref2) {
+              var index = _ref2.index,
+                  style = _ref2.style;
+
+              var itemId = R.nth(index, list);
+              var item = R.prop(itemId, indexedItemsById);
+              return _react2.default.createElement(_Item2.default, _extends({}, item, {
+                id: getHierarchicalId(item),
+                label: labelRenderer(item),
+                key: getHierarchicalId(item),
+                depth: getDepth(indexedItemsById)(item),
+                hasChild: R.has(itemId, groupedItemsByParentId),
+                hasChildrenOnLevel: getHasChildrenOnLevel(groupedItemsByParentId)(item),
+                changeList: R.has(itemId, expandedIds) ? function () {
+                  return collapse(index);
+                } : function () {
+                  return expand(index);
+                },
+                NavigateIcon: R.has(itemId, expandedIds) ? _ExpandLess2.default : _ExpandMore2.default,
+                isRtl: isRtl,
+                isDisabled: R.is(Function, disableAccessor) ? disableAccessor(item) : false,
+                eventsCallbacks: eventsCallbacks,
+                isSelected: isItemSelected(item, index),
+                HTMLRenderer: HTMLRenderer,
+                classes: classes,
+                labels: labels,
+                index: index,
+                style: style,
+                accessibility: accessibility,
+                ariaLabel: R.prop('navigateNext')(labels)
+              }));
+            }
+          });
+        }
+      )
+    ),
+    withExpandControl && _react2.default.createElement(
+      'div',
+      null,
+      _react2.default.createElement(
+        _Button2.default,
+        { onClick: collapseAll, color: 'primary' },
+        R.prop('colapseAll', labels)
+      ),
+      _react2.default.createElement(
+        _Button2.default,
+        { onClick: expandAll, color: 'primary' },
+        R.prop('expandAll', labels)
+      )
+    )
+  );
+};
+
+VirtualizedTree.propTypes = process.env.NODE_ENV !== "production" ? {
+  accessibility: _propTypes2.default.bool,
+  changeSelection: _propTypes2.default.func,
+  disableAccessor: _propTypes2.default.func,
+  getItemScope: _propTypes2.default.func,
+  HTMLRenderer: _propTypes2.default.func,
+  isRtl: _propTypes2.default.bool,
+  items: _propTypes2.default.array,
+  labels: _propTypes2.default.shape({
+    disableItemLabel: _propTypes2.default.string,
+    colapseAll: _propTypes2.default.string,
+    expandAll: _propTypes2.default.string
+  }),
+  labelRenderer: _propTypes2.default.func,
+  withExpandControl: _propTypes2.default.bool,
+  maxTreeHeight: _propTypes2.default.number
+} : {};
+
+exports.default = VirtualizedTree;

package/lib/VirtualizedTree/index.js

@@ -0,0 +1,16 @@
+'use strict';
+
+exports.__esModule = true;
+
+var _VirtualizedTree = require('./VirtualizedTree');
+
+Object.defineProperty(exports, 'default', {
+  enumerable: true,
+  get: function get() {
+    return _interopRequireDefault(_VirtualizedTree).default;
+  }
+});
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+module.exports = exports['default'];