@sis-cc/dotstatsuite-visions 7.20.0 → 7.20.2

package/es/AdvancedFilterDialog/AdvancedFilterDialog.js

@@ -2,11 +2,11 @@ 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, { useState } from 'react';
+import React, { useState, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import * as R from 'ramda';
 import cx from 'classnames';
-import { getHierarchicalId } from '../VirtualizedTree/VirtualizedTree';
+import { getDepth, getHierarchicalId } from '../VirtualizedTree/VirtualizedTree';
 import IconButton from '@material-ui/core/Button';
 import Dialog from '@material-ui/core/Dialog';
 import DialogTitle from '@material-ui/core/DialogTitle';
@@ -23,6 +23,17 @@ import HintIcon from '@material-ui/icons/EmojiObjects';
 import Draggable from 'react-draggable';
 import { Button, Spotlight, VirtualizedTree } from '..';
 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';
+import levelImg from './images/level-selection.png';
+import allImg from './images/all-selection.png';
+
+import singleIcon from './images/small-single-selection.png';
+import childrenIcon from './images/small-children-selection.png';
+import branchIcon from './images/small-branch-selection.png';
+import levelIcon from './images/small-level-selection.png';
+import allIcon from './images/small-all-selection.png';
 
 var PaperComponent = function PaperComponent(props) {
   return React.createElement(
@@ -65,6 +76,10 @@ var useStyles = makeStyles(function (theme) {
       alignItems: 'flex-start'
     },
     spotlight: { width: '45%' },
+    selection: {
+      display: 'flex',
+      alignItems: 'center'
+    },
     narrowSpotlight: { width: '100%' },
     selectionButton: {
       marginLeft: 24,
@@ -78,7 +93,7 @@ var useStyles = makeStyles(function (theme) {
       width: '50%',
       position: 'absolute',
       top: 105,
-      right: 24,
+      right: 48,
       zIndex: 1
     },
     narrowSelectionMenu: {
@@ -89,16 +104,28 @@ var useStyles = makeStyles(function (theme) {
       flexDirection: 'row',
       flexWrap: 'wrap'
     },
-    selectedItem: {
-      backgroundColor: theme.palette.secondary.main
+    selectButton: {
+      color: theme.palette.primary.main,
+      '&:hover': {
+        color: theme.palette.primary.main,
+        backgroundColor: theme.palette.action.hover
+      }
+    },
+    selectedButton: {
+      backgroundColor: theme.palette.secondary.main,
+      '&:hover': {
+        backgroundColor: theme.palette.action.selected
+      }
     },
     selectModeItem: {
       boxShadow: 'none',
       display: 'flex',
       width: 110,
       height: 200,
+      backgroundColor: 'inherit',
+      color: 'inherit',
       flexDirection: 'column',
-      justifyContent: 'flex-end',
+      justifyContent: 'space-between',
       '& img': {
         width: 110,
         height: 140
@@ -114,6 +141,7 @@ 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);
@@ -135,9 +163,10 @@ export var getScopeGetters = function getScopeGetters(items, groupedItems, disab
       return R.reject(disableAccessor, items);
     },
     level: function level(item) {
-      var parentId = R.propOr('#ROOT', 'parentId', item);
-      var items = R.prop(parentId, groupedItems);
-      return R.reject(disableAccessor, items);
+      var depth = getDepth(indexed)(item);
+      return R.filter(function (it) {
+        return !disableAccessor(it) && getDepth(indexed)(it) === depth;
+      }, items);
     }
   };
 };
@@ -168,10 +197,12 @@ var SelectionModeMenu = function SelectionModeMenu(_ref) {
 
           var value = _ref2.value,
               label = _ref2.label,
-              imgSrc = _ref2.imgSrc;
+              img = _ref2.img;
           return React.createElement(
             Button,
-            _extends({}, value === selected ? { variant: 'contained', color: 'secondary' } : {}, {
+            _extends({
+              className: cx(classes.selectButton, (_cx = {}, _cx[classes.selectedButton] = value === selected, _cx))
+            }, value === selected ? { variant: 'contained', color: 'secondary' } : {}, {
               key: value,
               onClick: function onClick() {
                 return onSelect(value);
@@ -179,16 +210,13 @@ var SelectionModeMenu = function SelectionModeMenu(_ref) {
             }),
             React.createElement(
               Paper,
-              {
-                className: cx(classes.selectModeItem, (_cx = {}, _cx[classes.selectedItem] = value === selected, _cx)),
-                key: value
-              },
+              { className: classes.selectModeItem, key: value },
               React.createElement(
                 Typography,
                 { variant: 'body2' },
                 label
               ),
-              React.createElement('img', { src: imgSrc, alt: value })
+              !R.isNil(img) && R.is(String, img) && React.createElement('img', { src: img, alt: value })
             )
           );
         }, options)
@@ -216,6 +244,14 @@ SelectionModeMenu.propTypes = process.env.NODE_ENV !== "production" ? {
   selected: PropTypes.string
 } : {};
 
+var icons = {
+  single: singleIcon,
+  children: childrenIcon,
+  branch: branchIcon,
+  level: levelIcon,
+  all: allIcon
+};
+
 var AdvancedFilterDialog = function AdvancedFilterDialog(props) {
   var _cx2;
 
@@ -228,9 +264,8 @@ var AdvancedFilterDialog = function AdvancedFilterDialog(props) {
       isOpen = props.isOpen,
       isNarrow = props.isNarrow,
       labels = props.labels,
-      imgs = props.imgs,
       disableAccessor = props.disableAccessor,
-      rest = _objectWithoutProperties(props, ['id', 'title', 'items', 'labelRenderer', 'onClose', 'changeSelection', 'isOpen', 'isNarrow', 'labels', 'imgs', 'disableAccessor']);
+      rest = _objectWithoutProperties(props, ['id', 'title', 'items', 'labelRenderer', 'onClose', 'changeSelection', 'isOpen', 'isNarrow', 'labels', 'disableAccessor']);
 
   var _useState = useState(''),
       term = _useState[0].term,
@@ -277,20 +312,24 @@ var AdvancedFilterDialog = function AdvancedFilterDialog(props) {
   var selectionOptions = [{
     value: 'single',
     label: R.prop('singleSelection', labels),
-    imgSrc: R.prop('singleSelection', imgs)
+    img: singleImg
   }, {
     value: 'children',
     label: R.prop('childrenSelection', labels),
-    imgSrc: R.prop('childrenSelection', imgs)
+    img: childrenImg
   }, {
     value: 'branch',
     label: R.prop('branchSelection', labels),
-    imgSrc: R.prop('branchSelection', imgs)
+    img: branchImg
   }, {
     value: 'level',
     label: R.prop('levelSelection', labels),
-    imgSrc: R.prop('levelSelection', imgs)
-  }, { value: 'all', label: R.prop('allSelection', labels), imgSrc: R.prop('allSelection', imgs) }];
+    img: levelImg
+  }, {
+    value: 'all',
+    label: R.prop('allSelection', labels),
+    img: allImg
+  }];
 
   var isDisabled = function isDisabled(item) {
     return R.is(Function, disableAccessor) ? disableAccessor(item) : false;
@@ -359,7 +398,7 @@ var AdvancedFilterDialog = function AdvancedFilterDialog(props) {
           ),
           React.createElement(
             'div',
-            null,
+            { className: classes.selection },
             React.createElement(
               Button,
               {
@@ -375,7 +414,13 @@ var AdvancedFilterDialog = function AdvancedFilterDialog(props) {
               R.prop('selectionMode', labels)
             ),
             '\xA0',
-            R.prop(selectionMode + 'Selection', labels)
+            R.prop(selectionMode + 'Selection', labels),
+            !R.isNil(R.prop(selectionMode, icons)) && R.is(String, R.prop(selectionMode, icons)) && React.createElement(
+              Fragment,
+              null,
+              '\xA0',
+              React.createElement('img', { src: R.prop(selectionMode, icons), alt: selectionMode })
+            )
           )
         ),
         React.createElement(
@@ -400,7 +445,7 @@ var AdvancedFilterDialog = function AdvancedFilterDialog(props) {
             items: selectionItems,
             changeSelection: onChangeSelection,
             withExpandControl: true,
-            maxTreeHeight: 500,
+            maxTreeHeight: 490,
             getItemScope: R.prop(selectionMode, scopeGetters)
           }))
         )
@@ -411,7 +456,13 @@ var AdvancedFilterDialog = function AdvancedFilterDialog(props) {
       null,
       R.is(Function, onClose) && React.createElement(
         Button,
-        { onClick: onClose, color: 'primary' },
+        {
+          onClick: function onClick() {
+            onClose();
+            setSelection({});
+          },
+          color: 'primary'
+        },
         R.prop('cancel', labels)
       ),
       R.is(Function, changeSelection) && React.createElement(
@@ -435,7 +486,6 @@ AdvancedFilterDialog.propTypes = process.env.NODE_ENV !== "production" ? {
   changeSelection: PropTypes.func,
   disableAccessor: PropTypes.func,
   HTMLRenderer: PropTypes.func,
-  imgs: PropTypes.object,
   isRtl: PropTypes.bool,
   isNarrow: PropTypes.bool,
   isOpen: PropTypes.bool,

package/es/HierarchicalFilter/HierarchicalFilter.js

@@ -93,7 +93,7 @@ var HierarchicalFilter = function HierarchicalFilter(props) {
             spotlight: { fields: {} },
             action: setSpotlight
           }),
-          R.is(Function, toggleBulk) && React.createElement(
+          R.is(Function, toggleBulk) && hasSpotligt && React.createElement(
             VerticalButton,
             {
               'aria-label': R.prop('advancedSelection')(labels),

package/es/VirtualizedTree/Item.js

@@ -8,14 +8,14 @@ import Typography from '@material-ui/core/Typography';
 import ListItemText from '@material-ui/core/ListItemText';
 import IconButton from '@material-ui/core/IconButton';
 import SvgIcon from '@material-ui/core/SvgIcon';
+import Icon from '@material-ui/core/SvgIcon';
+import CheckBoxIcon from '@material-ui/icons/CheckBoxOutlineBlankOutlined';
+import CheckedBoxIcon from '@material-ui/icons/CheckBoxOutlined';
 import cx from 'classnames';
 import { Tooltip } from '../';
 
-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 _extends2, _cx, _cx2, _cx3, _cx4, _cx5;
 
   var classes = _ref.classes,
       id = _ref.id,
@@ -54,8 +54,7 @@ var Item = function Item(_ref) {
     {
       disableGutters: true,
       classes: { disabled: classes.disabled },
-      className: cx(classes.listItemContainer, (_cx = {}, _cx[classes.disableSecondaryAction] = R.not(hasChild), _cx)),
-      disabled: isDisabled,
+      className: cx(classes.listItemContainer, classes.disableSecondaryAction),
       tabIndex: -1,
       style: _extends({}, style, (_extends2 = {
         flexDirection: isRtl ? 'row-reverse' : 'row'
@@ -70,7 +69,7 @@ var Item = function Item(_ref) {
         'aria-label': ariaLabel,
         tabIndex: -1,
         size: 'small',
-        color: 'inherit',
+        color: 'primary',
         onClick: function onClick() {
           return changeList(hierarchicalId || id);
         }
@@ -85,30 +84,31 @@ var Item = function Item(_ref) {
       primaryTypographyProps: { noWrap: true, color: 'inherit' },
       secondaryTypographyProps: { color: 'inherit' },
       classes: { root: classes.listItem },
-      className: cx((_cx2 = {}, _cx2[classes.accessibilityItemHover] = accessibility, _cx2[classes.listItemSelected] = R.and(isSelected, R.not(isDisabled)), _cx2[classes.listItemHover] = R.not(isDisabled), _cx2)),
+      className: cx((_cx = {}, _cx[classes.accessibilityItemHover] = accessibility, _cx[classes.listItemSelected] = R.and(isSelected, R.not(isDisabled)), _cx[classes.listItemHover] = R.not(isDisabled), _cx[classes.disabledLabel] = isDisabled, _cx)),
       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,
+      style: { opacity: isDisabled ? '0.5' : '1' },
       primary: React.createElement(
         'div',
         {
-          className: cx(classes.labelContainer, (_cx3 = {}, _cx3[classes.rtlLabelContainer] = isRtl, _cx3))
+          className: cx(classes.labelContainer, (_cx2 = {}, _cx2[classes.rtlLabelContainer] = isRtl, _cx2))
         },
         React.createElement(
-          SvgIcon,
+          Icon,
           {
             color: 'primary',
-            className: cx(classes.labelIcon, (_cx4 = {}, _cx4[classes.disabledLabel] = isDisabled, _cx4))
+            className: cx(classes.labelIcon, (_cx3 = {}, _cx3[classes.disabledLabel] = isDisabled, _cx3))
           },
-          React.createElement('path', { d: R.and(isSelected, R.not(isDisabled)) ? checkPath : checkBoxPath })
+          isSelected && R.not(isDisabled) ? React.createElement(CheckedBoxIcon, null) : React.createElement(CheckBoxIcon, null)
         ),
         svgPath && React.createElement(
           SvgIcon,
           {
             color: 'primary',
-            className: cx(classes.labelIcon, (_cx5 = {}, _cx5[classes.disabledLabel] = isDisabled, _cx5))
+            className: cx(classes.labelIcon, (_cx4 = {}, _cx4[classes.disabledLabel] = isDisabled, _cx4))
           },
           React.createElement('path', { d: svgPath })
         ),
@@ -137,7 +137,7 @@ var Item = function Item(_ref) {
               'data-testid': testId + '_value_' + id,
               color: 'inherit',
               variant: 'body2',
-              className: cx(classes.label, (_cx6 = {}, _cx6[classes.disabledLabel] = isDisabled, _cx6[classes.tooltipNotice] = !R.isEmpty(description), _cx6))
+              className: cx(classes.label, (_cx5 = {}, _cx5[classes.disabledLabel] = isDisabled, _cx5[classes.tooltipNotice] = !R.isEmpty(description), _cx5))
             },
             label
           )

package/es/VirtualizedTree/VirtualizedTree.js

@@ -114,7 +114,9 @@ var VirtualizedTree = function VirtualizedTree(props) {
   };
   var shiftSelect = function shiftSelect(index) {
     if (R.isEmpty(shiftIndexes)) {
-      var item = R.nth(index, list);
+      var item = R.pipe(R.nth(index), function (id) {
+        return R.prop(id, indexedItemsById);
+      })(list);
       var ids = R.pipe(getItemScope, R.filter(function (v) {
         return v.isSelected === item.isSelected;
       }), R.map(getHierarchicalId), R.indexBy(R.identity))(item);
@@ -154,25 +156,21 @@ var VirtualizedTree = function VirtualizedTree(props) {
         apply();
       } : null,
       onMouseDown: function onMouseDown(e) {
-        if (e.ctrlKey || e.shiftKey) {
-          return;
+        if (e.ctrlKey) {
+          multiSelect(id);
+        } else if (e.shiftKey) {
+          shiftSelect(index);
+        } else {
+          multiSelect(id);
+          setIsMouseDown(true);
         }
-        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);
-        }
-      }
+      } : null
     };
   };
   var onKeyUp = function onKeyUp(e) {
@@ -296,7 +294,8 @@ var VirtualizedTree = function VirtualizedTree(props) {
                 index: index,
                 style: style,
                 accessibility: accessibility,
-                ariaLabel: R.prop('navigateNext')(labels)
+                ariaLabel: R.prop('navigateNext')(labels),
+                theme: theme
               }));
             }
           });

package/lib/AdvancedFilterDialog/AdvancedFilterDialog.js

@@ -83,6 +83,46 @@ var _ = require('..');
 
 var _styles = require('@material-ui/core/styles');
 
+var _singleSelection = require('./images/single-selection.png');
+
+var _singleSelection2 = _interopRequireDefault(_singleSelection);
+
+var _childrenSelection = require('./images/children-selection.png');
+
+var _childrenSelection2 = _interopRequireDefault(_childrenSelection);
+
+var _branchSelection = require('./images/branch-selection.png');
+
+var _branchSelection2 = _interopRequireDefault(_branchSelection);
+
+var _levelSelection = require('./images/level-selection.png');
+
+var _levelSelection2 = _interopRequireDefault(_levelSelection);
+
+var _allSelection = require('./images/all-selection.png');
+
+var _allSelection2 = _interopRequireDefault(_allSelection);
+
+var _smallSingleSelection = require('./images/small-single-selection.png');
+
+var _smallSingleSelection2 = _interopRequireDefault(_smallSingleSelection);
+
+var _smallChildrenSelection = require('./images/small-children-selection.png');
+
+var _smallChildrenSelection2 = _interopRequireDefault(_smallChildrenSelection);
+
+var _smallBranchSelection = require('./images/small-branch-selection.png');
+
+var _smallBranchSelection2 = _interopRequireDefault(_smallBranchSelection);
+
+var _smallLevelSelection = require('./images/small-level-selection.png');
+
+var _smallLevelSelection2 = _interopRequireDefault(_smallLevelSelection);
+
+var _smallAllSelection = require('./images/small-all-selection.png');
+
+var _smallAllSelection2 = _interopRequireDefault(_smallAllSelection);
+
 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 }; }
@@ -130,6 +170,10 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
       alignItems: 'flex-start'
     },
     spotlight: { width: '45%' },
+    selection: {
+      display: 'flex',
+      alignItems: 'center'
+    },
     narrowSpotlight: { width: '100%' },
     selectionButton: {
       marginLeft: 24,
@@ -143,7 +187,7 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
       width: '50%',
       position: 'absolute',
       top: 105,
-      right: 24,
+      right: 48,
       zIndex: 1
     },
     narrowSelectionMenu: {
@@ -154,16 +198,28 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
       flexDirection: 'row',
       flexWrap: 'wrap'
     },
-    selectedItem: {
-      backgroundColor: theme.palette.secondary.main
+    selectButton: {
+      color: theme.palette.primary.main,
+      '&:hover': {
+        color: theme.palette.primary.main,
+        backgroundColor: theme.palette.action.hover
+      }
+    },
+    selectedButton: {
+      backgroundColor: theme.palette.secondary.main,
+      '&:hover': {
+        backgroundColor: theme.palette.action.selected
+      }
     },
     selectModeItem: {
       boxShadow: 'none',
       display: 'flex',
       width: 110,
       height: 200,
+      backgroundColor: 'inherit',
+      color: 'inherit',
       flexDirection: 'column',
-      justifyContent: 'flex-end',
+      justifyContent: 'space-between',
       '& img': {
         width: 110,
         height: 140
@@ -179,6 +235,7 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
 });
 
 var getScopeGetters = exports.getScopeGetters = function getScopeGetters(items, groupedItems, disableAccessor) {
+  var indexed = R.indexBy(_VirtualizedTree.getHierarchicalId, items);
   return {
     all: function all() {
       return R.reject(disableAccessor, items);
@@ -200,9 +257,10 @@ var getScopeGetters = exports.getScopeGetters = function getScopeGetters(items,
       return R.reject(disableAccessor, items);
     },
     level: function level(item) {
-      var parentId = R.propOr('#ROOT', 'parentId', item);
-      var items = R.prop(parentId, groupedItems);
-      return R.reject(disableAccessor, items);
+      var depth = (0, _VirtualizedTree.getDepth)(indexed)(item);
+      return R.filter(function (it) {
+        return !disableAccessor(it) && (0, _VirtualizedTree.getDepth)(indexed)(it) === depth;
+      }, items);
     }
   };
 };
@@ -233,10 +291,12 @@ var SelectionModeMenu = function SelectionModeMenu(_ref) {
 
           var value = _ref2.value,
               label = _ref2.label,
-              imgSrc = _ref2.imgSrc;
+              img = _ref2.img;
           return _react2.default.createElement(
             _.Button,
-            _extends({}, value === selected ? { variant: 'contained', color: 'secondary' } : {}, {
+            _extends({
+              className: (0, _classnames2.default)(classes.selectButton, (_cx = {}, _cx[classes.selectedButton] = value === selected, _cx))
+            }, value === selected ? { variant: 'contained', color: 'secondary' } : {}, {
               key: value,
               onClick: function onClick() {
                 return onSelect(value);
@@ -244,16 +304,13 @@ var SelectionModeMenu = function SelectionModeMenu(_ref) {
             }),
             _react2.default.createElement(
               _Paper2.default,
-              {
-                className: (0, _classnames2.default)(classes.selectModeItem, (_cx = {}, _cx[classes.selectedItem] = value === selected, _cx)),
-                key: value
-              },
+              { className: classes.selectModeItem, key: value },
               _react2.default.createElement(
                 _Typography2.default,
                 { variant: 'body2' },
                 label
               ),
-              _react2.default.createElement('img', { src: imgSrc, alt: value })
+              !R.isNil(img) && R.is(String, img) && _react2.default.createElement('img', { src: img, alt: value })
             )
           );
         }, options)
@@ -281,6 +338,14 @@ SelectionModeMenu.propTypes = process.env.NODE_ENV !== "production" ? {
   selected: _propTypes2.default.string
 } : {};
 
+var icons = {
+  single: _smallSingleSelection2.default,
+  children: _smallChildrenSelection2.default,
+  branch: _smallBranchSelection2.default,
+  level: _smallLevelSelection2.default,
+  all: _smallAllSelection2.default
+};
+
 var AdvancedFilterDialog = function AdvancedFilterDialog(props) {
   var _cx2;
 
@@ -293,9 +358,8 @@ var AdvancedFilterDialog = function AdvancedFilterDialog(props) {
       isOpen = props.isOpen,
       isNarrow = props.isNarrow,
       labels = props.labels,
-      imgs = props.imgs,
       disableAccessor = props.disableAccessor,
-      rest = _objectWithoutProperties(props, ['id', 'title', 'items', 'labelRenderer', 'onClose', 'changeSelection', 'isOpen', 'isNarrow', 'labels', 'imgs', 'disableAccessor']);
+      rest = _objectWithoutProperties(props, ['id', 'title', 'items', 'labelRenderer', 'onClose', 'changeSelection', 'isOpen', 'isNarrow', 'labels', 'disableAccessor']);
 
   var _useState = (0, _react.useState)(''),
       term = _useState[0].term,
@@ -342,20 +406,24 @@ var AdvancedFilterDialog = function AdvancedFilterDialog(props) {
   var selectionOptions = [{
     value: 'single',
     label: R.prop('singleSelection', labels),
-    imgSrc: R.prop('singleSelection', imgs)
+    img: _singleSelection2.default
   }, {
     value: 'children',
     label: R.prop('childrenSelection', labels),
-    imgSrc: R.prop('childrenSelection', imgs)
+    img: _childrenSelection2.default
   }, {
     value: 'branch',
     label: R.prop('branchSelection', labels),
-    imgSrc: R.prop('branchSelection', imgs)
+    img: _branchSelection2.default
   }, {
     value: 'level',
     label: R.prop('levelSelection', labels),
-    imgSrc: R.prop('levelSelection', imgs)
-  }, { value: 'all', label: R.prop('allSelection', labels), imgSrc: R.prop('allSelection', imgs) }];
+    img: _levelSelection2.default
+  }, {
+    value: 'all',
+    label: R.prop('allSelection', labels),
+    img: _allSelection2.default
+  }];
 
   var isDisabled = function isDisabled(item) {
     return R.is(Function, disableAccessor) ? disableAccessor(item) : false;
@@ -424,7 +492,7 @@ var AdvancedFilterDialog = function AdvancedFilterDialog(props) {
           ),
           _react2.default.createElement(
             'div',
-            null,
+            { className: classes.selection },
             _react2.default.createElement(
               _.Button,
               {
@@ -440,7 +508,13 @@ var AdvancedFilterDialog = function AdvancedFilterDialog(props) {
               R.prop('selectionMode', labels)
             ),
             '\xA0',
-            R.prop(selectionMode + 'Selection', labels)
+            R.prop(selectionMode + 'Selection', labels),
+            !R.isNil(R.prop(selectionMode, icons)) && R.is(String, R.prop(selectionMode, icons)) && _react2.default.createElement(
+              _react.Fragment,
+              null,
+              '\xA0',
+              _react2.default.createElement('img', { src: R.prop(selectionMode, icons), alt: selectionMode })
+            )
           )
         ),
         _react2.default.createElement(
@@ -465,7 +539,7 @@ var AdvancedFilterDialog = function AdvancedFilterDialog(props) {
             items: selectionItems,
             changeSelection: onChangeSelection,
             withExpandControl: true,
-            maxTreeHeight: 500,
+            maxTreeHeight: 490,
             getItemScope: R.prop(selectionMode, scopeGetters)
           }))
         )
@@ -476,7 +550,13 @@ var AdvancedFilterDialog = function AdvancedFilterDialog(props) {
       null,
       R.is(Function, onClose) && _react2.default.createElement(
         _.Button,
-        { onClick: onClose, color: 'primary' },
+        {
+          onClick: function onClick() {
+            onClose();
+            setSelection({});
+          },
+          color: 'primary'
+        },
         R.prop('cancel', labels)
       ),
       R.is(Function, changeSelection) && _react2.default.createElement(
@@ -500,7 +580,6 @@ AdvancedFilterDialog.propTypes = process.env.NODE_ENV !== "production" ? {
   changeSelection: _propTypes2.default.func,
   disableAccessor: _propTypes2.default.func,
   HTMLRenderer: _propTypes2.default.func,
-  imgs: _propTypes2.default.object,
   isRtl: _propTypes2.default.bool,
   isNarrow: _propTypes2.default.bool,
   isOpen: _propTypes2.default.bool,

package/lib/HierarchicalFilter/HierarchicalFilter.js

@@ -119,7 +119,7 @@ var HierarchicalFilter = function HierarchicalFilter(props) {
             spotlight: { fields: {} },
             action: setSpotlight
           }),
-          R.is(Function, toggleBulk) && _react2.default.createElement(
+          R.is(Function, toggleBulk) && hasSpotligt && _react2.default.createElement(
             _.VerticalButton,
             {
               'aria-label': R.prop('advancedSelection')(labels),

package/lib/VirtualizedTree/Item.js

@@ -36,6 +36,14 @@ var _SvgIcon = require('@material-ui/core/SvgIcon');
 
 var _SvgIcon2 = _interopRequireDefault(_SvgIcon);
 
+var _CheckBoxOutlineBlankOutlined = require('@material-ui/icons/CheckBoxOutlineBlankOutlined');
+
+var _CheckBoxOutlineBlankOutlined2 = _interopRequireDefault(_CheckBoxOutlineBlankOutlined);
+
+var _CheckBoxOutlined = require('@material-ui/icons/CheckBoxOutlined');
+
+var _CheckBoxOutlined2 = _interopRequireDefault(_CheckBoxOutlined);
+
 var _classnames = require('classnames');
 
 var _classnames2 = _interopRequireDefault(_classnames);
@@ -46,11 +54,8 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 
 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 _extends2, _cx, _cx2, _cx3, _cx4, _cx5;
 
   var classes = _ref.classes,
       id = _ref.id,
@@ -89,8 +94,7 @@ var Item = function Item(_ref) {
     {
       disableGutters: true,
       classes: { disabled: classes.disabled },
-      className: (0, _classnames2.default)(classes.listItemContainer, (_cx = {}, _cx[classes.disableSecondaryAction] = R.not(hasChild), _cx)),
-      disabled: isDisabled,
+      className: (0, _classnames2.default)(classes.listItemContainer, classes.disableSecondaryAction),
       tabIndex: -1,
       style: _extends({}, style, (_extends2 = {
         flexDirection: isRtl ? 'row-reverse' : 'row'
@@ -105,7 +109,7 @@ var Item = function Item(_ref) {
         'aria-label': ariaLabel,
         tabIndex: -1,
         size: 'small',
-        color: 'inherit',
+        color: 'primary',
         onClick: function onClick() {
           return changeList(hierarchicalId || id);
         }
@@ -120,30 +124,31 @@ var Item = function Item(_ref) {
       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)),
+      className: (0, _classnames2.default)((_cx = {}, _cx[classes.accessibilityItemHover] = accessibility, _cx[classes.listItemSelected] = R.and(isSelected, R.not(isDisabled)), _cx[classes.listItemHover] = R.not(isDisabled), _cx[classes.disabledLabel] = isDisabled, _cx)),
       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,
+      style: { opacity: isDisabled ? '0.5' : '1' },
       primary: _react2.default.createElement(
         'div',
         {
-          className: (0, _classnames2.default)(classes.labelContainer, (_cx3 = {}, _cx3[classes.rtlLabelContainer] = isRtl, _cx3))
+          className: (0, _classnames2.default)(classes.labelContainer, (_cx2 = {}, _cx2[classes.rtlLabelContainer] = isRtl, _cx2))
         },
         _react2.default.createElement(
           _SvgIcon2.default,
           {
             color: 'primary',
-            className: (0, _classnames2.default)(classes.labelIcon, (_cx4 = {}, _cx4[classes.disabledLabel] = isDisabled, _cx4))
+            className: (0, _classnames2.default)(classes.labelIcon, (_cx3 = {}, _cx3[classes.disabledLabel] = isDisabled, _cx3))
           },
-          _react2.default.createElement('path', { d: R.and(isSelected, R.not(isDisabled)) ? checkPath : checkBoxPath })
+          isSelected && R.not(isDisabled) ? _react2.default.createElement(_CheckBoxOutlined2.default, null) : _react2.default.createElement(_CheckBoxOutlineBlankOutlined2.default, null)
         ),
         svgPath && _react2.default.createElement(
           _SvgIcon2.default,
           {
             color: 'primary',
-            className: (0, _classnames2.default)(classes.labelIcon, (_cx5 = {}, _cx5[classes.disabledLabel] = isDisabled, _cx5))
+            className: (0, _classnames2.default)(classes.labelIcon, (_cx4 = {}, _cx4[classes.disabledLabel] = isDisabled, _cx4))
           },
           _react2.default.createElement('path', { d: svgPath })
         ),
@@ -172,7 +177,7 @@ var Item = function Item(_ref) {
               '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))
+              className: (0, _classnames2.default)(classes.label, (_cx5 = {}, _cx5[classes.disabledLabel] = isDisabled, _cx5[classes.tooltipNotice] = !R.isEmpty(description), _cx5))
             },
             label
           )

package/lib/VirtualizedTree/VirtualizedTree.js

@@ -155,7 +155,9 @@ var VirtualizedTree = function VirtualizedTree(props) {
   };
   var shiftSelect = function shiftSelect(index) {
     if (R.isEmpty(shiftIndexes)) {
-      var item = R.nth(index, list);
+      var item = R.pipe(R.nth(index), function (id) {
+        return R.prop(id, indexedItemsById);
+      })(list);
       var ids = R.pipe(getItemScope, R.filter(function (v) {
         return v.isSelected === item.isSelected;
       }), R.map(getHierarchicalId), R.indexBy(R.identity))(item);
@@ -195,25 +197,21 @@ var VirtualizedTree = function VirtualizedTree(props) {
         apply();
       } : null,
       onMouseDown: function onMouseDown(e) {
-        if (e.ctrlKey || e.shiftKey) {
-          return;
+        if (e.ctrlKey) {
+          multiSelect(id);
+        } else if (e.shiftKey) {
+          shiftSelect(index);
+        } else {
+          multiSelect(id);
+          setIsMouseDown(true);
         }
-        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);
-        }
-      }
+      } : null
     };
   };
   var onKeyUp = function onKeyUp(e) {
@@ -337,7 +335,8 @@ var VirtualizedTree = function VirtualizedTree(props) {
                 index: index,
                 style: style,
                 accessibility: accessibility,
-                ariaLabel: R.prop('navigateNext')(labels)
+                ariaLabel: R.prop('navigateNext')(labels),
+                theme: theme
               }));
             }
           });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sis-cc/dotstatsuite-visions",
-  "version": "7.20.0",
+  "version": "7.20.2",
   "description": "Library of visual components",
   "author": "OECD",
   "homepage": "https://visions-qa.siscc.org/#o",
@@ -18,8 +18,8 @@
     "umd"
   ],
   "scripts": {
-    "build": "nwb build-react-component --no-demo && node scripts/doc && nwb build-demo",
-    "build:dev": "nwb build-react-component --no-demo",
+    "build": "nwb build-react-component --copy-files --no-demo && node scripts/doc && nwb build-demo",
+    "build:dev": "nwb build-react-component --copy-files --no-demo",
     "clean": "nwb clean-module && nwb clean-demo",
     "prepublishOnly": "npm run build",
     "start": "nwb serve-react-demo",
@@ -73,6 +73,7 @@
     "eslint-plugin-react": "^7.18.3",
     "eslint-plugin-react-hooks": "^2.0.1",
     "husky": "^2.7.0",
+    "identity-obj-proxy": "^3.0.0",
     "jest": "^24.8.0",
     "jest-environment-jsdom-fourteen": "0.1.0",
     "jss-rtl": "^0.2.3",
@@ -113,7 +114,8 @@
     "modulePaths": [],
     "moduleNameMapper": {
       "^react-native$": "react-native-web",
-      "^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy"
+      "^.+\\.module\\.(css|sass|scss)$": "identity-obj-proxy",
+      "\\.(jpg|jpeg|png)$": "identity-obj-proxy"
     },
     "moduleFileExtensions": [
       "web.js",
@@ -207,4 +209,4 @@
     "parser": "babylon",
     "semi": true
   }
-}
+}