@zohodesk/components 1.0.0-temp-234 → 1.0.0-temp-235

package/lib/Select/Select.js

@@ -323,17 +323,13 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
           textField = props.textField,
           allowValueFallback = props.allowValueFallback,
           _props$customProps = props.customProps,
-          customProps = _props$customProps === void 0 ? _dropDownUtils.dummyObj : _props$customProps,
-          searchFields = props.searchFields,
-          secondaryField = props.secondaryField;
+          customProps = _props$customProps === void 0 ? _dropDownUtils.dummyObj : _props$customProps;
       var _customProps$listItem = customProps.listItemProps,
           listItemProps = _customProps$listItem === void 0 ? _dropDownUtils.dummyObj : _customProps$listItem;
       return this.formatOptions({
         options: options,
         valueField: valueField,
         textField: textField,
-        secondaryField: secondaryField,
-        searchFields: searchFields,
         listItemProps: listItemProps,
         allowValueFallback: allowValueFallback
       });
@@ -492,7 +488,6 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
     value: function handleFilterSuggestions() {
       var _this$props5 = this.props,
           needLocalSearch = _this$props5.needLocalSearch,
-          searchFields = _this$props5.searchFields,
           _this$props5$excludeO = _this$props5.excludeOptions,
           excludeOptions = _this$props5$excludeO === void 0 ? dummyArray : _this$props5$excludeO;
       var _this$state3 = this.state,
@@ -510,7 +505,6 @@ var SelectComponent = /*#__PURE__*/function (_Component) {
         options: options,
         selectedOptions: excludeOptions,
         searchStr: searchStr,
-        searchFields: searchFields,
         needSearch: needLocalSearch
       }),
           suggestions = _this$getFilterSugges.suggestions,

package/lib/Select/SelectWithAvatar.js

@@ -51,8 +51,6 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
@@ -101,14 +99,12 @@ var SelectWithAvatarComponent = /*#__PURE__*/function (_SelectComponent) {
           valueField = props.valueField,
           textField = props.textField,
           imageField = props.imageField,
-          secondaryField = props.secondaryField,
           allowValueFallback = props.allowValueFallback;
       return this.formatOptions({
         options: options,
         valueField: valueField,
         textField: textField,
         imageField: imageField,
-        secondaryField: secondaryField,
         optionType: 'avatar',
         allowValueFallback: allowValueFallback
       });
@@ -219,7 +215,6 @@ var SelectWithAvatarComponent = /*#__PURE__*/function (_SelectComponent) {
           needEffect = _this$props.needEffect,
           isLoading = _this$props.isLoading,
           dataSelectorId = _this$props.dataSelectorId,
-          customProps = _this$props.customProps,
           getTargetRef = _this$props.getTargetRef;
       i18nKeys = Object.assign({}, i18nKeys, {
         emptyText: i18nKeys.emptyText || emptyMessage,
@@ -241,9 +236,6 @@ var SelectWithAvatarComponent = /*#__PURE__*/function (_SelectComponent) {
 
       var setAriaId = this.getNextAriaId();
       var ariaErrorId = this.getNextAriaId();
-      var TextBoxProps = customProps.TextBoxProps,
-          DropdownSearchTextBoxProps = customProps.DropdownSearchTextBoxProps,
-          SuggestionsProps = customProps.SuggestionsProps;
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(_MultiSelectModule["default"].wrapper, "  ").concat(isDisabled ? _MultiSelectModule["default"].disabled : '', " ").concat(isReadOnly ? _MultiSelectModule["default"].readOnly : '', " ").concat(needEffect && !(isDisabled || isReadOnly) ? _MultiSelectModule["default"].effect : '', " ").concat(className ? className : ''),
         "data-id": "".concat(isDisabled ? "".concat(dataId, "_disabled") : isReadOnly ? "".concat(dataId, "_readOnly") : dataId),
@@ -275,7 +267,7 @@ var SelectWithAvatarComponent = /*#__PURE__*/function (_SelectComponent) {
         flexible: true,
         className: _MultiSelectModule["default"].textBox,
         dataId: "".concat(dataId, "_textBox")
-      }, /*#__PURE__*/_react["default"].createElement(_TextBox["default"], _extends({
+      }, /*#__PURE__*/_react["default"].createElement(_TextBox["default"], {
         a11y: {
           ariaActivedescendant: selectedId,
           role: 'combobox',
@@ -304,7 +296,7 @@ var SelectWithAvatarComponent = /*#__PURE__*/function (_SelectComponent) {
         borderColor: borderColor,
         htmlId: htmlId,
         autoComplete: false
-      }, TextBoxProps)))), !isReadOnly && !isDisabled && isPopupOpen ? /*#__PURE__*/_react["default"].createElement(_CustomResponsive.ResponsiveReceiver, {
+      }))), !isReadOnly && !isDisabled && isPopupOpen ? /*#__PURE__*/_react["default"].createElement(_CustomResponsive.ResponsiveReceiver, {
         query: this.responsiveFunc,
         responsiveId: "Helmet"
       }, function (_ref4) {
@@ -335,7 +327,7 @@ var SelectWithAvatarComponent = /*#__PURE__*/function (_SelectComponent) {
           onScroll: _this2.handleScroll
         }, needSearch ? /*#__PURE__*/_react["default"].createElement(_Card.CardHeader, null, /*#__PURE__*/_react["default"].createElement("div", {
           className: "".concat(_SelectModule["default"].search, " ").concat(_SelectModule["default"][size])
-        }, /*#__PURE__*/_react["default"].createElement(_TextBoxIcon["default"], _extends({
+        }, /*#__PURE__*/_react["default"].createElement(_TextBoxIcon["default"], {
           inputRef: _this2.searchInputRef,
           maxLength: maxLength,
           onChange: _this2.handleSearch,
@@ -351,7 +343,7 @@ var SelectWithAvatarComponent = /*#__PURE__*/function (_SelectComponent) {
             ariaDescribedby: ariaErrorId
           },
           autoComplete: false
-        }, DropdownSearchTextBoxProps)))) : null, /*#__PURE__*/_react["default"].createElement(_Card.CardContent, {
+        }))) : null, /*#__PURE__*/_react["default"].createElement(_Card.CardContent, {
           shrink: true,
           customClass: !tabletMode && dropBoxSize ? _MultiSelectModule["default"][dropBoxSize] : '',
           eleRef: _this2.suggestionContainerRef
@@ -362,7 +354,7 @@ var SelectWithAvatarComponent = /*#__PURE__*/function (_SelectComponent) {
           a11y: {
             role: 'heading'
           }
-        })) : null, suggestions.length ? /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], _extends({
+        })) : null, suggestions.length ? /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], {
           dataId: "".concat(dataId, "_Options"),
           activeId: selectedId,
           suggestions: suggestions,
@@ -379,7 +371,7 @@ var SelectWithAvatarComponent = /*#__PURE__*/function (_SelectComponent) {
             ariaParentRole: 'listbox',
             role: 'option'
           }
-        }, SuggestionsProps)) : /*#__PURE__*/_react["default"].createElement(_EmptyState["default"], {
+        }) : /*#__PURE__*/_react["default"].createElement(_EmptyState["default"], {
           isLoading: isFetchingOptions,
           options: options,
           searchString: searchStr,

package/lib/Select/SelectWithIcon.js

@@ -401,7 +401,6 @@ var SelectWithIcon = /*#__PURE__*/function (_Component) {
           targetOffset = _this$props7.targetOffset,
           isRestrictScroll = _this$props7.isRestrictScroll,
           valueKey = _this$props7.valueKey,
-          secondaryValueKey = _this$props7.secondaryValueKey,
           idKey = _this$props7.idKey,
           needListBorder = _this$props7.needListBorder,
           needTick = _this$props7.needTick,
@@ -441,8 +440,7 @@ var SelectWithIcon = /*#__PURE__*/function (_Component) {
           _customProps$Dropdown = customProps.DropdownSearchTextBoxProps,
           DropdownSearchTextBoxProps = _customProps$Dropdown === void 0 ? {} : _customProps$Dropdown,
           _customProps$TextBoxI = customProps.TextBoxIconProps,
-          TextBoxIconProps = _customProps$TextBoxI === void 0 ? {} : _customProps$TextBoxI,
-          ListItemProps = customProps.ListItemProps;
+          TextBoxIconProps = _customProps$TextBoxI === void 0 ? {} : _customProps$TextBoxI;
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(_SelectModule["default"].container, " ").concat(_SelectModule["default"]["box_".concat(size)], " ").concat(isReadOnly ? _SelectModule["default"].readonly : '', " ").concat(borderColor === 'transparent' ? _SelectModule["default"].transparentContainer : ''),
         "data-title": isDisabled ? title : null,
@@ -575,10 +573,9 @@ var SelectWithIcon = /*#__PURE__*/function (_Component) {
           var iconName = options.iconName,
               iconSize = options.iconSize,
               iconColor = options.iconColor;
-          return /*#__PURE__*/_react["default"].createElement(_ListItemWithIcon["default"], _extends({
+          return /*#__PURE__*/_react["default"].createElement(_ListItemWithIcon["default"], {
             key: options[idKey],
             value: options[valueKey],
-            secondaryValue: options[secondaryValueKey],
             size: "medium",
             onClick: _this5.handleChange,
             id: options[idKey],
@@ -600,7 +597,7 @@ var SelectWithIcon = /*#__PURE__*/function (_Component) {
               ariaSelected: selectedId === options[idKey],
               ariaLabel: options[valueKey]
             }
-          }, ListItemProps));
+          });
         })) : /*#__PURE__*/_react["default"].createElement(_EmptyState["default"], {
           isLoading: isFetchingOptions,
           options: options,

package/lib/Select/props/defaultProps.js

@@ -112,7 +112,6 @@ var SelectWithAvatar_defaultProps = {
   isAbsolutePositioningNeeded: true,
   isRestrictScroll: false,
   i18nKeys: {},
-  customProps: {},
   needEffect: true,
   isLoading: false
 };

package/lib/Select/props/propTypes.js

@@ -80,8 +80,6 @@ var Select_propTypes = {
   searchBoxSize: _propTypes["default"].string,
   searchDebounceTime: _propTypes["default"].number,
   searchEmptyMessage: _propTypes["default"].string,
-  searchFields: _propTypes["default"].arrayOf(_propTypes["default"].string),
-  secondaryField: _propTypes["default"].string,
   selectedValue: _propTypes["default"].oneOfType([_propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]), _propTypes["default"].shape({
     id: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
     text: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number])
@@ -140,7 +138,6 @@ var GroupSelect_propTypes = {
   searchBoxPlaceHolder: _propTypes["default"].string,
   needSearch: _propTypes["default"].bool,
   searchEmptyMessage: _propTypes["default"].string,
-  secondaryField: _propTypes["default"].string,
   getRef: _propTypes["default"].func,
   isDisabled: _propTypes["default"].bool,
   isReadOnly: _propTypes["default"].bool,
@@ -306,7 +303,6 @@ var SelectWithIcon_propTypes = {
   removeClose: _propTypes["default"].func,
   searchBoxPlaceHolder: _propTypes["default"].string,
   searchEmptyMessage: _propTypes["default"].string,
-  secondaryValueKey: _propTypes["default"].string,
   selectedId: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number]),
   selectedValue: _propTypes["default"].string,
   size: _propTypes["default"].oneOf(['small', 'medium']),
@@ -331,7 +327,6 @@ var SelectWithIcon_propTypes = {
   customProps: _propTypes["default"].shape({
     TextBoxProps: _propTypes["default"].object,
     DropdownSearchTextBoxProps: _propTypes["default"].object,
-    SuggestionsProps: _propTypes["default"].object,
     TextBoxIconProps: _propTypes["default"].object
   })
 };

package/lib/Typography/Typography.js

@@ -15,6 +15,8 @@ var _cssJSLogic2 = _interopRequireDefault(require("./css/cssJSLogic"));
 
 var _utils = require("@zohodesk/utils");
 
+var _highlight = require("./highlight");
+
 var _TypographyModule = _interopRequireDefault(require("./css/Typography.module.css"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
@@ -33,7 +35,10 @@ var Typography = function Typography(props) {
       customId = props.customId,
       $tagAttributes_text = props.$tagAttributes_text,
       $a11yAttributes_text = props.$a11yAttributes_text,
-      customStyle = props.customStyle;
+      customStyle = props.customStyle,
+      highlights = props.highlights;
+  var _highlights$highlight = highlights.highlightData,
+      highlightData = _highlights$highlight === void 0 ? [] : _highlights$highlight;
   var style = (0, _utils.mergeStyle)(_TypographyModule["default"], customStyle);
 
   var _cssJSLogic = (0, _cssJSLogic2["default"])({
@@ -47,7 +52,9 @@ var Typography = function Typography(props) {
     'data-title': $i18n_dataTitle,
     'data-id': customId,
     'data-test-id': testId
-  }, $tagAttributes_text), $a11yAttributes_text), children);
+  }, $tagAttributes_text), $a11yAttributes_text), highlightData.length > 0 && typeof children === 'string' ? (0, _highlight.highlight)(_objectSpread(_objectSpread({}, highlights), {}, {
+    text: children
+  })) : children);
 };
 
 Typography.propTypes = _propTypes.propTypes;

package/lib/Typography/__tests__/Typography.spec.js

@@ -0,0 +1,342 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Typography = _interopRequireDefault(require("../Typography"));
+
+var _react2 = require("@testing-library/react");
+
+var _Tag = _interopRequireDefault(require("../../Tag/Tag"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+describe('Typography component', function () {
+  var weights = ['regular', 'light', 'semibold', 'bold'];
+  var decorations = ['default', 'underline', 'strike', 'overline'];
+  test('should be render with the basic set of default props', function () {
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], null)),
+        asFragment = _render.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('should be render with text children', function () {
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], null, "Text testing")),
+        asFragment = _render2.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('should render highlighted word', function () {
+    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+      highlights: {
+        highlightData: ['sun'],
+        highlightsStyle: {
+          weight: 'bold'
+        }
+      }
+    }, "The sun was bright, the sun was warm, the sun was high in the sky.")),
+        asFragment = _render3.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('should render highlight by Index', function () {
+    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+      highlights: {
+        highlightData: [{
+          highlightText: 'sun',
+          index: [1, 2]
+        }, {
+          highlightText: 'under',
+          index: 1
+        }],
+        highlightsStyle: {
+          weight: 'bold',
+          decoration: 'underline'
+        }
+      }
+    }, "The sun was bright, I walked under the sun, I talked under the sun.")),
+        asFragment = _render4.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('should render separate Styles per Word', function () {
+    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+      highlights: {
+        highlightData: [{
+          highlightText: 'sun',
+          highlightsStyle: {
+            weight: 'bold'
+          }
+        }, {
+          highlightText: 'under',
+          highlightsStyle: {
+            decoration: 'underline'
+          }
+        }]
+      }
+    }, "The sun was bright, I walked under the sun, I talked under the sun.")),
+        asFragment = _render5.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('should render globally skip highlights at given indexes, with isExcludedIndex', function () {
+    var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+      highlights: {
+        highlightData: [{
+          highlightText: 'sun',
+          index: 1
+        }, {
+          highlightText: 'moon',
+          index: [2, 3]
+        }],
+        isExcludedIndex: true,
+        highlightsStyle: {
+          weight: 'bold',
+          decoration: 'underline'
+        }
+      }
+    }, "The sun was bright, the sun was warm, the sun was high in the sky.")),
+        asFragment = _render6.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('should render with separate excluded index option per word', function () {
+    var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+      highlights: {
+        highlightData: [{
+          highlightText: 'sun',
+          index: 1,
+          isExcludedIndex: true
+        }, {
+          highlightText: 'moon',
+          index: [2, 3],
+          isExcludedIndex: false
+        }],
+        highlightsStyle: {
+          weight: 'bold',
+          decoration: 'underline'
+        }
+      }
+    }, "The sun was bright, the moon was bright, the sun and moon again.")),
+        asFragment = _render7.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('should render with global tagName applied to all highlights', function () {
+    var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+      highlights: {
+        highlightData: [{
+          highlightText: 'sun'
+        }, {
+          highlightText: 'moon'
+        }],
+        tagName: 'i'
+      }
+    }, "The sun and moon were bright.")),
+        asFragment = _render8.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('should render with separate tagName for each highlighted word', function () {
+    var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+      highlights: {
+        highlightData: [{
+          highlightText: 'sun',
+          tagName: 'i'
+        }, {
+          highlightText: 'moon',
+          tagName: 'u'
+        }]
+      }
+    }, "The sun and moon were bright.")),
+        asFragment = _render9.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('should render with global case-sensitive option', function () {
+    var _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+      highlights: {
+        highlightData: [{
+          highlightText: 'Sun'
+        }, {
+          highlightText: 'moon'
+        }],
+        highlightsStyle: {
+          weight: 'bold',
+          decoration: 'underline'
+        },
+        isCaseSensitive: true
+      }
+    }, "The Sun was bright, the moon was bright, the sun was warm.")),
+        asFragment = _render10.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('should render with separate case-sensitive option per word', function () {
+    var _render11 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+      highlights: {
+        highlightData: [{
+          highlightText: 'Sun',
+          isCaseSensitive: true
+        }, {
+          highlightText: 'Moon',
+          isCaseSensitive: false
+        }],
+        highlightsStyle: {
+          weight: 'bold',
+          decoration: 'underline'
+        }
+      }
+    }, "The Sun was bright, the Moon was bright, the sun was warm.")),
+        asFragment = _render11.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('should render with global whole-word match only', function () {
+    var _render12 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+      highlights: {
+        highlightData: [{
+          highlightText: 'Sun'
+        }, {
+          highlightText: 'moon'
+        }],
+        highlightsStyle: {
+          weight: 'bold',
+          decoration: 'underline'
+        },
+        isWholeWord: true
+      }
+    }, "Sunflower is a flower. The Sun was bright, the moonlight was bright.")),
+        asFragment = _render12.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('should render with separate whole-word option per word', function () {
+    var _render13 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+      highlights: {
+        highlightData: [{
+          highlightText: 'Sun',
+          isWholeWord: true
+        }, {
+          highlightText: 'moon',
+          isWholeWord: false
+        }],
+        highlightsStyle: {
+          weight: 'bold',
+          decoration: 'underline'
+        }
+      }
+    }, "Sunflower is a flower. The Sun was bright, the moonlight was bright.")),
+        asFragment = _render13.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('should render with global custom style for all highlights', function () {
+    var _render14 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+      highlights: {
+        highlightData: [{
+          highlightText: 'Sun'
+        }, {
+          highlightText: 'moon'
+        }],
+        customStyle: {
+          backgroundColor: 'lightgreen'
+        }
+      }
+    }, "The sun and moon were bright.")),
+        asFragment = _render14.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('should render with separate custom style per word', function () {
+    var _render15 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+      highlights: {
+        highlightData: [{
+          highlightText: 'Sun',
+          customStyle: {
+            backgroundColor: 'lightgreen'
+          }
+        }, {
+          highlightText: 'moon',
+          customStyle: {
+            backgroundColor: 'orange'
+          }
+        }]
+      }
+    }, "The sun and moon were bright.")),
+        asFragment = _render15.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('should render with global custom class for all highlights', function () {
+    var _render16 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+      highlights: {
+        highlightData: [{
+          highlightText: 'Sun'
+        }, {
+          highlightText: 'moon'
+        }],
+        highlightsStyle: {
+          customClass: 'global_custom_class'
+        }
+      }
+    }, "The sun and moon were bright.")),
+        asFragment = _render16.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('should render with separate custom class for each highlighted word', function () {
+    var _render17 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+      highlights: {
+        highlightData: [{
+          highlightText: 'Sun',
+          highlightsStyle: {
+            customClass: 'separate_custom_class_sun'
+          }
+        }, {
+          highlightText: 'moon',
+          highlightsStyle: {
+            customClass: 'separate_custom_class_moon'
+          }
+        }]
+      }
+    }, "The sun and moon were bright.")),
+        asFragment = _render17.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('should render customised render the highlight element for all highlighted words', function () {
+    var _render18 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+      highlights: {
+        highlightData: [{
+          highlightText: 'sun'
+        }],
+        render: /*#__PURE__*/_react["default"].createElement(_Tag["default"], {
+          text: "Sun"
+        })
+      }
+    }, "The sun was bright.")),
+        asFragment = _render18.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('should render separate customised render the highlight element for each highlighted word', function () {
+    var _render19 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+      highlights: {
+        highlightData: [{
+          highlightText: 'Sun',
+          render: /*#__PURE__*/_react["default"].createElement(_Tag["default"], {
+            text: "Sun"
+          })
+        }, {
+          highlightText: 'moon',
+          render: /*#__PURE__*/_react["default"].createElement(_Tag["default"], {
+            text: "Moon"
+          })
+        }]
+      }
+    }, "The sun and moon were bright.")),
+        asFragment = _render19.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+});