@sis-cc/dotstatsuite-visions 7.19.1 → 7.20.1

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/es/index.js

@@ -8,7 +8,7 @@ export { default as ApiQueries } from './ApiQueries';
 export { default as Breadcrumbs } from './Breadcrumbs';
 export { default as Button } from './Button';
 export { default as ChartsConfig } from './ChartsConfig';
-export { default as Chips } from './Chips';
+export { DeleteAllChip, default as GroupedChips } from './Chips';
 export { default as CollapseButtons } from './CollapseButtons';
 export { default as CollapsibleTree } from './CollapsibleTree';
 export { default as Contact } from './Contact';

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

@@ -0,0 +1,145 @@
+'use strict';
+
+exports.__esModule = true;
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+var _ramda = require('ramda');
+
+var R = _interopRequireWildcard(_ramda);
+
+var _classnames = require('classnames');
+
+var _classnames2 = _interopRequireDefault(_classnames);
+
+var _styles = require('@material-ui/core/styles');
+
+var _IconButton = require('@material-ui/core/IconButton');
+
+var _IconButton2 = _interopRequireDefault(_IconButton);
+
+var _Chip = require('@material-ui/core/Chip');
+
+var _Chip2 = _interopRequireDefault(_Chip);
+
+var _Cross = require('../Icons/Cross');
+
+var _Cross2 = _interopRequireDefault(_Cross);
+
+var _utils = require('../utils');
+
+var _Tooltip = require('../Tooltip');
+
+var _Tooltip2 = _interopRequireDefault(_Tooltip);
+
+var _styles2 = require('./styles');
+
+var _utils2 = require('./utils');
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var 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 = (0, _styles.useTheme)();
+  var isRtl = (0, _utils.getIsRtl)(theme);
+  var labelRenderer = R.prop('label');
+  var classes = (0, _styles2.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 _react2.default.createElement(
+        'div',
+        { key: index },
+        (0, _utils2.myTooltipRenderer)({ isRtl: isRtl, labelRenderer: labelRenderer })(item),
+        _react2.default.createElement('br', null)
+      );
+    })(R.prop('parents')(R.head(arr)));
+  };
+
+  return _react2.default.createElement(
+    _Tooltip2.default,
+    {
+      placement: 'top',
+      title: hasTooltip ? renderer(items) : hasMultiLinedTooltip ? multiLinedTooltipRenderer(items) : ''
+    },
+    _react2.default.createElement(_Chip2.default, {
+      'data-testid': testId,
+      size: 'small',
+      'aria-label': label,
+      label: hasTooltip || hasMultiLinedTooltip ? _react2.default.createElement(
+        _react.Fragment,
+        null,
+        '...',
+        _react2.default.createElement(
+          'span',
+          { className: classes.childrenIndicator },
+          '>'
+        ),
+        label
+      ) : label,
+      deleteIcon: _react2.default.createElement(
+        _IconButton2.default,
+        {
+          disableRipple: true,
+          className: iconClasses,
+          'aria-label': ariaLabel + ' ' + label,
+          component: 'span',
+          tabIndex: -1
+        },
+        _react2.default.createElement(_Cross2.default, null)
+      ),
+      clickable: true,
+      onDelete: onChange,
+      className: (0, _classnames2.default)(chipClasses, (_cx = {}, _cx[classes.tooltipIndicator] = hasTooltip || hasMultiLinedTooltip, _cx)),
+      classes: { label: labelClasses }
+    })
+  );
+};
+
+CustomChip.propTypes = process.env.NODE_ENV !== "production" ? {
+  testId: _propTypes2.default.string,
+  id: _propTypes2.default.string,
+  parentId: _propTypes2.default.string,
+  label: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.element]),
+  onDelete: _propTypes2.default.func,
+  renderer: _propTypes2.default.func,
+  chipClasses: _propTypes2.default.string,
+  iconClasses: _propTypes2.default.string,
+  labelClasses: _propTypes2.default.string,
+  ariaLabel: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.element]),
+  items: _propTypes2.default.array
+} : {};
+exports.default = CustomChip;
+module.exports = exports['default'];

package/lib/Chips/DeleteChip.js

@@ -0,0 +1,46 @@
+'use strict';
+
+exports.__esModule = true;
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+var _classnames = require('classnames');
+
+var _classnames2 = _interopRequireDefault(_classnames);
+
+var _styles = require('./styles');
+
+var _CustomChip = require('./CustomChip');
+
+var _CustomChip2 = _interopRequireDefault(_CustomChip);
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var DeleteChip = function DeleteChip(_ref) {
+  var onDeleteAll = _ref.onDeleteAll,
+      clearAllLabel = _ref.clearAllLabel,
+      ariaLabel = _ref.ariaLabel;
+
+  var classes = (0, _styles.useStyles)();
+  return _react2.default.createElement(_CustomChip2.default, {
+    label: clearAllLabel,
+    ariaLabel: ariaLabel,
+    chipClasses: (0, _classnames2.default)(classes.mainChip, classes.chip),
+    onDelete: onDeleteAll,
+    iconClasses: classes.icon,
+    labelClasses: (0, _classnames2.default)(classes.spaceLabel, classes.formatLabel)
+  });
+};
+DeleteChip.propTypes = process.env.NODE_ENV !== "production" ? {
+  onDeleteAll: _propTypes2.default.func,
+  ariaLabel: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.element]),
+  clearAllLabel: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.element])
+} : {};
+exports.default = DeleteChip;
+module.exports = exports['default'];