@zohodesk/components 1.0.0-temp-199.18 → 1.0.0-temp-246

package/lib/Radio/props/propTypes.js

@@ -7,12 +7,15 @@ exports.propTypes = void 0;
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _propTypes2 = require("../../Typography/props/propTypes");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 var propTypes = {
   active: _propTypes["default"].bool,
   checked: _propTypes["default"].bool,
   disabled: _propTypes["default"].bool,
+  secondaryText: _propTypes["default"].string,
   disabledTitle: _propTypes["default"].string,
   getRef: _propTypes["default"].func,
   id: _propTypes["default"].string,
@@ -33,7 +36,8 @@ var propTypes = {
   }),
   customProps: _propTypes["default"].exact({
     ContainerProps: _propTypes["default"].object,
-    LabelProps: _propTypes["default"].object
+    LabelProps: _propTypes["default"].object,
+    secondaryTextProps: _propTypes["default"].exact(_propTypes2.propTypes)
   }),
   a11y: _propTypes["default"].shape({
     ariaChecked: _propTypes["default"].bool,

package/lib/Select/GroupSelect.js

@@ -700,8 +700,7 @@ var GroupSelectComponent = /*#__PURE__*/function (_PureComponent) {
           TextBoxIconProps = _customProps$TextBoxI === void 0 ? {} : _customProps$TextBoxI,
           _customProps$TextBoxP = customProps.TextBoxProps,
           TextBoxProps = _customProps$TextBoxP === void 0 ? {} : _customProps$TextBoxP,
-          _customProps$Suggesti = customProps.SuggestionsProps,
-          SuggestionsProps = _customProps$Suggesti === void 0 ? {} : _customProps$Suggesti;
+          SuggestionsProps = customProps.SuggestionsProps;
       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 : '', " ").concat(iconOnHover && (isReadOnly || isDisabled) ? _SelectModule["default"].iconOnHoverReadonly : iconOnHover && !(isReadOnly || isDisabled) ? _SelectModule["default"].iconOnHoverStyle : ''),
         "data-id": dataIdSlctComp,

package/lib/Select/SelectWithAvatar.js

@@ -221,8 +221,8 @@ var SelectWithAvatarComponent = /*#__PURE__*/function (_SelectComponent) {
           needEffect = _this$props.needEffect,
           isLoading = _this$props.isLoading,
           dataSelectorId = _this$props.dataSelectorId,
-          getTargetRef = _this$props.getTargetRef,
-          customProps = _this$props.customProps;
+          customProps = _this$props.customProps,
+          getTargetRef = _this$props.getTargetRef;
       i18nKeys = Object.assign({}, i18nKeys, {
         emptyText: i18nKeys.emptyText || emptyMessage,
         searchEmptyText: i18nKeys.searchEmptyText || searchEmptyMessage
@@ -245,8 +245,7 @@ var SelectWithAvatarComponent = /*#__PURE__*/function (_SelectComponent) {
       var ariaErrorId = this.getNextAriaId();
       var TextBoxProps = customProps.TextBoxProps,
           DropdownSearchTextBoxProps = customProps.DropdownSearchTextBoxProps,
-          _customProps$Suggesti = customProps.SuggestionsProps,
-          SuggestionsProps = _customProps$Suggesti === void 0 ? {} : _customProps$Suggesti;
+          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),

package/lib/Select/SelectWithIcon.js

@@ -431,8 +431,7 @@ var SelectWithIcon = /*#__PURE__*/function (_Component) {
           htmlId = _this$props7.htmlId,
           isLoading = _this$props7.isLoading,
           dataSelectorId = _this$props7.dataSelectorId,
-          customProps = _this$props7.customProps,
-          customClass = _this$props7.customClass;
+          customProps = _this$props7.customProps;
       i18nKeys = Object.assign({}, i18nKeys, {
         emptyText: i18nKeys.emptyText || emptyMessage,
         searchEmptyText: i18nKeys.searchEmptyText || searchEmptyMessage
@@ -450,10 +449,7 @@ var SelectWithIcon = /*#__PURE__*/function (_Component) {
           DropdownSearchTextBoxProps = _customProps$Dropdown === void 0 ? {} : _customProps$Dropdown,
           _customProps$TextBoxI = customProps.TextBoxIconProps,
           TextBoxIconProps = _customProps$TextBoxI === void 0 ? {} : _customProps$TextBoxI,
-          _customProps$ListItem = customProps.ListItemProps,
-          ListItemProps = _customProps$ListItem === void 0 ? {} : _customProps$ListItem;
-      var _customClass$dropBoxC = customClass.dropBoxClass,
-          dropBoxClass = _customClass$dropBoxC === void 0 ? '' : _customClass$dropBoxC;
+          ListItemProps = customProps.ListItemProps;
       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,
@@ -546,10 +542,7 @@ var SelectWithIcon = /*#__PURE__*/function (_Component) {
           size: boxSize,
           isPadding: false,
           isResponsivePadding: true,
-          alignBox: "row",
-          customClass: {
-            customDropBox: dropBoxClass
-          }
+          alignBox: "row"
         }, isLoading ? /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
           align: "both",
           className: _SelectModule["default"].loader

package/lib/Select/props/defaultProps.js

@@ -91,8 +91,7 @@ var GroupSelect_defaultProps = {
   allowValueFallback: true
 };
 exports.GroupSelect_defaultProps = GroupSelect_defaultProps;
-
-var SelectWithAvatar_defaultProps = _defineProperty({
+var SelectWithAvatar_defaultProps = {
   animationStyle: 'bounce',
   defaultDropBoxPosition: 'bottom',
   dropBoxSize: 'small',
@@ -118,8 +117,7 @@ var SelectWithAvatar_defaultProps = _defineProperty({
   customProps: {},
   needEffect: true,
   isLoading: false
-}, "customProps", {});
-
+};
 exports.SelectWithAvatar_defaultProps = SelectWithAvatar_defaultProps;
 var SelectWithIcon_defaultProps = (_SelectWithIcon_defau = {
   isReadOnly: false,
@@ -130,5 +128,5 @@ var SelectWithIcon_defaultProps = (_SelectWithIcon_defau = {
   needListBorder: false,
   needSearch: false,
   boxSize: 'default'
-}, _defineProperty(_SelectWithIcon_defau, "needListBorder", false), _defineProperty(_SelectWithIcon_defau, "needCloseOnSelect", true), _defineProperty(_SelectWithIcon_defau, "borderColor", 'default'), _defineProperty(_SelectWithIcon_defau, "needTick", true), _defineProperty(_SelectWithIcon_defau, "searchBoxSize", 'small'), _defineProperty(_SelectWithIcon_defau, "size", 'medium'), _defineProperty(_SelectWithIcon_defau, "searchFields", []), _defineProperty(_SelectWithIcon_defau, "textBoxSize", 'medium'), _defineProperty(_SelectWithIcon_defau, "textBoxVariant", 'default'), _defineProperty(_SelectWithIcon_defau, "dataId", 'selectWithIcon'), _defineProperty(_SelectWithIcon_defau, "dataSelectorId", 'selectWithIcon'), _defineProperty(_SelectWithIcon_defau, "dropBoxSize", 'small'), _defineProperty(_SelectWithIcon_defau, "needIcon", true), _defineProperty(_SelectWithIcon_defau, "iconSize", '14'), _defineProperty(_SelectWithIcon_defau, "i18nKeys", {}), _defineProperty(_SelectWithIcon_defau, "isLoading", false), _defineProperty(_SelectWithIcon_defau, "isAbsolutePositioningNeeded", true), _defineProperty(_SelectWithIcon_defau, "isRestrictScroll", false), _defineProperty(_SelectWithIcon_defau, "customProps", {}), _defineProperty(_SelectWithIcon_defau, "customClass", {}), _SelectWithIcon_defau);
+}, _defineProperty(_SelectWithIcon_defau, "needListBorder", false), _defineProperty(_SelectWithIcon_defau, "needCloseOnSelect", true), _defineProperty(_SelectWithIcon_defau, "borderColor", 'default'), _defineProperty(_SelectWithIcon_defau, "needTick", true), _defineProperty(_SelectWithIcon_defau, "searchBoxSize", 'small'), _defineProperty(_SelectWithIcon_defau, "size", 'medium'), _defineProperty(_SelectWithIcon_defau, "searchFields", []), _defineProperty(_SelectWithIcon_defau, "textBoxSize", 'medium'), _defineProperty(_SelectWithIcon_defau, "textBoxVariant", 'default'), _defineProperty(_SelectWithIcon_defau, "dataId", 'selectWithIcon'), _defineProperty(_SelectWithIcon_defau, "dataSelectorId", 'selectWithIcon'), _defineProperty(_SelectWithIcon_defau, "dropBoxSize", 'small'), _defineProperty(_SelectWithIcon_defau, "needIcon", true), _defineProperty(_SelectWithIcon_defau, "iconSize", '14'), _defineProperty(_SelectWithIcon_defau, "i18nKeys", {}), _defineProperty(_SelectWithIcon_defau, "isLoading", false), _defineProperty(_SelectWithIcon_defau, "isAbsolutePositioningNeeded", true), _defineProperty(_SelectWithIcon_defau, "isRestrictScroll", false), _defineProperty(_SelectWithIcon_defau, "customProps", {}), _SelectWithIcon_defau);
 exports.SelectWithIcon_defaultProps = SelectWithIcon_defaultProps;

package/lib/Select/props/propTypes.js

@@ -203,8 +203,7 @@ var GroupSelect_propTypes = {
   isDefaultSelectValue: _propTypes["default"].bool,
   customProps: _propTypes["default"].shape({
     TextBoxProps: _propTypes["default"].object,
-    TextBoxIconProps: _propTypes["default"].object,
-    SuggestionsProps: _propTypes["default"].object
+    TextBoxIconProps: _propTypes["default"].object
   }),
   allowValueFallback: _propTypes["default"].bool
 };
@@ -269,10 +268,7 @@ var SelectWithAvatar_propTypes = _objectSpread(_objectSpread({}, Select_propType
   htmlId: _propTypes["default"].string,
   needEffect: _propTypes["default"].bool,
   isLoading: _propTypes["default"].bool,
-  dataSelectorId: _propTypes["default"].string,
-  customProps: _propTypes["default"].shape({
-    SuggestionsProps: _propTypes["default"].object
-  })
+  dataSelectorId: _propTypes["default"].string
 });
 
 exports.SelectWithAvatar_propTypes = SelectWithAvatar_propTypes;
@@ -339,11 +335,7 @@ var SelectWithIcon_propTypes = {
     TextBoxProps: _propTypes["default"].object,
     DropdownSearchTextBoxProps: _propTypes["default"].object,
     SuggestionsProps: _propTypes["default"].object,
-    TextBoxIconProps: _propTypes["default"].object,
-    ListItemProps: _propTypes["default"].object
-  }),
-  customClass: _propTypes["default"].shape({
-    dropBoxClass: _propTypes["default"].string
+    TextBoxIconProps: _propTypes["default"].object
   })
 };
 exports.SelectWithIcon_propTypes = SelectWithIcon_propTypes;

package/lib/Typography/Typography.js

@@ -15,6 +15,8 @@ var _cssJSLogic2 = _interopRequireDefault(require("./css/cssJSLogic"));
 
 var _utils = require("@zohodesk/utils");
 
+var _textHighlighter = require("./utils/textHighlighter");
+
 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,
+      $ui_highlightConfig = props.$ui_highlightConfig;
+  var _$ui_highlightConfig$ = $ui_highlightConfig.data,
+      highlightData = _$ui_highlightConfig$ === void 0 ? [] : _$ui_highlightConfig$;
   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 && highlightData.length > 0 && typeof children === 'string' ? (0, _textHighlighter.highlightText)(_objectSpread(_objectSpread({}, $ui_highlightConfig), {}, {
+    text: children
+  })) : children);
 };
 
 Typography.propTypes = _propTypes.propTypes;

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

@@ -6,6 +6,8 @@ var _react2 = require("@testing-library/react");
 
 var _Typography = _interopRequireDefault(require("../Typography"));
 
+var _Tag = _interopRequireDefault(require("../../Tag/Tag"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 describe('Typography', function () {
@@ -227,6 +229,440 @@ describe('Typography', function () {
     }, "Heading")),
         asFragment = _render24.asFragment;
 
+    expect(asFragment()).toMatchSnapshot();
+  });
+});
+describe('Typography with highlight', function () {
+  test('should render highlighted word', function () {
+    var _render25 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+      $ui_highlightConfig: {
+        data: ['sun'],
+        styleConfiguration: {
+          $ui_weight: 'bold'
+        }
+      }
+    }, "The sun was bright, the sun was warm, the sun was high in the sky.")),
+        asFragment = _render25.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('should render highlight by Index', function () {
+    var _render26 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+      $ui_highlightConfig: {
+        data: [{
+          text: 'sun',
+          index: [1, 2]
+        }, {
+          text: 'under',
+          index: 1
+        }],
+        styleConfiguration: {
+          $ui_weight: 'bold',
+          $ui_decoration: 'underline'
+        }
+      }
+    }, "The sun was bright, I walked under the sun, I talked under the sun.")),
+        asFragment = _render26.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('should render separate Styles per Word', function () {
+    var _render27 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+      $ui_highlightConfig: {
+        data: [{
+          text: 'sun',
+          styleConfiguration: {
+            $ui_weight: 'bold'
+          }
+        }, {
+          text: 'under',
+          styleConfiguration: {
+            $ui_decoration: 'underline'
+          }
+        }]
+      }
+    }, "The sun was bright, I walked under the sun, I talked under the sun.")),
+        asFragment = _render27.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('should render globally skip highlights at given indexes, with shouldExcludeIndices', function () {
+    var _render28 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+      $ui_highlightConfig: {
+        data: [{
+          text: 'sun',
+          index: 1
+        }, {
+          text: 'moon',
+          index: [2, 3]
+        }],
+        shouldExcludeIndices: true,
+        styleConfiguration: {
+          $ui_weight: 'bold',
+          $ui_decoration: 'underline'
+        }
+      }
+    }, "The sun was bright, the sun was warm, the sun was high in the sky.")),
+        asFragment = _render28.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('should render with separate excluded index option per word', function () {
+    var _render29 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+      $ui_highlightConfig: {
+        data: [{
+          text: 'sun',
+          index: 1,
+          shouldExcludeIndices: true
+        }, {
+          text: 'moon',
+          index: [2, 3],
+          shouldExcludeIndices: false
+        }],
+        styleConfiguration: {
+          $ui_weight: 'bold',
+          $ui_decoration: 'underline'
+        }
+      }
+    }, "The sun was bright, the moon was bright, the sun and moon again.")),
+        asFragment = _render29.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('should render with global tagName applied to all highlights', function () {
+    var _render30 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+      $ui_highlightConfig: {
+        data: [{
+          text: 'sun'
+        }, {
+          text: 'moon'
+        }],
+        tagName: 'i'
+      }
+    }, "The sun and moon were bright.")),
+        asFragment = _render30.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('should render with separate tagName for each highlighted word', function () {
+    var _render31 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+      $ui_highlightConfig: {
+        data: [{
+          text: 'sun',
+          tagName: 'i'
+        }, {
+          text: 'moon',
+          tagName: 'u'
+        }]
+      }
+    }, "The sun and moon were bright.")),
+        asFragment = _render31.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('should render with global case-sensitive option', function () {
+    var _render32 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+      $ui_highlightConfig: {
+        data: [{
+          text: 'Sun'
+        }, {
+          text: 'moon'
+        }],
+        styleConfiguration: {
+          $ui_weight: 'bold',
+          $ui_decoration: 'underline'
+        },
+        isCaseSensitive: true
+      }
+    }, "The Sun was bright, the moon was bright, the sun was warm.")),
+        asFragment = _render32.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('should render with separate case-sensitive option per word', function () {
+    var _render33 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+      $ui_highlightConfig: {
+        data: [{
+          text: 'Sun',
+          isCaseSensitive: true
+        }, {
+          text: 'Moon',
+          isCaseSensitive: false
+        }],
+        styleConfiguration: {
+          $ui_weight: 'bold',
+          $ui_decoration: 'underline'
+        }
+      }
+    }, "The Sun was bright, the Moon was bright, the sun was warm.")),
+        asFragment = _render33.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('should render with global whole-word match only', function () {
+    var _render34 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+      $ui_highlightConfig: {
+        data: [{
+          text: 'Sun'
+        }, {
+          text: 'moon'
+        }],
+        styleConfiguration: {
+          $ui_weight: 'bold',
+          $ui_decoration: 'underline'
+        },
+        isWholeWord: true
+      }
+    }, "Sunflower is a flower. The Sun was bright, the moonlight was bright.")),
+        asFragment = _render34.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('should render with separate whole-word option per word', function () {
+    var _render35 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+      $ui_highlightConfig: {
+        data: [{
+          text: 'Sun',
+          isWholeWord: true
+        }, {
+          text: 'moon',
+          isWholeWord: false
+        }],
+        styleConfiguration: {
+          $ui_weight: 'bold',
+          $ui_decoration: 'underline'
+        }
+      }
+    }, "Sunflower is a flower. The Sun was bright, the moonlight was bright.")),
+        asFragment = _render35.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('should render with global custom style for all highlights', function () {
+    var _render36 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+      $ui_highlightConfig: {
+        data: [{
+          text: 'Sun'
+        }, {
+          text: 'moon'
+        }],
+        styleConfiguration: {
+          customStyle: {
+            backgroundColor: 'lightgreen'
+          }
+        }
+      }
+    }, "The sun and moon were bright.")),
+        asFragment = _render36.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('should render with separate custom style per word', function () {
+    var _render37 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+      $ui_highlightConfig: {
+        data: [{
+          text: 'Sun',
+          styleConfiguration: {
+            customStyle: {
+              backgroundColor: 'lightgreen'
+            }
+          }
+        }, {
+          text: 'moon',
+          styleConfiguration: {
+            customStyle: {
+              backgroundColor: 'orange'
+            }
+          }
+        }]
+      }
+    }, "The sun and moon were bright.")),
+        asFragment = _render37.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('should render with global custom class for all highlights', function () {
+    var _render38 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+      $ui_highlightConfig: {
+        data: [{
+          text: 'Sun'
+        }, {
+          text: 'moon'
+        }],
+        styleConfiguration: {
+          $ui_className: 'global_custom_class'
+        }
+      }
+    }, "The sun and moon were bright.")),
+        asFragment = _render38.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('should render with separate custom class for each highlighted word', function () {
+    var _render39 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+      $ui_highlightConfig: {
+        data: [{
+          text: 'Sun',
+          styleConfiguration: {
+            $ui_className: 'separate_custom_class_sun'
+          }
+        }, {
+          text: 'moon',
+          styleConfiguration: {
+            $ui_className: 'separate_custom_class_moon'
+          }
+        }]
+      }
+    }, "The sun and moon were bright.")),
+        asFragment = _render39.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('should render customised render the highlight element for all highlighted words', function () {
+    var _render40 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+      $ui_highlightConfig: {
+        data: [{
+          text: 'sun'
+        }],
+        renderHighlight: /*#__PURE__*/_react["default"].createElement(_Tag["default"], {
+          text: "Sun"
+        })
+      }
+    }, "The sun was bright.")),
+        asFragment = _render40.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('should render separate customised render the highlight element for each highlighted word', function () {
+    var _render41 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+      $ui_highlightConfig: {
+        data: [{
+          text: 'Sun',
+          renderHighlight: /*#__PURE__*/_react["default"].createElement(_Tag["default"], {
+            text: "Sun"
+          })
+        }, {
+          text: 'moon',
+          renderHighlight: /*#__PURE__*/_react["default"].createElement(_Tag["default"], {
+            text: "Moon"
+          })
+        }]
+      }
+    }, "The sun and moon were bright.")),
+        asFragment = _render41.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('should render for RegEx Characters check', function () {
+    var _render42 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+      $ui_highlightConfig: {
+        data: [{
+          text: '$un'
+        }, {
+          text: 'm**n'
+        }],
+        styleConfiguration: {
+          customStyle: {
+            backgroundColor: 'lightgreen'
+          }
+        }
+      }
+    }, "The sun and moon were bright. and the m**n get sunlight from the $un, The Sun provides light to its nearby stars")),
+        asFragment = _render42.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('should render for combination of configuration check', function () {
+    var _render43 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+      $ui_highlightConfig: {
+        data: [{
+          text: 'Sun',
+          index: 1,
+          shouldExcludeIndices: true,
+          isWholeWord: true,
+          isCaseSensitive: true
+        }],
+        styleConfiguration: {
+          customStyle: {
+            backgroundColor: 'lightgreen'
+          }
+        }
+      }
+    }, "The sun and moon were bright. and the moon get sunlight from the Sun, The Sun provides light to its nearby stars")),
+        asFragment = _render43.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('should render for priority based check - it priorities the global renderHighlight over the style configurations from the global', function () {
+    var _render44 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+      $ui_highlightConfig: {
+        data: ['sunlight'],
+        styleConfiguration: {
+          $ui_decoration: 'underline'
+        },
+        renderHighlight: function renderHighlight(text) {
+          return /*#__PURE__*/_react["default"].createElement("a", {
+            href: "https://www.zoho.com",
+            target: "_blank",
+            rel: "noopener noreferrer"
+          }, " ", text, " ");
+        }
+      }
+    }, "1 Sun Moon 2 sun moon 3 sunmoon 4 SUN MOON 5 sun moon 6 sunlight moonlight")),
+        asFragment = _render44.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('should render for priority based check - it priorities the style configurations from the data object over the global renderHighlight', function () {
+    var _render45 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+      $ui_highlightConfig: {
+        data: [{
+          text: 'sunlight',
+          styleConfiguration: {
+            $ui_decoration: 'underline'
+          }
+        }],
+        renderHighlight: function renderHighlight(text) {
+          return /*#__PURE__*/_react["default"].createElement("a", {
+            href: "https://www.zoho.com",
+            target: "_blank",
+            rel: "noopener noreferrer"
+          }, " ", text, " ");
+        }
+      }
+    }, "1 Sun Moon 2 sun moon 3 sunmoon 4 SUN MOON 5 sun moon 6 sunlight moonlight")),
+        asFragment = _render45.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('should render for priority based check - it priorities the renderHighlight from the data object over the global renderHighlight, global style configuration and style configuration from the data object', function () {
+    var _render46 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Typography["default"], {
+      $ui_highlightConfig: {
+        data: [{
+          text: 'sunlight',
+          styleConfiguration: {
+            $ui_decoration: 'underline'
+          },
+          renderHighlight: function renderHighlight(text) {
+            return /*#__PURE__*/_react["default"].createElement("b", null, " ", text, " ");
+          }
+        }],
+        styleConfiguration: {
+          customStyle: {
+            backgroundColor: 'lightgreen'
+          }
+        },
+        renderHighlight: function renderHighlight(text) {
+          return /*#__PURE__*/_react["default"].createElement("a", {
+            href: "https://www.zoho.com",
+            target: "_blank",
+            rel: "noopener noreferrer"
+          }, " ", text, " ");
+        }
+      }
+    }, "1 Sun Moon 2 sun moon 3 sunmoon 4 SUN MOON 5 sun moon 6 sunlight moonlight")),
+        asFragment = _render46.asFragment;
+
     expect(asFragment()).toMatchSnapshot();
   });
 });