@sis-cc/dotstatsuite-visions 7.19.1 → 7.20.1

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/Chips/CustomChip.js

@@ -0,0 +1,109 @@
+import React, { Fragment } from 'react';
+import PropTypes from 'prop-types';
+import * as R from 'ramda';
+import cx from 'classnames';
+import { useTheme } from '@material-ui/core/styles';
+import IconButton from '@material-ui/core/IconButton';
+import Chip from '@material-ui/core/Chip';
+import Cross from '../Icons/Cross';
+import { getIsRtl } from '../utils';
+import Tooltip from '../Tooltip';
+import { useStyles } from './styles';
+import { myTooltipRenderer } from './utils';
+
+var shownTooltip = R.pipe(R.dropLast(1), R.either(R.isEmpty, R.isNil), R.not);
+var showMultiLinedTooltip = R.pipe(R.head, R.propOr([], 'parents'), R.isEmpty, R.not);
+
+var CustomChip = function CustomChip(_ref) {
+  var _cx;
+
+  var id = _ref.id,
+      parentId = _ref.parentId,
+      _ref$items = _ref.items,
+      items = _ref$items === undefined ? [] : _ref$items,
+      label = _ref.label,
+      onDelete = _ref.onDelete,
+      renderer = _ref.renderer,
+      chipClasses = _ref.chipClasses,
+      iconClasses = _ref.iconClasses,
+      labelClasses = _ref.labelClasses,
+      _ref$ariaLabel = _ref.ariaLabel,
+      ariaLabel = _ref$ariaLabel === undefined ? 'delete' : _ref$ariaLabel,
+      _ref$testId = _ref.testId,
+      testId = _ref$testId === undefined ? 'deleteChip-test-id' : _ref$testId;
+
+  var theme = useTheme();
+  var isRtl = getIsRtl(theme);
+  var labelRenderer = R.prop('label');
+  var classes = useStyles();
+  var mapIndexed = R.addIndex(R.map);
+  var onChange = R.is(Function)(onDelete) ? function () {
+    return onDelete(parentId, R.isNil(id) ? [] : [id]);
+  } : null;
+  var hasTooltip = shownTooltip(items);
+  var hasMultiLinedTooltip = showMultiLinedTooltip(items);
+  var multiLinedTooltipRenderer = function multiLinedTooltipRenderer(arr) {
+    return mapIndexed(function (item, index) {
+      return React.createElement(
+        'div',
+        { key: index },
+        myTooltipRenderer({ isRtl: isRtl, labelRenderer: labelRenderer })(item),
+        React.createElement('br', null)
+      );
+    })(R.prop('parents')(R.head(arr)));
+  };
+
+  return React.createElement(
+    Tooltip,
+    {
+      placement: 'top',
+      title: hasTooltip ? renderer(items) : hasMultiLinedTooltip ? multiLinedTooltipRenderer(items) : ''
+    },
+    React.createElement(Chip, {
+      'data-testid': testId,
+      size: 'small',
+      'aria-label': label,
+      label: hasTooltip || hasMultiLinedTooltip ? React.createElement(
+        Fragment,
+        null,
+        '...',
+        React.createElement(
+          'span',
+          { className: classes.childrenIndicator },
+          '>'
+        ),
+        label
+      ) : label,
+      deleteIcon: React.createElement(
+        IconButton,
+        {
+          disableRipple: true,
+          className: iconClasses,
+          'aria-label': ariaLabel + ' ' + label,
+          component: 'span',
+          tabIndex: -1
+        },
+        React.createElement(Cross, null)
+      ),
+      clickable: true,
+      onDelete: onChange,
+      className: cx(chipClasses, (_cx = {}, _cx[classes.tooltipIndicator] = hasTooltip || hasMultiLinedTooltip, _cx)),
+      classes: { label: labelClasses }
+    })
+  );
+};
+
+CustomChip.propTypes = process.env.NODE_ENV !== "production" ? {
+  testId: PropTypes.string,
+  id: PropTypes.string,
+  parentId: PropTypes.string,
+  label: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+  onDelete: PropTypes.func,
+  renderer: PropTypes.func,
+  chipClasses: PropTypes.string,
+  iconClasses: PropTypes.string,
+  labelClasses: PropTypes.string,
+  ariaLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+  items: PropTypes.array
+} : {};
+export default CustomChip;

package/es/Chips/DeleteChip.js

@@ -0,0 +1,27 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import cx from 'classnames';
+import { useStyles } from './styles';
+import CustomChip from './CustomChip';
+
+var DeleteChip = function DeleteChip(_ref) {
+  var onDeleteAll = _ref.onDeleteAll,
+      clearAllLabel = _ref.clearAllLabel,
+      ariaLabel = _ref.ariaLabel;
+
+  var classes = useStyles();
+  return React.createElement(CustomChip, {
+    label: clearAllLabel,
+    ariaLabel: ariaLabel,
+    chipClasses: cx(classes.mainChip, classes.chip),
+    onDelete: onDeleteAll,
+    iconClasses: classes.icon,
+    labelClasses: cx(classes.spaceLabel, classes.formatLabel)
+  });
+};
+DeleteChip.propTypes = process.env.NODE_ENV !== "production" ? {
+  onDeleteAll: PropTypes.func,
+  ariaLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+  clearAllLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.element])
+} : {};
+export default DeleteChip;

package/es/Chips/GroupedChips.js

@@ -0,0 +1,95 @@
+import { useTheme } from '@material-ui/core/styles';
+import PropTypes from 'prop-types';
+import React, { Fragment } from 'react';
+import * as R from 'ramda';
+import cx from 'classnames';
+import { getIsRtl } from '../utils';
+import { useStyles } from './styles';
+import CustomChip from './CustomChip';
+import { myTooltipRenderer } from './utils';
+
+var GroupedChips = function GroupedChips(_ref) {
+  var _ref$itemProps = _ref.itemProps,
+      itemProps = _ref$itemProps === undefined ? {} : _ref$itemProps,
+      onDelete = _ref.onDelete,
+      _ref$labelRenderer = _ref.labelRenderer,
+      labelRenderer = _ref$labelRenderer === undefined ? R.prop('label') : _ref$labelRenderer,
+      tooltipRenderer = _ref.tooltipRenderer,
+      ariaLabel = _ref.ariaLabel,
+      _ref$reducingNbChips = _ref.reducingNbChips,
+      reducingNbChips = _ref$reducingNbChips === undefined ? 15 : _ref$reducingNbChips,
+      labels = _ref.labels,
+      _ref$testId = _ref.testId,
+      testId = _ref$testId === undefined ? 'chips-test-id' : _ref$testId;
+  var parentId = itemProps.id,
+      isNotRemovable = itemProps.isNotRemovable,
+      _itemProps$values = itemProps.values,
+      values = _itemProps$values === undefined ? [] : _itemProps$values;
+
+  var theme = useTheme();
+  var isRtl = getIsRtl(theme);
+  var classes = useStyles();
+  return React.createElement(
+    Fragment,
+    null,
+    React.createElement(CustomChip, {
+      testId: testId,
+      parentId: parentId,
+      label: labelRenderer(itemProps) + ':',
+      ariaLabel: ariaLabel,
+      chipClasses: cx(classes.mainChip, classes.chip),
+      onDelete: isNotRemovable ? null : onDelete,
+      iconClasses: classes.icon,
+      labelClasses: cx(classes.spaceLabel, classes.formatLabel)
+    }),
+    R.pipe(R.length, R.flip(R.gt)(reducingNbChips))(values) ? React.createElement(CustomChip, {
+      parentId: parentId,
+      label: R.length(values) + ' ' + R.prop('reducingChip')(labels),
+      chipClasses: cx(classes.secondaryChip, classes.chip),
+      onDelete: isNotRemovable ? null : onDelete,
+      iconClasses: classes.icon,
+      labelClasses: cx(classes.formatLabel)
+    }) : R.map(function (items) {
+      var lastItem = R.last(items);
+      var id = lastItem.id,
+          isNotRemovable = lastItem.isNotRemovable;
+
+
+      return React.createElement(CustomChip, {
+        key: id,
+        id: id,
+        items: R.pipe(R.length, R.gte(2)) ? items : null,
+        renderer: R.is(Function)(tooltipRenderer) ? tooltipRenderer : myTooltipRenderer({ isRtl: isRtl, labelRenderer: labelRenderer }),
+        label: labelRenderer(lastItem),
+        ariaLabel: ariaLabel,
+        parentId: parentId,
+        onDelete: isNotRemovable ? null : onDelete,
+        chipClasses: cx(classes.secondaryChip, classes.chip),
+        iconClasses: classes.icon,
+        labelClasses: cx(classes.formatLabel)
+      });
+    })(values)
+  );
+};
+GroupedChips.propTypes = process.env.NODE_ENV !== "production" ? {
+  testId: PropTypes.string,
+  itemProps: PropTypes.shape({
+    id: PropTypes.string,
+    label: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+    isNotRemovable: PropTypes.bool,
+    values: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.shape({
+      id: PropTypes.string,
+      label: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+      isNotRemovable: PropTypes.bool
+    })))
+  }),
+  onDelete: PropTypes.func,
+  labelRenderer: PropTypes.func,
+  tooltipRenderer: PropTypes.func,
+  ariaLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+  reducingNbChips: PropTypes.number,
+  labels: PropTypes.shape({
+    reducingChip: PropTypes.oneOfType([PropTypes.string, PropTypes.element])
+  })
+} : {};
+export default GroupedChips;

package/es/Chips/index.js

@@ -1,5 +1,6 @@
 /**
- * Chips, is like a small board of whatever you want to show. You can delete sub item, item with sub item or all items
+ * GroupedChips, is like a small board of whatever you want to show. You can delete sub item, item with sub item or all items
+ * DeleteAllChip, is a chip that deletes all items displayed in the board
  * reducingNbChips: default 15, allow a possibility to reduce many chips to one. You will see the numbers of items inside the chip
  *
  * @memberOf VISIONS
@@ -7,31 +8,37 @@
  * @tag component
  * @api public
  * @demoReady
- * Chips.propTypes = {
- *   items: PropTypes.arrayOf(
- *     PropTypes.shape({
- *       id: PropTypes.string,
- *       label: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
- *       isNotRemovable: PropTypes.bool,
- *       values: PropTypes.arrayOf(
- *         PropTypes.shape({
- *           id: PropTypes.string,
- *           label: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
- *           isNotRemovable: PropTypes.bool,
- *         }),
- *       ),
- *     }),
- *   ),
- *   onDelete: PropTypes.func,
- *   onDeleteAll: PropTypes.func,
- *   clearAllLabel: PropTypes.func,
- *   labelRenderer: PropTypes.func,
- *   reducingNbChips: PropTypes.number,
- *   labels: PropTypes.shape({
- *     reducingChip: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
- *   }),
- *   isVis: PropTypes.bool,
+ * GroupedChips.propTypes = {
+ *  testId: PropTypes.string,
+ *  itemProps: PropTypes.shape({
+ *    id: PropTypes.string,
+ *    label: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+ *    isNotRemovable: PropTypes.bool,
+ *    values: PropTypes.arrayOf(
+ *      PropTypes.arrayOf(
+ *        PropTypes.shape({
+ *          id: PropTypes.string,
+ *          label: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+ *          isNotRemovable: PropTypes.bool,
+ *        }),
+ *      ),
+ *    ),
+ *  }),
+ *  onDelete: PropTypes.func,
+ *  labelRenderer: PropTypes.func,
+ *  tooltipRenderer: PropTypes.func,
+ *  ariaLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+ *  reducingNbChips: PropTypes.number,
+ *  labels: PropTypes.shape({
+ *    reducingChip: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+ *  }),
  * };
+ * 
+ * DeleteAllChip.propTypes = {
+ * onDeleteAll: PropTypes.func,
+ * ariaLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+ * clearAllLabel: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
+};
  * @theme
  * {
  *   palette: {
@@ -58,4 +65,5 @@
  * // *tooltip indicator is the dotted line under a chip
  */
 
-export { default } from './Chips';
+export { default } from './GroupedChips';
+export { default as DeleteAllChip } from './DeleteChip';

package/es/Chips/styles.js

@@ -0,0 +1,64 @@
+import { makeStyles } from '@material-ui/core/styles';
+import * as R from 'ramda';
+
+export var useStyles = makeStyles(function (theme) {
+  return {
+    root: {
+      display: 'flex',
+      flexWrap: 'wrap'
+    },
+    chip: {
+      height: 'unset',
+      borderRadius: 3,
+      minHeight: 25,
+      fontSize: 12,
+      margin: theme.spacing(0.25)
+    },
+    mainChip: {
+      background: 'none',
+      color: theme.palette.text.primary
+    },
+    secondaryChip: {
+      backgroundColor: R.path(['palette', 'tertiary', 'light'])(theme) || theme.palette.grey[100],
+      '&:hover, &:focus': {
+        backgroundColor: R.path(['palette', 'tertiary', 'dark'])(theme) || theme.palette.grey[300]
+      },
+      color: theme.palette.primary.main
+    },
+    icon: {
+      color: theme.palette.primary.main,
+      cursor: 'pointer',
+      margin: 0,
+      '&:hover': {
+        color: 'inherit'
+      },
+      '& svg': {
+        fontSize: 15
+      }
+    },
+    divider: {
+      margin: theme.spacing(0.5),
+      backgroundColor: theme.palette.grey[700]
+    },
+    dividerHz: {
+      width: '100%',
+      margin: theme.spacing(0.5),
+      backgroundColor: theme.palette.grey[700]
+    },
+    spaceLabel: {
+      paddingLeft: 0
+    },
+    formatLabel: {
+      whiteSpace: 'pre-wrap',
+      overflowWrap: 'anywhere'
+    },
+    tooltip: theme.typography.body2,
+    childrenIndicator: {
+      margin: '0 2px',
+      fontSize: 10
+    },
+    tooltipIndicator: {
+      borderBottom: '1px dotted ' + theme.palette.primary.main
+    }
+  };
+});

package/es/Chips/utils.js

@@ -0,0 +1,11 @@
+import * as R from 'ramda';
+
+export var myTooltipRenderer = function myTooltipRenderer(_ref) {
+  var isRtl = _ref.isRtl,
+      labelRenderer = _ref.labelRenderer;
+  return R.pipe(R.map(labelRenderer), R.when(R.always(isRtl), R.reverse), R.join(isRtl ? ' < ' : ' > '));
+};
+
+export var isLast = function isLast(index, list) {
+  return index + 1 === R.length(list);
+};

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),