@sis-cc/dotstatsuite-visions 10.5.1 → 10.6.0

package/es/AdvancedFilterDialog/AdvancedFilterDialog.js

@@ -6,26 +6,25 @@ import React, { useState, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import * as R from 'ramda';
 import cx from 'classnames';
-import { getDepth, getHierarchicalId } from '../VirtualizedTree/VirtualizedTree';
+import { getSingleDisableAccessor, getHierDisableAccessor, getScopeGetters } from '../VirtualizedTree/utils';
 import IconButton from '@material-ui/core/Button';
 import Dialog from '@material-ui/core/Dialog';
 import DialogTitle from '@material-ui/core/DialogTitle';
 import DialogContent from '@material-ui/core/DialogContent';
 import DialogActions from '@material-ui/core/DialogActions';
-import Card from '@material-ui/core/Card';
-import CardContent from '@material-ui/core/CardContent';
 import Paper from '@material-ui/core/Paper';
 import Grid from '@material-ui/core/Grid';
 import Typography from '@material-ui/core/Typography';
 import CloseIcon from '@material-ui/icons/Close';
-import HintIcon from '@material-ui/icons/EmojiObjects';
 import ExpandMoreIcon from '@material-ui/icons/ExpandMore';
 import ExpandLessIcon from '@material-ui/icons/ExpandLess';
 import Draggable from 'react-draggable';
+import SelectionModeMenu from './SelectionModeMenu';
 import { Button, Spotlight, VirtualizedTree } from '..';
 import { withExpansionTree } from '../VirtualizedTree/withExpansionTree';
 import { withSpotlight } from '../VirtualizedTree/withSpotlight';
 import { makeStyles } from '@material-ui/core/styles';
+
 import singleImg from './images/single-selection.png';
 import childrenImg from './images/children-selection.png';
 import branchImg from './images/branch-selection.png';
@@ -148,110 +147,6 @@ var useStyles = makeStyles(function (theme) {
   };
 });
 
-export var getScopeGetters = function getScopeGetters(items, groupedItems, disableAccessor) {
-  var indexed = R.indexBy(getHierarchicalId, items);
-  return {
-    all: function all() {
-      return R.reject(disableAccessor, items);
-    },
-    single: function single(item) {
-      return [item];
-    },
-    children: function children(item) {
-      var childItems = R.propOr([], getHierarchicalId(item), groupedItems);
-      return R.reject(disableAccessor, R.prepend(item, childItems));
-    },
-    branch: function branch(item) {
-      var reccurse = function reccurse(_item) {
-        var childItems = R.pipe(R.propOr([], getHierarchicalId(_item)), R.map(reccurse), R.unnest)(groupedItems);
-
-        return R.prepend(_item, childItems);
-      };
-      var items = reccurse(item);
-      return R.reject(disableAccessor, items);
-    },
-    level: function level(item) {
-      var depth = getDepth(indexed)(item);
-      return R.filter(function (it) {
-        return !disableAccessor(it) && getDepth(indexed)(it) === depth;
-      }, items);
-    }
-  };
-};
-
-var SelectionModeMenu = function SelectionModeMenu(_ref) {
-  var isOpen = _ref.isOpen,
-      onSelect = _ref.onSelect,
-      options = _ref.options,
-      selected = _ref.selected,
-      classes = _ref.classes,
-      isNarrow = _ref.isNarrow,
-      hint = _ref.hint,
-      maxHeight = _ref.maxHeight;
-
-  if (!isOpen) {
-    return null;
-  }
-  return React.createElement(
-    'div',
-    { className: isNarrow ? classes.narrowSelectionMenu : classes.selectionMenu },
-    React.createElement(
-      Card,
-      { style: { maxHeight: maxHeight - 5, overflow: 'auto' } },
-      React.createElement(
-        CardContent,
-        { className: classes.selectModeContainer },
-        R.map(function (_ref2) {
-          var value = _ref2.value,
-              label = _ref2.label,
-              img = _ref2.img;
-          return React.createElement(
-            Button,
-            {
-              className: classes.selectButton,
-              selected: value === selected,
-              key: value,
-              onClick: function onClick() {
-                return onSelect(value);
-              }
-            },
-            React.createElement(
-              Paper,
-              { className: classes.selectModeItem, key: value },
-              React.createElement(
-                Typography,
-                { variant: 'body2' },
-                label
-              ),
-              !R.isNil(img) && R.is(String, img) && React.createElement('img', { src: img, alt: value })
-            )
-          );
-        }, options)
-      ),
-      React.createElement(
-        'div',
-        { className: classes.hint },
-        React.createElement(HintIcon, null),
-        React.createElement(
-          Typography,
-          { variant: 'body2' },
-          hint
-        )
-      )
-    )
-  );
-};
-SelectionModeMenu.propTypes = process.env.NODE_ENV !== "production" ? {
-  classes: PropTypes.object,
-  hint: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
-  isNarrow: PropTypes.bool,
-  isOpen: PropTypes.bool,
-  onSelect: PropTypes.func,
-  options: PropTypes.array,
-  selected: PropTypes.string,
-  maxHeight: PropTypes.number
-} : {};
-
 var icons = {
   single: singleIcon,
   children: childrenIcon,
@@ -272,13 +167,15 @@ var AdvancedFilterDialog = function AdvancedFilterDialog(props) {
       isOpen = props.isOpen,
       isNarrow = props.isNarrow,
       labels = props.labels,
-      disableAccessor = props.disableAccessor,
+      _props$disableAccesso = props.disableAccessor,
+      disableAccessor = _props$disableAccesso === undefined ? R.always(false) : _props$disableAccesso,
       expandAll = props.expandAll,
       collapseAll = props.collapseAll,
       spotlight = props.spotlight,
       setSpotlight = props.setSpotlight,
       expandedIds = props.expandedIds,
-      rest = _objectWithoutProperties(props, ['id', 'title', 'items', 'labelRenderer', 'onClose', 'changeSelection', 'isOpen', 'isNarrow', 'labels', 'disableAccessor', 'expandAll', 'collapseAll', 'spotlight', 'setSpotlight', 'expandedIds']);
+      allItems = props.allItems,
+      rest = _objectWithoutProperties(props, ['id', 'title', 'items', 'labelRenderer', 'onClose', 'changeSelection', 'isOpen', 'isNarrow', 'labels', 'disableAccessor', 'expandAll', 'collapseAll', 'spotlight', 'setSpotlight', 'expandedIds', 'allItems']);
 
   var _useState = useState('single'),
       selectionMode = _useState[0],
@@ -334,10 +231,16 @@ var AdvancedFilterDialog = function AdvancedFilterDialog(props) {
     img: allImg
   }];
 
+  var _allGroupedItems = R.pipe(R.map(function (item) {
+    return _extends({}, item, {
+      isSelected: R.has(item.id, selection) ? !item.isSelected : !!item.isSelected
+    });
+  }), R.groupBy(R.propOr('#ROOT', 'parentId')))(allItems);
+  var _disableAccessor = selectionMode === 'single' || selectionMode === 'level' ? getSingleDisableAccessor(_allGroupedItems, disableAccessor) : getHierDisableAccessor(_allGroupedItems, groupedFilteredItems, disableAccessor);
   var isDisabled = function isDisabled(item) {
     return R.is(Function, disableAccessor) ? disableAccessor(item) : false;
   };
-  var scopeGetters = getScopeGetters(selectionItems, groupedFilteredItems, isDisabled);
+  var scopeGetter = R.prop(selectionMode, getScopeGetters);
 
   var onChangeSelection = function onChangeSelection(ids) {
     var nextSelection = R.reduce(function (acc, id) {
@@ -456,14 +359,15 @@ var AdvancedFilterDialog = function AdvancedFilterDialog(props) {
             maxHeight: listHeight
           }),
           React.createElement(VirtualizedTree, _extends({}, rest, {
-            disableAccessor: disableAccessor,
+            disableAccessor: _disableAccessor,
+            isGreyed: isDisabled,
             labels: labels,
             labelRenderer: labelRenderer,
             items: selectionItems,
             changeSelection: onChangeSelection,
             withExpandControl: true,
             treeHeight: listHeight,
-            getItemScope: R.prop(selectionMode, scopeGetters),
+            scopeGetter: scopeGetter,
             expandedIds: expandedIds
           }))
         )
@@ -546,7 +450,8 @@ AdvancedFilterDialog.propTypes = process.env.NODE_ENV !== "production" ? {
   collapseAll: PropTypes.func,
   spotlight: PropTypes.object,
   setSpotlight: PropTypes.func,
-  expandedIds: PropTypes.object
+  expandedIds: PropTypes.object,
+  allItems: PropTypes.array
 } : {};
 
 export default withSpotlight(withExpansionTree(AdvancedFilterDialog));

package/es/AdvancedFilterDialog/SelectionModeMenu.js

@@ -0,0 +1,85 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import * as R from 'ramda';
+import Card from '@material-ui/core/Card';
+import CardContent from '@material-ui/core/CardContent';
+import Paper from '@material-ui/core/Paper';
+import Typography from '@material-ui/core/Typography';
+import HintIcon from '@material-ui/icons/EmojiObjects';
+import { Button } from '..';
+
+var SelectionModeMenu = function SelectionModeMenu(_ref) {
+  var isOpen = _ref.isOpen,
+      onSelect = _ref.onSelect,
+      options = _ref.options,
+      selected = _ref.selected,
+      classes = _ref.classes,
+      isNarrow = _ref.isNarrow,
+      hint = _ref.hint,
+      maxHeight = _ref.maxHeight;
+
+  if (!isOpen) {
+    return null;
+  }
+  return React.createElement(
+    'div',
+    { className: isNarrow ? classes.narrowSelectionMenu : classes.selectionMenu },
+    React.createElement(
+      Card,
+      { style: { maxHeight: maxHeight - 5, overflow: 'auto' } },
+      React.createElement(
+        CardContent,
+        { className: classes.selectModeContainer },
+        R.map(function (_ref2) {
+          var value = _ref2.value,
+              label = _ref2.label,
+              img = _ref2.img;
+          return React.createElement(
+            Button,
+            {
+              className: classes.selectButton,
+              selected: value === selected,
+              key: value,
+              onClick: function onClick() {
+                return onSelect(value);
+              }
+            },
+            React.createElement(
+              Paper,
+              { className: classes.selectModeItem, key: value },
+              React.createElement(
+                Typography,
+                { variant: 'body2' },
+                label
+              ),
+              !R.isNil(img) && R.is(String, img) && React.createElement('img', { src: img, alt: value })
+            )
+          );
+        }, options)
+      ),
+      React.createElement(
+        'div',
+        { className: classes.hint },
+        React.createElement(HintIcon, null),
+        React.createElement(
+          Typography,
+          { variant: 'body2' },
+          hint
+        )
+      )
+    )
+  );
+};
+
+SelectionModeMenu.propTypes = process.env.NODE_ENV !== "production" ? {
+  classes: PropTypes.object,
+  hint: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
+  isNarrow: PropTypes.bool,
+  isOpen: PropTypes.bool,
+  onSelect: PropTypes.func,
+  options: PropTypes.array,
+  selected: PropTypes.string,
+  maxHeight: PropTypes.number
+} : {};
+
+export default SelectionModeMenu;

package/es/ExpansionPanel/ExpansionPanel.js

@@ -14,7 +14,7 @@ import { withBlank } from '../utils';
 import Tooltip from '../Tooltip';
 
 var CustomExpansionPanel = function CustomExpansionPanel(_ref) {
-  var _cx, _cx2;
+  var _cx, _cx2, _cx3, _cx4, _cx5;
 
   var id = _ref.id,
       topElementComponent = _ref.topElementComponent,
@@ -58,10 +58,10 @@ var CustomExpansionPanel = function CustomExpansionPanel(_ref) {
       AccordionSummary,
       {
         'data-testid': testId + '_panel',
-        className: classes.container,
+        className: cx(classes.container, (_cx2 = {}, _cx2[classes.moreFiltersContainer] = moreFilters, _cx2)),
         classes: {
-          content: cx(classes.content, classes.ellipsis),
-          expandIcon: classes.iconSummaryPanel
+          content: cx(classes.content, classes.ellipsis, (_cx3 = {}, _cx3[classes.moreFiltersContent] = moreFilters, _cx3)),
+          expandIcon: cx(classes.iconSummaryPanel, (_cx4 = {}, _cx4[classes.moreFiltersExpandIcon] = moreFilters, _cx4))
         },
         expandIcon: React.createElement(ExpandMoreIcon, null),
         'aria-controls': id,
@@ -110,7 +110,7 @@ var CustomExpansionPanel = function CustomExpansionPanel(_ref) {
     React.createElement(
       AccordionDetails,
       {
-        className: cx(classes.details, (_cx2 = {}, _cx2[classes.overflow] = overflow, _cx2[classes.height] = maxHeight, _cx2))
+        className: cx(classes.details, (_cx5 = {}, _cx5[classes.overflow] = overflow, _cx5[classes.height] = maxHeight, _cx5))
       },
       children
     )

package/es/ExpansionPanel/styles.js

@@ -13,6 +13,9 @@ export var useStyles = makeStyles(function (theme) {
       alignItems: 'flex-start',
       padding: theme.spacing(0)
     },
+    moreFiltersContainer: {
+      alignItems: 'flex-end'
+    },
     ellipsis: {
       whiteSpace: 'nowrap',
       overflow: 'hidden',
@@ -24,6 +27,9 @@ export var useStyles = makeStyles(function (theme) {
       alignContent: 'space-between',
       margin: theme.spacing(0.5, 0) + ' !important'
     },
+    moreFiltersContent: {
+      margin: theme.spacing(0, 0) + ' !important'
+    },
     details: {
       display: 'flex',
       padding: theme.spacing(0),
@@ -58,6 +64,9 @@ export var useStyles = makeStyles(function (theme) {
       padding: theme.spacing(0.5, 0.5),
       margin: theme.spacing(0, 1, 0, 0)
     },
+    moreFiltersExpandIcon: {
+      padding: theme.spacing(0, 0.5)
+    },
     fullWidth: {
       width: '100%'
     },
@@ -73,8 +82,8 @@ export var useStyles = makeStyles(function (theme) {
     title: {
       padding: 0,
       fontFamily: 'Roboto Slab, serif',
-      fontSize: '17px',
-      color: 'Body'
+      fontSize: 17,
+      color: theme.palette.grey['A700']
     }
   };
 });

package/es/HierarchicalFilter/HierarchicalFilter.js

@@ -8,13 +8,16 @@ import ZoomOutMapIcon from '@material-ui/icons/ZoomOutMap';
 import { ExpansionPanel, Tag as InternalTag, VerticalButton, Spotlight, VirtualizedTree, Tooltip } from '../';
 import { withExpansionTree } from '../VirtualizedTree/withExpansionTree';
 import { withSpotlight } from '../VirtualizedTree/withSpotlight';
+import { getSingleDisableAccessor } from '../VirtualizedTree/utils';
 import { useStyles } from '../ScopeList/styles';
 import { useTheme } from '@material-ui/core';
 import { getIsRtl } from '../utils';
 
-var getCounter = function getCounter(items, displayAccessor, tagAccessor) {
-  var count = R.pipe(R.filter(R.prop('isSelected')), R.map(R.prop('id')), R.uniq, R.length)(items);
-  var total = R.pipe(R.when(R.always(R.is(Function, displayAccessor)), R.filter(displayAccessor)), R.map(R.prop('id')), R.uniq, R.length)(items);
+var getCounter = function getCounter(items, disableAccessor, tagAccessor) {
+  var count = R.pipe(R.filter(function (item) {
+    return R.prop('isSelected', item) && !disableAccessor(item);
+  }), R.map(R.prop('id')), R.uniq, R.length)(items);
+  var total = R.pipe(R.when(R.always(R.is(Function, disableAccessor)), R.reject(disableAccessor)), R.map(R.prop('id')), R.uniq, R.length)(items);
   if (R.is(Function, tagAccessor)) {
     return tagAccessor(count, total);
   }
@@ -38,17 +41,24 @@ var HierarchicalFilter = function HierarchicalFilter(props) {
       label = props.label,
       labels = props.labels,
       tagAccessor = props.tagAccessor,
-      displayAccessor = props.displayAccessor,
       expandedIds = props.expandedIds,
       spotlight = props.spotlight,
       setSpotlight = props.setSpotlight,
-      hasSpotlight = props.hasSpotlight;
+      hasSpotlight = props.hasSpotlight,
+      _props$disableAccesso = props.disableAccessor,
+      disableAccessor = _props$disableAccesso === undefined ? R.always(false) : _props$disableAccesso,
+      allItems = props.allItems;
 
   var classes = useStyles({ accessibility: accessibility });
   var theme = useTheme();
   var isRtl = getIsRtl(theme);
   var Chip = R.isNil(Tag) ? InternalTag : Tag;
-  var tagValue = getCounter(items, displayAccessor, tagAccessor);
+  var _allGroupedItems = R.groupBy(R.propOr('#ROOT', 'parentId'), allItems);
+  var _disableAccessor = getSingleDisableAccessor(_allGroupedItems, disableAccessor);
+  var tagValue = getCounter(items, _disableAccessor, tagAccessor);
+  var isDisabled = function isDisabled(item) {
+    return R.is(Function, disableAccessor) ? disableAccessor(item) : false;
+  };
 
   var onSelect = function onSelect(values) {
     changeSelection(id, values);
@@ -108,7 +118,13 @@ var HierarchicalFilter = function HierarchicalFilter(props) {
         tagValue
       )
     }, expansionPanelProps),
-    React.createElement(VirtualizedTree, _extends({}, props, { items: items, changeSelection: onSelect, isRtl: isRtl }))
+    React.createElement(VirtualizedTree, _extends({}, props, {
+      items: items,
+      changeSelection: onSelect,
+      isRtl: isRtl,
+      disableAccessor: _disableAccessor,
+      isGreyed: isDisabled
+    }))
   );
 };
 
@@ -119,7 +135,6 @@ HierarchicalFilter.propTypes = process.env.NODE_ENV !== "production" ? {
   changeSelection: PropTypes.func,
   onChangeActivePanel: PropTypes.func,
   disableAccessor: PropTypes.func,
-  displayAccessor: PropTypes.func,
   HTMLRenderer: PropTypes.func,
   isRtl: PropTypes.bool,
   items: PropTypes.array,
@@ -137,7 +152,8 @@ HierarchicalFilter.propTypes = process.env.NODE_ENV !== "production" ? {
   expandedIds: PropTypes.object,
   spotlight: PropTypes.object,
   setSpotlight: PropTypes.func,
-  hasSpotlight: PropTypes.bool
+  hasSpotlight: PropTypes.bool,
+  allItems: PropTypes.array
 } : {};
 
 export default withSpotlight(withExpansionTree(HierarchicalFilter));

package/es/VirtualizedTree/Item.js

@@ -24,6 +24,7 @@ var Item = function Item(_ref) {
       description = _ref$description === undefined ? '' : _ref$description,
       isSelected = _ref.isSelected,
       isDisabled = _ref.isDisabled,
+      isGreyed = _ref.isGreyed,
       changeList = _ref.changeList,
       ariaLabel = _ref.ariaLabel,
       NavigateIcon = _ref.NavigateIcon,
@@ -31,7 +32,6 @@ var Item = function Item(_ref) {
       hasChildrenOnLevel = _ref.hasChildrenOnLevel,
       count = _ref.count,
       svgPath = _ref.svgPath,
-      testId = _ref.testId,
       style = _ref.style,
       isRtl = _ref.isRtl,
       accessibility = _ref.accessibility,
@@ -77,6 +77,7 @@ var Item = function Item(_ref) {
       React.createElement(NavigateIcon, null)
     ),
     React.createElement(ListItemText, _extends({
+      'data-testid': 'value_' + id,
       tabIndex: 0,
       'aria-label': isDisabled ? R.propOr('', 'disableItemLabel')(labels) + ' ' + label : label,
       'aria-pressed': isSelected,
@@ -103,13 +104,13 @@ var Item = function Item(_ref) {
             color: 'primary',
             className: cx(classes.labelIcon, (_cx3 = {}, _cx3[classes.disabledLabel] = isDisabled, _cx3))
           },
-          isSelected && R.not(isDisabled) ? React.createElement(CheckedBoxIcon, null) : React.createElement(CheckBoxIcon, null)
+          isSelected ? React.createElement(CheckedBoxIcon, null) : React.createElement(CheckBoxIcon, null)
         ),
         svgPath && React.createElement(
           SvgIcon,
           {
             color: 'primary',
-            className: cx(classes.labelIcon, (_cx4 = {}, _cx4[classes.disabledLabel] = isDisabled, _cx4))
+            className: cx(classes.labelIcon, (_cx4 = {}, _cx4[classes.disabledLabel] = isGreyed || isDisabled, _cx4))
           },
           React.createElement('path', { d: svgPath })
         ),
@@ -136,10 +137,9 @@ var Item = function Item(_ref) {
           React.createElement(
             Typography,
             {
-              'data-testid': testId + '_value_' + id,
               color: 'inherit',
               variant: 'body2',
-              className: cx(classes.label, (_cx5 = {}, _cx5[classes.disabledLabel] = isDisabled, _cx5[classes.tooltipNotice] = !R.isEmpty(description), _cx5))
+              className: cx(classes.label, (_cx5 = {}, _cx5[classes.disabledLabel] = isGreyed || isDisabled, _cx5[classes.tooltipNotice] = !R.isEmpty(description), _cx5))
             },
             label
           )
@@ -175,7 +175,6 @@ Item.propTypes = process.env.NODE_ENV !== "production" ? {
   svgPath: PropTypes.string,
   style: PropTypes.object,
   isRtl: PropTypes.bool,
-  testId: PropTypes.string,
   accessibility: PropTypes.bool,
   index: PropTypes.number,
   labelRenderer: PropTypes.func,
@@ -183,7 +182,8 @@ Item.propTypes = process.env.NODE_ENV !== "production" ? {
   hierarchicalId: PropTypes.string,
   labels: PropTypes.object,
   depth: PropTypes.number,
-  eventsCallbacks: PropTypes.func
+  eventsCallbacks: PropTypes.func,
+  isGreyed: PropTypes.bool
 } : {};
 
 export default Item;

package/es/VirtualizedTree/VirtualizedTree.js

@@ -11,14 +11,13 @@ import List from '@material-ui/core/List';
 import Item from './Item';
 import { useTheme } from '@material-ui/core';
 import { useStyles, height as rowHeight } from '../ScopeList/styles';
+import { getDepth, getHierarchicalId, isItemSelected as _isItemSelected, getDeprecatedIds, getDuplicates } from './utils';
 import { getIsRtl } from '../utils';
 
-var getSingleItemScope = function getSingleItemScope(item) {
-  return [item];
-};
-
-export var getHierarchicalId = function getHierarchicalId(item) {
-  return R.prop('hierarchicalId', item) || R.prop('id', item);
+var singleScopeGetter = function singleScopeGetter() {
+  return function (item) {
+    return [item];
+  };
 };
 
 export var getDisplayedIds = function getDisplayedIds(items, grouped, expanded) {
@@ -43,20 +42,13 @@ export var getHasChildrenOnLevel = function getHasChildrenOnLevel(groupedItems)
   };
 };
 
-export var 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,
+      _props$disableAccesso = props.disableAccessor,
+      disableAccessor = _props$disableAccesso === undefined ? R.always(false) : _props$disableAccesso,
+      _props$isGreyed = props.isGreyed,
+      isGreyed = _props$isGreyed === undefined ? R.always(false) : _props$isGreyed,
       HTMLRenderer = props.HTMLRenderer,
       items = props.items,
       labelRenderer = props.labelRenderer,
@@ -66,8 +58,8 @@ var VirtualizedTree = function VirtualizedTree(props) {
       collapse = props.collapse,
       _props$maxTreeHeight = props.maxTreeHeight,
       maxTreeHeight = _props$maxTreeHeight === undefined ? 250 : _props$maxTreeHeight,
-      _props$getItemScope = props.getItemScope,
-      getItemScope = _props$getItemScope === undefined ? getSingleItemScope : _props$getItemScope,
+      _props$scopeGetter = props.scopeGetter,
+      scopeGetter = _props$scopeGetter === undefined ? singleScopeGetter : _props$scopeGetter,
       _props$treeHeight = props.treeHeight,
       treeHeight = _props$treeHeight === undefined ? 0 : _props$treeHeight;
 
@@ -94,21 +86,41 @@ var VirtualizedTree = function VirtualizedTree(props) {
       setLastItemId = _useState5[1];
 
   var _useMemo = useMemo(function () {
-    var indexedItemsById = R.indexBy(getHierarchicalId, items);
-    var groupedItemsByParentId = R.groupBy(R.propOr('#ROOT', 'parentId'), items);
+    var refinedItems = R.map(function (item) {
+      return _extends({}, item, {
+        isSelected: _isItemSelected(selectIds)(item),
+        isGreyed: R.is(Function, isGreyed) ? isGreyed(item) : false,
+        isDisabled: R.is(Function, disableAccessor) ? disableAccessor(item, selectIds) : false
+      });
+    }, items);
+    var indexedItemsById = R.indexBy(getHierarchicalId, refinedItems);
+    var groupedItemsByParentId = R.groupBy(R.propOr('#ROOT', 'parentId'), refinedItems);
     return { indexedItemsById: indexedItemsById, groupedItemsByParentId: groupedItemsByParentId };
-  }, [items]),
+  }, [items, selectIds]),
       indexedItemsById = _useMemo.indexedItemsById,
       groupedItemsByParentId = _useMemo.groupedItemsByParentId;
 
   var list = useMemo(function () {
     return getDisplayedIds(R.propOr([], '#ROOT', groupedItemsByParentId), groupedItemsByParentId, expandedIds);
   }, [items, expandedIds]);
+
+  var getItemScope = scopeGetter({ indexedItemsById: indexedItemsById, groupedItemsByParentId: groupedItemsByParentId });
+
+  var isItemSelected = _isItemSelected(selectIds);
+
   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);
+    }), function (items) {
+      return getDuplicates(items, indexedItemsById);
+    }, R.map(getHierarchicalId))(item);
+
+    if (isItemSelected(item)) {
+      var deprecatedIds = getDeprecatedIds(ids, { indexedItemsById: indexedItemsById, groupedItemsByParentId: groupedItemsByParentId }, selectIds);
+      ids = R.concat(ids, deprecatedIds);
+    }
+
     if (R.has(id, selectIds)) {
       setSelectIds(R.omit(ids, selectIds));
     } else {
@@ -212,12 +224,6 @@ var VirtualizedTree = function VirtualizedTree(props) {
       apply();
     }
   };
-  var isItemSelected = function isItemSelected(item) {
-    if (!R.isEmpty(selectIds) && R.has(getHierarchicalId(item), selectIds)) {
-      return !item.isSelected;
-    }
-    return !!item.isSelected;
-  };
   var ref = useRef();
   var classes = useStyles();
 
@@ -298,9 +304,7 @@ var VirtualizedTree = function VirtualizedTree(props) {
               },
               NavigateIcon: R.has(itemId, expandedIds) ? ExpandLessIcon : ExpandMoreIcon,
               isRtl: isRtl,
-              isDisabled: R.is(Function, disableAccessor) ? disableAccessor(item) : false,
               eventsCallbacks: eventsCallbacks,
-              isSelected: isItemSelected(item),
               HTMLRenderer: HTMLRenderer,
               classes: classes,
               labels: labels,
@@ -326,9 +330,7 @@ VirtualizedTree.propTypes = process.env.NODE_ENV !== "production" ? {
   isRtl: PropTypes.bool,
   items: PropTypes.array,
   labels: PropTypes.shape({
-    disableItemLabel: PropTypes.string,
-    colapseAll: PropTypes.string,
-    expandAll: PropTypes.string
+    disableItemLabel: PropTypes.string
   }),
   labelRenderer: PropTypes.func,
   withExpandControl: PropTypes.bool,
@@ -336,7 +338,9 @@ VirtualizedTree.propTypes = process.env.NODE_ENV !== "production" ? {
   expandedIds: PropTypes.object,
   expand: PropTypes.func,
   collapse: PropTypes.func,
-  treeHeight: PropTypes.number
+  treeHeight: PropTypes.number,
+  isGreyed: PropTypes.func,
+  scopeGetter: PropTypes.func
 } : {};
 
 export default VirtualizedTree;