@zohodesk/components 1.2.32 → 1.2.34

package/lib/MultiSelect/AdvancedMultiSelect.js

@@ -435,11 +435,14 @@ var AdvancedMultiSelectComponent = /*#__PURE__*/function (_MultiSelectComponent)
           needEffect = _this$props5.needEffect,
           disabledOptions = _this$props5.disabledOptions,
           isLoading = _this$props5.isLoading,
-          dataSelectorId = _this$props5.dataSelectorId;
+          dataSelectorId = _this$props5.dataSelectorId,
+          customClass = _this$props5.customClass;
       var _customProps$Suggesti = customProps.SuggestionsProps,
           SuggestionsProps = _customProps$Suggesti === void 0 ? {} : _customProps$Suggesti,
           _customProps$DropBoxP = customProps.DropBoxProps,
           DropBoxProps = _customProps$DropBoxP === void 0 ? {} : _customProps$DropBoxP;
+      var _customClass$containe = customClass.containerClass,
+          containerClass = _customClass$containe === void 0 ? '' : _customClass$containe;
       var _i18nKeys = i18nKeys,
           _i18nKeys$clearText = _i18nKeys.clearText,
           clearText = _i18nKeys$clearText === void 0 ? 'Clear all' : _i18nKeys$clearText;
@@ -473,7 +476,7 @@ var AdvancedMultiSelectComponent = /*#__PURE__*/function (_MultiSelectComponent)
 
       var isShowClearIcon = !isReadOnly && !isDisabled && isShowClear;
       return /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_MultiSelectModule["default"].wrapper, " ").concat(isDisabled ? _MultiSelectModule["default"].disabled : '', " ").concat(borderColor === 'transparent' ? _MultiSelectModule["default"].transparentContainer : '', " ").concat(needEffect && !(isDisabled || isReadOnly) ? _MultiSelectModule["default"].effect : ''),
+        className: "".concat(_MultiSelectModule["default"].wrapper, " ").concat(isDisabled ? _MultiSelectModule["default"].disabled : '', " ").concat(borderColor === 'transparent' ? _MultiSelectModule["default"].transparentContainer : '', " ").concat(needEffect && !(isDisabled || isReadOnly) ? _MultiSelectModule["default"].effect : '', " ").concat(containerClass),
         "data-id": dataIdMultiSelectComp,
         "data-test-id": dataIdMultiSelectComp,
         "data-title": isDisabled ? title : null,

package/lib/MultiSelect/props/defaultProps.js

@@ -75,7 +75,8 @@ var AdvancedMultiSelect_defaultProps = {
   customProps: {},
   needEffect: true,
   isLoading: false,
-  dataSelectorId: 'advancedMultiSelect'
+  dataSelectorId: 'advancedMultiSelect',
+  customClass: {}
 };
 exports.AdvancedMultiSelect_defaultProps = AdvancedMultiSelect_defaultProps;
 var EmptyState_defaultProps = {

package/lib/MultiSelect/props/propTypes.js

@@ -334,7 +334,8 @@ var AdvancedMultiSelect_propTypes = _objectSpread(_objectSpread({}, MultiSelect_
     DropBoxProps: _propTypes["default"].object
   }),
   isLoading: _propTypes["default"].bool,
-  dataSelectorId: _propTypes["default"].string
+  dataSelectorId: _propTypes["default"].string,
+  customClass: _propTypes["default"].object
 });
 
 exports.AdvancedMultiSelect_propTypes = AdvancedMultiSelect_propTypes;

package/lib/Radio/__tests__/Radio.spec.js

@@ -48,7 +48,7 @@ describe('Radio', function () {
 
     expect(asFragment()).toMatchSnapshot();
   });
-  test('rendering the Checked is true', function () {
+  test.each(palette)('rendering the Checked is true for palette - %s', function (palette) {
     var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Radio["default"], {
       palette: palette,
       active: true,
@@ -58,7 +58,7 @@ describe('Radio', function () {
 
     expect(asFragment()).toMatchSnapshot();
   });
-  test('rendering the disabled is true', function () {
+  test.each(palette)('rendering the disabled is true for palette - %s', function (palette) {
     var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Radio["default"], {
       disabled: true,
       palette: palette,
@@ -225,25 +225,21 @@ describe('Radio', function () {
 
     expect(asFragment()).toMatchSnapshot();
   });
-  test('eleRef prop is a function', function () {
-    // Create a mock function
+  test('getRef prop is a function', function () {
     var mockEleRef = jest.fn();
-
-    var _render24 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Radio["default"], {
-      eleRef: mockEleRef
-    })),
-        asFragment = _render24.asFragment;
-
-    expect(asFragment()).toMatchSnapshot();
+    (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Radio["default"], {
+      getRef: mockEleRef
+    }));
+    expect(mockEleRef).toHaveBeenCalled();
   });
   test('renders with different onClick props', function () {
     var onClickFunction = jest.fn();
 
-    var _render25 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_Radio["default"], {
+    var _render24 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(_Radio["default"], {
       value: "radioValue",
       onChange: onClickFunction
     }))),
-        asFragment = _render25.asFragment;
+        asFragment = _render24.asFragment;
 
     expect(asFragment()).toMatchSnapshot();
   });

package/lib/Radio/__tests__/__snapshots__/Radio.spec.js.snap

@@ -1,48 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Radio eleRef prop is a function 1`] = `
-<DocumentFragment>
-  <div
-    aria-checked="false"
-    aria-readonly="false"
-    class="container  pointer hoverEfffect   inflex rowdir both"
-    data-id="RadioComp"
-    data-selector-id="container"
-    data-test-id="RadioComp"
-    role="radio"
-    tabindex="0"
-  >
-    <div
-      class="radio  
-            hoverprimary medium filled centerPathprimary  shrinkOff"
-      data-id="boxComponent"
-      data-selector-id="box"
-      data-test-id="boxComponent"
-    >
-      <input
-        type="hidden"
-        value=""
-      />
-      <label
-        class="radioLabel pointer"
-      >
-        <svg
-          viewBox="0 0 40 40"
-          xmlns="http://www.w3.org/2000/svg"
-        >
-          <circle
-            class="rdBox"
-            cx="20"
-            cy="20"
-            r="19"
-          />
-        </svg>
-      </label>
-    </div>
-  </div>
-</DocumentFragment>
-`;
-
 exports[`Radio rendering ally ariaChecked true 1`] = `
 <DocumentFragment>
   <div
@@ -907,7 +864,68 @@ exports[`Radio rendering size - small 1`] = `
 </DocumentFragment>
 `;
 
-exports[`Radio rendering the Checked is true 1`] = `
+exports[`Radio rendering the Checked is true for palette - danger 1`] = `
+<DocumentFragment>
+  <div
+    aria-checked="false"
+    aria-readonly="false"
+    class="container active pointer hoverEfffect   flex rowdir both"
+    data-id="RadioComp"
+    data-selector-id="container"
+    data-test-id="RadioComp"
+    role="radio"
+    tabindex="0"
+  >
+    <div
+      class="radio  
+            hoverdanger medium filled centerPathdanger  shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <input
+        type="hidden"
+        value=""
+      />
+      <label
+        class="radioLabel pointer"
+      >
+        <svg
+          viewBox="0 0 40 40"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <circle
+            class="rdBox"
+            cx="20"
+            cy="20"
+            r="19"
+          />
+        </svg>
+      </label>
+    </div>
+    <div
+      class="text grow basis shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <label
+        class="label title medium default font_default
+          dotted cursor  
+              dangerLabel pointer  "
+        data-id="RadioText_label"
+        data-selector-id="label"
+        data-test-id="RadioText_label"
+        data-title="RadioText"
+      >
+        RadioText
+      </label>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Radio rendering the Checked is true for palette - primary 1`] = `
 <DocumentFragment>
   <div
     aria-checked="false"
@@ -921,7 +939,7 @@ exports[`Radio rendering the Checked is true 1`] = `
   >
     <div
       class="radio  
-            undefined medium filled undefined  shrinkOff"
+            hoverprimary medium filled centerPathprimary  shrinkOff"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -955,7 +973,7 @@ exports[`Radio rendering the Checked is true 1`] = `
       <label
         class="label title medium default font_default
           dotted cursor  
-              undefined pointer  "
+              primaryLabel pointer  "
         data-id="RadioText_label"
         data-selector-id="label"
         data-test-id="RadioText_label"
@@ -1459,7 +1477,68 @@ exports[`Radio rendering the defult props 1`] = `
 </DocumentFragment>
 `;
 
-exports[`Radio rendering the disabled is true 1`] = `
+exports[`Radio rendering the disabled is true for palette - danger 1`] = `
+<DocumentFragment>
+  <div
+    aria-checked="false"
+    aria-readonly="true"
+    class="container  disabled    flex rowdir both"
+    data-id="RadioComp"
+    data-selector-id="container"
+    data-test-id="RadioComp"
+    role="radio"
+    tabindex="-1"
+  >
+    <div
+      class="radio  
+             medium filled centerPathdanger  shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <input
+        type="hidden"
+        value=""
+      />
+      <label
+        class="radioLabel disabled"
+      >
+        <svg
+          viewBox="0 0 40 40"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <circle
+            class="rdBox"
+            cx="20"
+            cy="20"
+            r="19"
+          />
+        </svg>
+      </label>
+    </div>
+    <div
+      class="text grow basis shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <label
+        class="label title medium default font_default
+          dotted cursor  
+              dangerLabel disabled  "
+        data-id="RadioText_label"
+        data-selector-id="label"
+        data-test-id="RadioText_label"
+        data-title="RadioText"
+      >
+        RadioText
+      </label>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Radio rendering the disabled is true for palette - primary 1`] = `
 <DocumentFragment>
   <div
     aria-checked="false"
@@ -1473,7 +1552,7 @@ exports[`Radio rendering the disabled is true 1`] = `
   >
     <div
       class="radio  
-             medium filled undefined  shrinkOff"
+             medium filled centerPathprimary  shrinkOff"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
@@ -1507,7 +1586,7 @@ exports[`Radio rendering the disabled is true 1`] = `
       <label
         class="label title medium default font_default
           dotted cursor  
-              undefined disabled  "
+              primaryLabel disabled  "
         data-id="RadioText_label"
         data-selector-id="label"
         data-test-id="RadioText_label"

package/lib/RippleEffect/__tests__/RippleEffect.spec.js

@@ -40,7 +40,7 @@ describe('RippleEffect', function () {
 
     expect(asFragment()).toMatchSnapshot();
   });
-  var hoverTypes = ['default', 'border', 'bg', 'test'];
+  var hoverTypes = ['default', 'border', 'bg'];
   test.each(hoverTypes)('rendering hoverType of- %s', function (hoverType) {
     var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_RippleEffect["default"], {
       hoverType: hoverType

package/lib/RippleEffect/__tests__/__snapshots__/RippleEffect.spec.js.snap

@@ -30,16 +30,6 @@ exports[`RippleEffect rendering hoverType of- default 1`] = `
 </DocumentFragment>
 `;
 
-exports[`RippleEffect rendering hoverType of- test 1`] = `
-<DocumentFragment>
-  <div
-    class=" effect default border   hoverEffect "
-  >
-    RippleEffect
-  </div>
-</DocumentFragment>
-`;
-
 exports[`RippleEffect rendering isActive is true 1`] = `
 <DocumentFragment>
   <div

package/lib/Select/GroupSelect.js

@@ -420,9 +420,9 @@ var GroupSelectComponent = /*#__PURE__*/function (_PureComponent) {
           isReadOnly = _this$props4.isReadOnly;
       var normalizedAllOptions = this.normalizedAllOptions;
 
-      var _extractOptionId = (0, _dropDownUtils.extractOptionId)(id),
-          selected = _extractOptionId.id,
-          groupId = _extractOptionId.groupId;
+      var _ref = (0, _dropDownUtils.extractOptionId)(id) || (0, _dropDownUtils.extractOptionIdFromJson)(id, normalizedAllOptions),
+          selected = _ref.id,
+          groupId = _ref.groupId;
 
       if (!(0, _Common.getIsEmptyValue)(id) && !isReadOnly) {
         onChange && onChange({
@@ -477,8 +477,8 @@ var GroupSelectComponent = /*#__PURE__*/function (_PureComponent) {
   }, {
     key: "handleSelectFocus",
     value: function handleSelectFocus(e) {
-      var _ref = e || {},
-          target = _ref.target;
+      var _ref2 = e || {},
+          target = _ref2.target;
 
       target && target.setSelectionRange(target, 0);
     }
@@ -608,8 +608,8 @@ var GroupSelectComponent = /*#__PURE__*/function (_PureComponent) {
     }
   }, {
     key: "responsiveFunc",
-    value: function responsiveFunc(_ref2) {
-      var mediaQueryOR = _ref2.mediaQueryOR;
+    value: function responsiveFunc(_ref3) {
+      var mediaQueryOR = _ref3.mediaQueryOR;
       return {
         tabletMode: mediaQueryOR([{
           maxWidth: 700
@@ -677,9 +677,9 @@ var GroupSelectComponent = /*#__PURE__*/function (_PureComponent) {
           suggestionGroups = _this$handleFilterSug4.suggestionGroups,
           suggestionOptionIds = _this$handleFilterSug4.suggestionOptionIds;
 
-      var _ref3 = normalizedFormatOptions[selectedId] || {},
-          _ref3$value = _ref3.value,
-          selected = _ref3$value === void 0 ? '' : _ref3$value;
+      var _ref4 = normalizedFormatOptions[selectedId] || {},
+          _ref4$value = _ref4.value,
+          selected = _ref4$value === void 0 ? '' : _ref4$value;
 
       var setAriaId = this.getNextAriaId();
       var ariaErrorId = this.getNextAriaId();
@@ -765,8 +765,8 @@ var GroupSelectComponent = /*#__PURE__*/function (_PureComponent) {
       }))), !isReadOnly && !isDisabled && isPopupOpen ? /*#__PURE__*/_react["default"].createElement(_CustomResponsive.ResponsiveReceiver, {
         query: this.responsiveFunc,
         responsiveId: "Helmet"
-      }, function (_ref4) {
-        var tabletMode = _ref4.tabletMode;
+      }, function (_ref5) {
+        var tabletMode = _ref5.tabletMode;
         return /*#__PURE__*/_react["default"].createElement(_ResponsiveDropBox["default"], {
           animationStyle: animationStyle,
           boxPosition: position || "".concat(defaultDropBoxPosition, "Center"),

package/lib/Tag/__tests__/Tag.spec.js

@@ -0,0 +1,252 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Tag = _interopRequireDefault(require("../Tag"));
+
+var _react2 = require("@testing-library/react");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+describe('Tag component', function () {
+  var size = ['small', 'medium'];
+  var palette = ['default', 'danger', 'secondary', 'pureDotted', 'primaryDotted', 'dark', 'pureDarkDotted', 'darkPrimaryDotted', 'defaultLink'];
+  var closePalette = ['danger', 'primary'];
+  test('Should be render with the basic set of default props', function () {
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tag["default"], null)),
+        asFragment = _render.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render imageURL and hasAvatar', function () {
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tag["default"], {
+      hasAvatar: true,
+      imageURL: "https://www.w3schools.com/images/w3schools_green.jpg"
+    })),
+        asFragment = _render2.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render text', function () {
+    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tag["default"], {
+      text: "TagTest"
+    })),
+        asFragment = _render3.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render initial', function () {
+    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tag["default"], {
+      hasAvatar: true,
+      initial: "avatarIntial"
+    })),
+        asFragment = _render4.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(size)('Should render size  - %s', function (size) {
+    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tag["default"], {
+      size: size
+    })),
+        asFragment = _render5.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(size)('Should render onRemove - %s', function (size) {
+    var mockOnRemove = jest.fn();
+
+    var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tag["default"], {
+      active: true,
+      size: size,
+      onRemove: mockOnRemove
+    })),
+        asFragment = _render6.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(palette)('Should render active - %s', function (palette) {
+    size.map(function (sz) {
+      closePalette.map(function (cp) {
+        var mockOnRemove = jest.fn();
+
+        var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tag["default"], {
+          active: true,
+          size: sz,
+          palette: palette,
+          onRemove: mockOnRemove,
+          closePalette: cp
+        })),
+            asFragment = _render7.asFragment;
+
+        expect(asFragment()).toMatchSnapshot();
+      });
+    });
+  });
+  test('Should be render rounded is false', function () {
+    var mockOnRemove = jest.fn();
+
+    var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tag["default"], {
+      onRemove: mockOnRemove,
+      rounded: false
+    })),
+        asFragment = _render8.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(palette)('Should render palette - %s', function (palette) {
+    var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tag["default"], {
+      hasAvatar: true,
+      active: true,
+      palette: palette
+    })),
+        asFragment = _render9.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render disabled is true', function () {
+    var _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tag["default"], {
+      disabled: true
+    })),
+        asFragment = _render10.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render disabled is false', function () {
+    var _render11 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tag["default"], {
+      disabled: false
+    })),
+        asFragment = _render11.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(closePalette)('Should render closePalette - %s', function (closePalette) {
+    var mockOnRemove = jest.fn();
+
+    var _render12 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tag["default"], {
+      onRemove: mockOnRemove,
+      active: true,
+      closePalette: closePalette
+    })),
+        asFragment = _render12.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render onSelectTag', function () {
+    var mockonSelectTag = jest.fn();
+
+    var _render13 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tag["default"], {
+      onSelectTag: mockonSelectTag
+    })),
+        asFragment = _render13.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render closeTitle', function () {
+    var mockOnRemove = jest.fn();
+
+    var _render14 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tag["default"], {
+      onRemove: mockOnRemove,
+      closeTitle: "TagCloseTitle"
+    })),
+        asFragment = _render14.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render dataId when active if false', function () {
+    var mockOnRemove = jest.fn();
+
+    var _render15 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tag["default"], {
+      onRemove: mockOnRemove,
+      dataId: "TagdataId"
+    })),
+        asFragment = _render15.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render dataId when active if true', function () {
+    var mockOnRemove = jest.fn();
+
+    var _render16 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tag["default"], {
+      active: true,
+      onRemove: mockOnRemove,
+      dataId: "TagdataId"
+    })),
+        asFragment = _render16.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render iconName and iconSize', function () {
+    var _render17 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tag["default"], {
+      iconName: "ZD-androidd",
+      iconSize: "15"
+    })),
+        asFragment = _render17.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render tooltip', function () {
+    var _render18 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tag["default"], {
+      tooltip: "Tagtooltip"
+    })),
+        asFragment = _render18.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test.each(palette)('Should render avatarPalette - %s', function (palette) {
+    var _render19 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tag["default"], {
+      hasAvatar: true,
+      palette: palette,
+      avatarPalette: "primary"
+    })),
+        asFragment = _render19.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render needEffect is false', function () {
+    var _render20 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tag["default"], {
+      needEffect: false
+    })),
+        asFragment = _render20.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render isReadOnly is true', function () {
+    var _render21 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tag["default"], {
+      isReadOnly: true
+    })),
+        asFragment = _render21.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the Custom class', function () {
+    var mockOnRemove = jest.fn();
+
+    var _render22 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tag["default"], {
+      onRemove: mockOnRemove,
+      iconName: "ZD-androidd",
+      hasAvatar: true,
+      customClass: {
+        customTag: 'customCustomTag',
+        customTagClose: 'customCustomTagClose',
+        customTagIcon: 'customCustomTagIcon',
+        customAvatar: 'customCustomAvatar'
+      }
+    })),
+        asFragment = _render22.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering ally clearLabel', function () {
+    var mockOnRemove = jest.fn();
+
+    var _render23 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Tag["default"], {
+      onRemove: mockOnRemove,
+      a11y: {
+        clearLabel: 'TagClearLabel'
+      }
+    })),
+        asFragment = _render23.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+});