@sis-cc/dotstatsuite-visions 7.20.9 → 7.20.10

package/es/AdvancedFilterDialog/AdvancedFilterDialog.js

@@ -2,7 +2,7 @@ var _extends = Object.assign || function (target) { for (var i = 1; i < argument
 
 function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
 
-import React, { useEffect, useState, Fragment } from 'react';
+import React, { useState, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import * as R from 'ramda';
 import cx from 'classnames';
@@ -23,6 +23,7 @@ import HintIcon from '@material-ui/icons/EmojiObjects';
 import Draggable from 'react-draggable';
 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';
@@ -268,67 +269,41 @@ var AdvancedFilterDialog = function AdvancedFilterDialog(props) {
       disableAccessor = props.disableAccessor,
       expandAll = props.expandAll,
       collapseAll = props.collapseAll,
-      defaultSpotlight = props.defaultSpotlight,
+      spotlight = props.spotlight,
+      setSpotlight = props.setSpotlight,
       expandedIds = props.expandedIds,
-      rest = _objectWithoutProperties(props, ['id', 'title', 'items', 'labelRenderer', 'onClose', 'changeSelection', 'isOpen', 'isNarrow', 'labels', 'disableAccessor', 'expandAll', 'collapseAll', 'defaultSpotlight', 'expandedIds']);
+      rest = _objectWithoutProperties(props, ['id', 'title', 'items', 'labelRenderer', 'onClose', 'changeSelection', 'isOpen', 'isNarrow', 'labels', 'disableAccessor', 'expandAll', 'collapseAll', 'spotlight', 'setSpotlight', 'expandedIds']);
 
-  var _useState = useState({ term: '' }),
-      term = _useState[0].term,
-      setSpotlight = _useState[1];
+  var _useState = useState('single'),
+      selectionMode = _useState[0],
+      setSelectionMode = _useState[1];
 
-  var _useState2 = useState('single'),
-      selectionMode = _useState2[0],
-      setSelectionMode = _useState2[1];
+  var _useState2 = useState(false),
+      isOpenSelectionMenu = _useState2[0],
+      setIsOpenSelectionMenu = _useState2[1];
 
-  var _useState3 = useState(false),
-      isOpenSelectionMenu = _useState3[0],
-      setIsOpenSelectionMenu = _useState3[1];
-
-  var _useState4 = useState({}),
-      selection = _useState4[0],
-      setSelection = _useState4[1];
+  var _useState3 = useState({}),
+      selection = _useState3[0],
+      setSelection = _useState3[1];
 
   var classes = useStyles();
 
-  var _useState5 = useState(0),
-      height = _useState5[0],
-      setHeight = _useState5[1];
+  var _useState4 = useState(0),
+      height = _useState4[0],
+      setHeight = _useState4[1];
 
   var measureRef = React.useCallback(function (node) {
     if (node !== null) {
       setHeight(node.getBoundingClientRect().height * 75 / 100);
     }
   });
-  useEffect(function () {
-    if (!R.isNil(defaultSpotlight) && !R.isEmpty(defaultSpotlight)) {
-      setSpotlight(defaultSpotlight);
-    }
-  }, [defaultSpotlight]);
 
   var listHeight = height - 170;
-
-  var groupedItemsByParentId = R.groupBy(R.propOr('#ROOT', 'parentId'), items);
-
-  var recurse = R.filter(function (item) {
-    var isValidItem = R.isEmpty(term) || R.isNil(term) ? true : R.includes(R.toLower(term), R.toLower(labelRenderer(item)));
-    if (isValidItem) {
-      return true;
-    }
-    if (R.has(getHierarchicalId(item), groupedItemsByParentId)) {
-      var filtered = recurse(R.prop(getHierarchicalId(item), groupedItemsByParentId));
-      if (!R.isEmpty(filtered)) {
-        return true;
-      }
-    }
-    return false;
-  });
-
-  var filteredItems = R.isEmpty(term) || R.isNil(term) ? items : recurse(items);
   var selectionItems = R.map(function (item) {
     return _extends({}, item, {
       isSelected: R.has(item.id, selection) ? !item.isSelected : !!item.isSelected
     });
-  }, filteredItems);
+  }, items);
   var groupedFilteredItems = R.groupBy(R.propOr('#ROOT', 'parentId'), selectionItems);
 
   var selectionOptions = [{
@@ -366,7 +341,7 @@ var AdvancedFilterDialog = function AdvancedFilterDialog(props) {
   };
 
   var handleSubmit = function handleSubmit() {
-    changeSelection(id, R.values(selection), { expandedIds: expandedIds, spotlight: { term: term } });
+    changeSelection(id, R.values(selection), { expandedIds: expandedIds, spotlight: spotlight });
     setSelection({});
     setSpotlight({ term: '' });
   };
@@ -415,7 +390,7 @@ var AdvancedFilterDialog = function AdvancedFilterDialog(props) {
             React.createElement(Spotlight, {
               hasClearAll: true,
               placeholder: R.prop('placeholder', labels),
-              term: term,
+              term: spotlight.term,
               hasCommit: false,
               spotlight: { fields: {} },
               action: setSpotlight
@@ -557,8 +532,9 @@ AdvancedFilterDialog.propTypes = process.env.NODE_ENV !== "production" ? {
   title: PropTypes.string,
   expandAll: PropTypes.func,
   collapseAll: PropTypes.func,
-  defaultSpotlight: PropTypes.object,
+  spotlight: PropTypes.object,
+  setSpotlight: PropTypes.func,
   expandedIds: PropTypes.object
 } : {};
 
-export default withExpansionTree(AdvancedFilterDialog);
+export default withSpotlight(withExpansionTree(AdvancedFilterDialog));

package/es/HierarchicalFilter/HierarchicalFilter.js

@@ -1,16 +1,16 @@
 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; };
 
-import React, { useState, Fragment } from 'react';
+import React, { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import * as R from 'ramda';
 import Container from '@material-ui/core/Container';
 import PlaylistAddCheckIcon from '@material-ui/icons/PlaylistAddCheck';
 import { ExpansionPanel, Tag as InternalTag, VerticalButton, Spotlight, VirtualizedTree } from '../';
 import { withExpansionTree } from '../VirtualizedTree/withExpansionTree';
+import { withSpotlight } from '../VirtualizedTree/withSpotlight';
 import { useStyles } from '../ScopeList/styles';
 import { useTheme } from '@material-ui/core';
 import { getIsRtl } from '../utils';
-import { useEffect } from 'react';
 
 var getCounter = function getCounter(items, displayAccessor, tagAccessor) {
   var count = R.pipe(R.filter(R.prop('isSelected')), R.length)(items);
@@ -40,48 +40,23 @@ var HierarchicalFilter = function HierarchicalFilter(props) {
       tagAccessor = props.tagAccessor,
       displayAccessor = props.displayAccessor,
       expandedIds = props.expandedIds,
-      defaultSpotlight = props.defaultSpotlight;
+      spotlight = props.spotlight,
+      setSpotlight = props.setSpotlight,
+      hasSpotlight = props.hasSpotlight;
 
-  var _useState = useState({ term: '' }),
-      term = _useState[0].term,
-      setSpotlight = _useState[1];
-
-  useEffect(function () {
-    if (!R.isNil(defaultSpotlight) && !R.isEmpty(defaultSpotlight)) {
-      setSpotlight(defaultSpotlight);
-    }
-  }, [defaultSpotlight]);
   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 groupedItemsByParentId = R.groupBy(R.propOr('#ROOT', 'parentId'), items);
-  var hasSpotligt = R.length(items) >= 8;
-  var recurse = R.filter(function (item) {
-    var isValidItem = R.isEmpty(term) || R.isNil(term) ? true : R.includes(R.toLower(term), R.toLower(labelRenderer(item)));
-    if (isValidItem) {
-      return true;
-    }
-    if (R.has(item.id, groupedItemsByParentId)) {
-      var filtered = recurse(R.prop(item.id, groupedItemsByParentId));
-      if (!R.isEmpty(filtered)) {
-        return true;
-      }
-    }
-    return false;
-  });
-
-  var filteredItems = R.isEmpty(term) || R.isNil(term) ? items : recurse(items);
 
   var onSelect = function onSelect(values) {
     changeSelection(id, values);
   };
 
   var onAdvancedToggle = function onAdvancedToggle() {
-    toggleBulk({ expandedIds: expandedIds, spotlight: { term: term } });
+    toggleBulk({ expandedIds: expandedIds, spotlight: spotlight });
   };
-
   return React.createElement(
     ExpansionPanel,
     _extends({
@@ -97,17 +72,17 @@ var HierarchicalFilter = function HierarchicalFilter(props) {
         React.createElement(
           Container,
           { disableGutters: true, className: classes.spotlightContainer },
-          hasSpotligt && React.createElement(Spotlight, {
+          hasSpotlight && React.createElement(Spotlight, {
             className: { container: classes.middle },
             fullWidth: true,
             hasClearAll: true,
             placeholder: R.prop('placeholder', labels),
-            term: term,
+            term: spotlight.term,
             hasCommit: false,
             spotlight: { fields: {} },
             action: setSpotlight
           }),
-          R.is(Function, toggleBulk) && hasSpotligt && React.createElement(
+          R.is(Function, toggleBulk) && hasSpotlight && React.createElement(
             VerticalButton,
             {
               'aria-label': R.prop('advancedSelection')(labels),
@@ -122,10 +97,9 @@ var HierarchicalFilter = function HierarchicalFilter(props) {
         Chip,
         { items: items },
         tagValue
-      ),
-      isBlank: R.isEmpty(items)
+      )
     }, expansionPanelProps),
-    React.createElement(VirtualizedTree, _extends({}, props, { items: filteredItems, changeSelection: onSelect, isRtl: isRtl }))
+    React.createElement(VirtualizedTree, _extends({}, props, { items: items, changeSelection: onSelect, isRtl: isRtl }))
   );
 };
 
@@ -152,7 +126,9 @@ HierarchicalFilter.propTypes = process.env.NODE_ENV !== "production" ? {
   toggleBulk: PropTypes.func,
   tagAccessor: PropTypes.func,
   expandedIds: PropTypes.object,
-  defaultSpotlight: PropTypes.object
+  spotlight: PropTypes.object,
+  setSpotlight: PropTypes.func,
+  hasSpotlight: PropTypes.bool
 } : {};
 
-export default withExpansionTree(HierarchicalFilter);
+export default withSpotlight(withExpansionTree(HierarchicalFilter));

package/es/VirtualizedTree/VirtualizedTree.js

@@ -87,6 +87,10 @@ var VirtualizedTree = function VirtualizedTree(props) {
       isMouseDown = _useState4[0],
       setIsMouseDown = _useState4[1];
 
+  var _useState5 = useState(null),
+      lastItemId = _useState5[0],
+      setLastItemId = _useState5[1];
+
   var _useMemo = useMemo(function () {
     var indexedItemsById = R.indexBy(getHierarchicalId, items);
     var groupedItemsByParentId = R.groupBy(R.propOr('#ROOT', 'parentId'), items);
@@ -107,13 +111,33 @@ var VirtualizedTree = function VirtualizedTree(props) {
       setSelectIds(R.omit(ids, selectIds));
     } else {
       setSelectIds(_extends({}, selectIds, R.indexBy(R.identity, ids)));
+      setLastItemId(id);
     }
   };
   var shiftSelect = function shiftSelect(index) {
+    var selectRange = function selectRange(indexes, isSelected) {
+      var _selectIds = R.pipe(R.slice(Math.min.apply(Math, indexes), Math.max.apply(Math, indexes) + 1), function (ids) {
+        return R.props(ids, indexedItemsById);
+      }, 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);
+    };
     if (R.isEmpty(shiftIndexes)) {
       var item = R.pipe(R.nth(index), function (id) {
         return R.prop(id, indexedItemsById);
       })(list);
+      if (!R.isNil(lastItemId)) {
+        var lastItem = R.prop(lastItemId, indexedItemsById);
+        var lastItemIndex = R.findIndex(function (v) {
+          return v === lastItem.id;
+        }, list);
+        if (lastItem.isSelected !== item.isSelected && lastItemIndex !== -1) {
+          selectRange([lastItemIndex, index], item.isSelected);
+          return;
+        }
+      }
       var ids = R.pipe(getItemScope, R.filter(function (v) {
         return v.isSelected === item.isSelected;
       }), R.map(getHierarchicalId), R.indexBy(R.identity))(item);
@@ -123,18 +147,10 @@ var VirtualizedTree = function VirtualizedTree(props) {
       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 firstItem = R.pipe(R.nth(R.head(shiftIndexes)), function (id) {
+        return R.prop(id, indexedItemsById);
+      })(list);
+      selectRange([R.head(shiftIndexes), index], firstItem.isSelected);
     }
   };
   var apply = function apply() {
@@ -151,6 +167,9 @@ var VirtualizedTree = function VirtualizedTree(props) {
     return {
       onMouseUp: isMouseDown ? function () {
         apply();
+        if (!R.isEmpty(selectIds)) {
+          setLastItemId(id);
+        }
       } : null,
       onMouseDown: function onMouseDown(e) {
         if (e.ctrlKey || e.shiftKey) {
@@ -182,10 +201,7 @@ var VirtualizedTree = function VirtualizedTree(props) {
       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;
-    }
+  var isItemSelected = function isItemSelected(item) {
     if (!R.isEmpty(selectIds) && R.has(getHierarchicalId(item), selectIds)) {
       return !item.isSelected;
     }
@@ -273,7 +289,7 @@ var VirtualizedTree = function VirtualizedTree(props) {
               isRtl: isRtl,
               isDisabled: R.is(Function, disableAccessor) ? disableAccessor(item) : false,
               eventsCallbacks: eventsCallbacks,
-              isSelected: isItemSelected(item, index),
+              isSelected: isItemSelected(item),
               HTMLRenderer: HTMLRenderer,
               classes: classes,
               labels: labels,

package/es/VirtualizedTree/withExpansionTree.js

@@ -17,14 +17,24 @@ var withExpansionTree = function withExpansionTree(Component) {
         expandedIds = _useState[0],
         setExpandedIds = _useState[1];
 
+    var _useState2 = useState([]),
+        itemsIds = _useState2[0],
+        setItemsIds = _useState2[1];
+
+    useEffect(function () {
+      var ids = R.map(getHierarchicalId, items);
+      if (!R.isEmpty(R.symmetricDifference(ids, itemsIds))) setItemsIds(ids);
+    }, [items]);
+
+    useEffect(function () {
+      setExpandedIds(R.indexBy(R.identity, itemsIds));
+    }, [itemsIds]);
+
     useEffect(function () {
       if (!R.isNil(defaultExpandedIds)) {
         setExpandedIds(defaultExpandedIds);
-      } else {
-        var ids = R.pipe(R.map(getHierarchicalId), R.indexBy(R.identity))(items);
-        setExpandedIds(ids);
       }
-    }, [items, defaultExpandedIds]);
+    }, [defaultExpandedIds]);
 
     var expand = function expand(id) {
       setExpandedIds(R.assoc(id, id, expandedIds));
@@ -35,8 +45,7 @@ var withExpansionTree = function withExpansionTree(Component) {
     };
 
     var expandAll = function expandAll() {
-      var ids = R.pipe(R.map(getHierarchicalId), R.indexBy(R.identity))(items);
-      setExpandedIds(ids);
+      setExpandedIds(R.indexBy(R.identity, itemsIds));
     };
 
     var collapseAll = function collapseAll() {

package/es/VirtualizedTree/withSpotlight.js

@@ -0,0 +1,66 @@
+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; };
+
+function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+
+/* eslint react/prop-types: 0 */
+import * as R from 'ramda';
+import React, { useEffect, useMemo, useState } from 'react';
+import { getHierarchicalId } from './VirtualizedTree';
+
+export var spotlightFilter = function spotlightFilter(term) {
+  var labelRenderer = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : R.prop('label');
+  return function (items) {
+    if (R.isEmpty(term) || R.isNil(term)) {
+      return items;
+    }
+
+    var groupedItemsByParentId = R.groupBy(R.propOr('#ROOT', 'parentId'), items);
+    var recurse = R.filter(function (item) {
+      var isValidItem = R.isEmpty(term) || R.isNil(term) ? true : R.includes(R.toLower(term), R.toLower(labelRenderer(item)));
+      if (isValidItem) {
+        return true;
+      }
+      if (R.has(getHierarchicalId(item), groupedItemsByParentId)) {
+        var filtered = recurse(R.prop(getHierarchicalId(item), groupedItemsByParentId));
+        if (!R.isEmpty(filtered)) {
+          return true;
+        }
+      }
+      return false;
+    });
+
+    return recurse(items);
+  };
+};
+
+var withSpotlight = function withSpotlight(Component) {
+  return function (_ref) {
+    var items = _ref.items,
+        defaultSpotlight = _ref.defaultSpotlight,
+        labelRenderer = _ref.labelRenderer,
+        rest = _objectWithoutProperties(_ref, ['items', 'defaultSpotlight', 'labelRenderer']);
+
+    var _useState = useState({ term: '' }),
+        term = _useState[0].term,
+        setSpotlight = _useState[1];
+
+    useEffect(function () {
+      if (!R.isNil(defaultSpotlight) && !R.isEmpty(defaultSpotlight)) {
+        setSpotlight(defaultSpotlight);
+      }
+    }, [defaultSpotlight]);
+
+    var filteredItems = useMemo(function () {
+      return spotlightFilter(term, labelRenderer)(items);
+    }, [term, items]);
+
+    return React.createElement(Component, _extends({}, rest, {
+      items: filteredItems,
+      labelRenderer: labelRenderer,
+      hasSpotlight: R.length(items) >= 8,
+      spotlight: { term: term },
+      setSpotlight: setSpotlight
+    }));
+  };
+};
+export { withSpotlight };

package/lib/AdvancedFilterDialog/AdvancedFilterDialog.js

@@ -83,6 +83,8 @@ var _ = require('..');
 
 var _withExpansionTree = require('../VirtualizedTree/withExpansionTree');
 
+var _withSpotlight = require('../VirtualizedTree/withSpotlight');
+
 var _styles = require('@material-ui/core/styles');
 
 var _singleSelection = require('./images/single-selection.png');
@@ -363,67 +365,41 @@ var AdvancedFilterDialog = function AdvancedFilterDialog(props) {
       disableAccessor = props.disableAccessor,
       expandAll = props.expandAll,
       collapseAll = props.collapseAll,
-      defaultSpotlight = props.defaultSpotlight,
+      spotlight = props.spotlight,
+      setSpotlight = props.setSpotlight,
       expandedIds = props.expandedIds,
-      rest = _objectWithoutProperties(props, ['id', 'title', 'items', 'labelRenderer', 'onClose', 'changeSelection', 'isOpen', 'isNarrow', 'labels', 'disableAccessor', 'expandAll', 'collapseAll', 'defaultSpotlight', 'expandedIds']);
-
-  var _useState = (0, _react.useState)({ term: '' }),
-      term = _useState[0].term,
-      setSpotlight = _useState[1];
+      rest = _objectWithoutProperties(props, ['id', 'title', 'items', 'labelRenderer', 'onClose', 'changeSelection', 'isOpen', 'isNarrow', 'labels', 'disableAccessor', 'expandAll', 'collapseAll', 'spotlight', 'setSpotlight', 'expandedIds']);
 
-  var _useState2 = (0, _react.useState)('single'),
-      selectionMode = _useState2[0],
-      setSelectionMode = _useState2[1];
+  var _useState = (0, _react.useState)('single'),
+      selectionMode = _useState[0],
+      setSelectionMode = _useState[1];
 
-  var _useState3 = (0, _react.useState)(false),
-      isOpenSelectionMenu = _useState3[0],
-      setIsOpenSelectionMenu = _useState3[1];
+  var _useState2 = (0, _react.useState)(false),
+      isOpenSelectionMenu = _useState2[0],
+      setIsOpenSelectionMenu = _useState2[1];
 
-  var _useState4 = (0, _react.useState)({}),
-      selection = _useState4[0],
-      setSelection = _useState4[1];
+  var _useState3 = (0, _react.useState)({}),
+      selection = _useState3[0],
+      setSelection = _useState3[1];
 
   var classes = useStyles();
 
-  var _useState5 = (0, _react.useState)(0),
-      height = _useState5[0],
-      setHeight = _useState5[1];
+  var _useState4 = (0, _react.useState)(0),
+      height = _useState4[0],
+      setHeight = _useState4[1];
 
   var measureRef = _react2.default.useCallback(function (node) {
     if (node !== null) {
       setHeight(node.getBoundingClientRect().height * 75 / 100);
     }
   });
-  (0, _react.useEffect)(function () {
-    if (!R.isNil(defaultSpotlight) && !R.isEmpty(defaultSpotlight)) {
-      setSpotlight(defaultSpotlight);
-    }
-  }, [defaultSpotlight]);
 
   var listHeight = height - 170;
-
-  var groupedItemsByParentId = R.groupBy(R.propOr('#ROOT', 'parentId'), items);
-
-  var recurse = R.filter(function (item) {
-    var isValidItem = R.isEmpty(term) || R.isNil(term) ? true : R.includes(R.toLower(term), R.toLower(labelRenderer(item)));
-    if (isValidItem) {
-      return true;
-    }
-    if (R.has((0, _VirtualizedTree.getHierarchicalId)(item), groupedItemsByParentId)) {
-      var filtered = recurse(R.prop((0, _VirtualizedTree.getHierarchicalId)(item), groupedItemsByParentId));
-      if (!R.isEmpty(filtered)) {
-        return true;
-      }
-    }
-    return false;
-  });
-
-  var filteredItems = R.isEmpty(term) || R.isNil(term) ? items : recurse(items);
   var selectionItems = R.map(function (item) {
     return _extends({}, item, {
       isSelected: R.has(item.id, selection) ? !item.isSelected : !!item.isSelected
     });
-  }, filteredItems);
+  }, items);
   var groupedFilteredItems = R.groupBy(R.propOr('#ROOT', 'parentId'), selectionItems);
 
   var selectionOptions = [{
@@ -461,7 +437,7 @@ var AdvancedFilterDialog = function AdvancedFilterDialog(props) {
   };
 
   var handleSubmit = function handleSubmit() {
-    changeSelection(id, R.values(selection), { expandedIds: expandedIds, spotlight: { term: term } });
+    changeSelection(id, R.values(selection), { expandedIds: expandedIds, spotlight: spotlight });
     setSelection({});
     setSpotlight({ term: '' });
   };
@@ -510,7 +486,7 @@ var AdvancedFilterDialog = function AdvancedFilterDialog(props) {
             _react2.default.createElement(_.Spotlight, {
               hasClearAll: true,
               placeholder: R.prop('placeholder', labels),
-              term: term,
+              term: spotlight.term,
               hasCommit: false,
               spotlight: { fields: {} },
               action: setSpotlight
@@ -652,8 +628,9 @@ AdvancedFilterDialog.propTypes = process.env.NODE_ENV !== "production" ? {
   title: _propTypes2.default.string,
   expandAll: _propTypes2.default.func,
   collapseAll: _propTypes2.default.func,
-  defaultSpotlight: _propTypes2.default.object,
+  spotlight: _propTypes2.default.object,
+  setSpotlight: _propTypes2.default.func,
   expandedIds: _propTypes2.default.object
 } : {};
 
-exports.default = (0, _withExpansionTree.withExpansionTree)(AdvancedFilterDialog);
+exports.default = (0, _withSpotlight.withSpotlight)((0, _withExpansionTree.withExpansionTree)(AdvancedFilterDialog));

package/lib/HierarchicalFilter/HierarchicalFilter.js

@@ -28,6 +28,8 @@ var _ = require('../');
 
 var _withExpansionTree = require('../VirtualizedTree/withExpansionTree');
 
+var _withSpotlight = require('../VirtualizedTree/withSpotlight');
+
 var _styles = require('../ScopeList/styles');
 
 var _core = require('@material-ui/core');
@@ -66,48 +68,23 @@ var HierarchicalFilter = function HierarchicalFilter(props) {
       tagAccessor = props.tagAccessor,
       displayAccessor = props.displayAccessor,
       expandedIds = props.expandedIds,
-      defaultSpotlight = props.defaultSpotlight;
-
-  var _useState = (0, _react.useState)({ term: '' }),
-      term = _useState[0].term,
-      setSpotlight = _useState[1];
+      spotlight = props.spotlight,
+      setSpotlight = props.setSpotlight,
+      hasSpotlight = props.hasSpotlight;
 
-  (0, _react.useEffect)(function () {
-    if (!R.isNil(defaultSpotlight) && !R.isEmpty(defaultSpotlight)) {
-      setSpotlight(defaultSpotlight);
-    }
-  }, [defaultSpotlight]);
   var classes = (0, _styles.useStyles)({ accessibility: accessibility });
   var theme = (0, _core.useTheme)();
   var isRtl = (0, _utils.getIsRtl)(theme);
   var Chip = R.isNil(Tag) ? _.Tag : Tag;
   var tagValue = getCounter(items, displayAccessor, tagAccessor);
-  var groupedItemsByParentId = R.groupBy(R.propOr('#ROOT', 'parentId'), items);
-  var hasSpotligt = R.length(items) >= 8;
-  var recurse = R.filter(function (item) {
-    var isValidItem = R.isEmpty(term) || R.isNil(term) ? true : R.includes(R.toLower(term), R.toLower(labelRenderer(item)));
-    if (isValidItem) {
-      return true;
-    }
-    if (R.has(item.id, groupedItemsByParentId)) {
-      var filtered = recurse(R.prop(item.id, groupedItemsByParentId));
-      if (!R.isEmpty(filtered)) {
-        return true;
-      }
-    }
-    return false;
-  });
-
-  var filteredItems = R.isEmpty(term) || R.isNil(term) ? items : recurse(items);
 
   var onSelect = function onSelect(values) {
     changeSelection(id, values);
   };
 
   var onAdvancedToggle = function onAdvancedToggle() {
-    toggleBulk({ expandedIds: expandedIds, spotlight: { term: term } });
+    toggleBulk({ expandedIds: expandedIds, spotlight: spotlight });
   };
-
   return _react2.default.createElement(
     _.ExpansionPanel,
     _extends({
@@ -123,17 +100,17 @@ var HierarchicalFilter = function HierarchicalFilter(props) {
         _react2.default.createElement(
           _Container2.default,
           { disableGutters: true, className: classes.spotlightContainer },
-          hasSpotligt && _react2.default.createElement(_.Spotlight, {
+          hasSpotlight && _react2.default.createElement(_.Spotlight, {
             className: { container: classes.middle },
             fullWidth: true,
             hasClearAll: true,
             placeholder: R.prop('placeholder', labels),
-            term: term,
+            term: spotlight.term,
             hasCommit: false,
             spotlight: { fields: {} },
             action: setSpotlight
           }),
-          R.is(Function, toggleBulk) && hasSpotligt && _react2.default.createElement(
+          R.is(Function, toggleBulk) && hasSpotlight && _react2.default.createElement(
             _.VerticalButton,
             {
               'aria-label': R.prop('advancedSelection')(labels),
@@ -148,10 +125,9 @@ var HierarchicalFilter = function HierarchicalFilter(props) {
         Chip,
         { items: items },
         tagValue
-      ),
-      isBlank: R.isEmpty(items)
+      )
     }, expansionPanelProps),
-    _react2.default.createElement(_.VirtualizedTree, _extends({}, props, { items: filteredItems, changeSelection: onSelect, isRtl: isRtl }))
+    _react2.default.createElement(_.VirtualizedTree, _extends({}, props, { items: items, changeSelection: onSelect, isRtl: isRtl }))
   );
 };
 
@@ -178,8 +154,10 @@ HierarchicalFilter.propTypes = process.env.NODE_ENV !== "production" ? {
   toggleBulk: _propTypes2.default.func,
   tagAccessor: _propTypes2.default.func,
   expandedIds: _propTypes2.default.object,
-  defaultSpotlight: _propTypes2.default.object
+  spotlight: _propTypes2.default.object,
+  setSpotlight: _propTypes2.default.func,
+  hasSpotlight: _propTypes2.default.bool
 } : {};
 
-exports.default = (0, _withExpansionTree.withExpansionTree)(HierarchicalFilter);
+exports.default = (0, _withSpotlight.withSpotlight)((0, _withExpansionTree.withExpansionTree)(HierarchicalFilter));
 module.exports = exports['default'];

package/lib/VirtualizedTree/VirtualizedTree.js

@@ -125,6 +125,10 @@ var VirtualizedTree = function VirtualizedTree(props) {
       isMouseDown = _useState4[0],
       setIsMouseDown = _useState4[1];
 
+  var _useState5 = (0, _react.useState)(null),
+      lastItemId = _useState5[0],
+      setLastItemId = _useState5[1];
+
   var _useMemo = (0, _react.useMemo)(function () {
     var indexedItemsById = R.indexBy(getHierarchicalId, items);
     var groupedItemsByParentId = R.groupBy(R.propOr('#ROOT', 'parentId'), items);
@@ -145,13 +149,33 @@ var VirtualizedTree = function VirtualizedTree(props) {
       setSelectIds(R.omit(ids, selectIds));
     } else {
       setSelectIds(_extends({}, selectIds, R.indexBy(R.identity, ids)));
+      setLastItemId(id);
     }
   };
   var shiftSelect = function shiftSelect(index) {
+    var selectRange = function selectRange(indexes, isSelected) {
+      var _selectIds = R.pipe(R.slice(Math.min.apply(Math, indexes), Math.max.apply(Math, indexes) + 1), function (ids) {
+        return R.props(ids, indexedItemsById);
+      }, 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);
+    };
     if (R.isEmpty(shiftIndexes)) {
       var item = R.pipe(R.nth(index), function (id) {
         return R.prop(id, indexedItemsById);
       })(list);
+      if (!R.isNil(lastItemId)) {
+        var lastItem = R.prop(lastItemId, indexedItemsById);
+        var lastItemIndex = R.findIndex(function (v) {
+          return v === lastItem.id;
+        }, list);
+        if (lastItem.isSelected !== item.isSelected && lastItemIndex !== -1) {
+          selectRange([lastItemIndex, index], item.isSelected);
+          return;
+        }
+      }
       var ids = R.pipe(getItemScope, R.filter(function (v) {
         return v.isSelected === item.isSelected;
       }), R.map(getHierarchicalId), R.indexBy(R.identity))(item);
@@ -161,18 +185,10 @@ var VirtualizedTree = function VirtualizedTree(props) {
       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 firstItem = R.pipe(R.nth(R.head(shiftIndexes)), function (id) {
+        return R.prop(id, indexedItemsById);
+      })(list);
+      selectRange([R.head(shiftIndexes), index], firstItem.isSelected);
     }
   };
   var apply = function apply() {
@@ -189,6 +205,9 @@ var VirtualizedTree = function VirtualizedTree(props) {
     return {
       onMouseUp: isMouseDown ? function () {
         apply();
+        if (!R.isEmpty(selectIds)) {
+          setLastItemId(id);
+        }
       } : null,
       onMouseDown: function onMouseDown(e) {
         if (e.ctrlKey || e.shiftKey) {
@@ -220,10 +239,7 @@ var VirtualizedTree = function VirtualizedTree(props) {
       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;
-    }
+  var isItemSelected = function isItemSelected(item) {
     if (!R.isEmpty(selectIds) && R.has(getHierarchicalId(item), selectIds)) {
       return !item.isSelected;
     }
@@ -311,7 +327,7 @@ var VirtualizedTree = function VirtualizedTree(props) {
               isRtl: isRtl,
               isDisabled: R.is(Function, disableAccessor) ? disableAccessor(item) : false,
               eventsCallbacks: eventsCallbacks,
-              isSelected: isItemSelected(item, index),
+              isSelected: isItemSelected(item),
               HTMLRenderer: HTMLRenderer,
               classes: classes,
               labels: labels,

package/lib/VirtualizedTree/withExpansionTree.js

@@ -32,14 +32,24 @@ var withExpansionTree = function withExpansionTree(Component) {
         expandedIds = _useState[0],
         setExpandedIds = _useState[1];
 
+    var _useState2 = (0, _react.useState)([]),
+        itemsIds = _useState2[0],
+        setItemsIds = _useState2[1];
+
+    (0, _react.useEffect)(function () {
+      var ids = R.map(_VirtualizedTree.getHierarchicalId, items);
+      if (!R.isEmpty(R.symmetricDifference(ids, itemsIds))) setItemsIds(ids);
+    }, [items]);
+
+    (0, _react.useEffect)(function () {
+      setExpandedIds(R.indexBy(R.identity, itemsIds));
+    }, [itemsIds]);
+
     (0, _react.useEffect)(function () {
       if (!R.isNil(defaultExpandedIds)) {
         setExpandedIds(defaultExpandedIds);
-      } else {
-        var ids = R.pipe(R.map(_VirtualizedTree.getHierarchicalId), R.indexBy(R.identity))(items);
-        setExpandedIds(ids);
       }
-    }, [items, defaultExpandedIds]);
+    }, [defaultExpandedIds]);
 
     var expand = function expand(id) {
       setExpandedIds(R.assoc(id, id, expandedIds));
@@ -50,8 +60,7 @@ var withExpansionTree = function withExpansionTree(Component) {
     };
 
     var expandAll = function expandAll() {
-      var ids = R.pipe(R.map(_VirtualizedTree.getHierarchicalId), R.indexBy(R.identity))(items);
-      setExpandedIds(ids);
+      setExpandedIds(R.indexBy(R.identity, itemsIds));
     };
 
     var collapseAll = function collapseAll() {

package/lib/VirtualizedTree/withSpotlight.js

@@ -0,0 +1,81 @@
+'use strict';
+
+exports.__esModule = true;
+exports.withSpotlight = exports.spotlightFilter = 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 _ramda = require('ramda');
+
+var R = _interopRequireWildcard(_ramda);
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _VirtualizedTree = require('./VirtualizedTree');
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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 _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; } /* eslint react/prop-types: 0 */
+
+
+var spotlightFilter = exports.spotlightFilter = function spotlightFilter(term) {
+  var labelRenderer = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : R.prop('label');
+  return function (items) {
+    if (R.isEmpty(term) || R.isNil(term)) {
+      return items;
+    }
+
+    var groupedItemsByParentId = R.groupBy(R.propOr('#ROOT', 'parentId'), items);
+    var recurse = R.filter(function (item) {
+      var isValidItem = R.isEmpty(term) || R.isNil(term) ? true : R.includes(R.toLower(term), R.toLower(labelRenderer(item)));
+      if (isValidItem) {
+        return true;
+      }
+      if (R.has((0, _VirtualizedTree.getHierarchicalId)(item), groupedItemsByParentId)) {
+        var filtered = recurse(R.prop((0, _VirtualizedTree.getHierarchicalId)(item), groupedItemsByParentId));
+        if (!R.isEmpty(filtered)) {
+          return true;
+        }
+      }
+      return false;
+    });
+
+    return recurse(items);
+  };
+};
+
+var withSpotlight = function withSpotlight(Component) {
+  return function (_ref) {
+    var items = _ref.items,
+        defaultSpotlight = _ref.defaultSpotlight,
+        labelRenderer = _ref.labelRenderer,
+        rest = _objectWithoutProperties(_ref, ['items', 'defaultSpotlight', 'labelRenderer']);
+
+    var _useState = (0, _react.useState)({ term: '' }),
+        term = _useState[0].term,
+        setSpotlight = _useState[1];
+
+    (0, _react.useEffect)(function () {
+      if (!R.isNil(defaultSpotlight) && !R.isEmpty(defaultSpotlight)) {
+        setSpotlight(defaultSpotlight);
+      }
+    }, [defaultSpotlight]);
+
+    var filteredItems = (0, _react.useMemo)(function () {
+      return spotlightFilter(term, labelRenderer)(items);
+    }, [term, items]);
+
+    return _react2.default.createElement(Component, _extends({}, rest, {
+      items: filteredItems,
+      labelRenderer: labelRenderer,
+      hasSpotlight: R.length(items) >= 8,
+      spotlight: { term: term },
+      setSpotlight: setSpotlight
+    }));
+  };
+};
+exports.withSpotlight = withSpotlight;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sis-cc/dotstatsuite-visions",
-  "version": "7.20.9",
+  "version": "7.20.10",
   "description": "Library of visual components",
   "author": "OECD",
   "homepage": "https://visions-qa.siscc.org/#o",