@zohodesk/dot 1.0.0-temp-218.1 → 1.0.0-temp-187.18

package/es/form/fields/Fields.module.css

@@ -226,7 +226,10 @@ position: relative;
 [dir=rtl] .rightPlaceholder{
   left:var(--zd_size15) 
 }
-   
 .phoneField{
   composes: ltr-zone  from '~@zohodesk/components/es/common/common.module.css';
+}
+
+.lineClampPickListItem{
+  --line-clamp: var(--picklist-field-line-clamp,3);
 }

package/es/form/fields/TagsMultiSelect/TagsMultiSelect.js

@@ -160,12 +160,14 @@ export default class TagsMultiSelect extends React.Component {
     let {
       tagCustomClass = '',
       listItemClass = '',
-      textBoxIconWrapperClass = ''
+      textBoxIconWrapperClass = '',
+      dropBoxClass = ''
     } = customClass;
     const {
       TextBoxIconProps = {},
       TagWrapperProps = {},
-      TagProps = {}
+      TagProps = {},
+      ListItemProps = {}
     } = customProps;
     const isEditable = !isReadOnly;
     return /*#__PURE__*/React.createElement("div", {
@@ -254,7 +256,8 @@ export default class TagsMultiSelect extends React.Component {
         boxPosition: boxPosition,
         isPadding: false,
         customClass: {
-          customDropBoxWrap: style.dropdown
+          customDropBoxWrap: style.dropdown,
+          customDropBox: dropBoxClass
         },
         dataId: `${dataId}_dropbox`,
         isResponsivePadding: true,
@@ -286,7 +289,7 @@ export default class TagsMultiSelect extends React.Component {
         let {
           name,
           isNew,
-          listItemProps
+          listProps
         } = item;
         return /*#__PURE__*/React.createElement(React.Fragment, null, searchList.length > 1 && isNew ? /*#__PURE__*/React.createElement(DropDownSeparator, null) : null, /*#__PURE__*/React.createElement(ListItem, {
           key: index,
@@ -299,8 +302,9 @@ export default class TagsMultiSelect extends React.Component {
           highlight: selectSearchIndex === index,
           getRef: this.getSelectedItemRef,
           isDisabled: listDisabled,
-          customProps: listItemProps,
-          customClass: listItemClass
+          customProps: listProps,
+          customClass: listItemClass,
+          ...ListItemProps
         }, isNew ? /*#__PURE__*/React.createElement(Container, {
           alignBox: "row",
           align: "vertical"

package/es/form/fields/TagsMultiSelect/props/propTypes.js

@@ -52,7 +52,8 @@ export const propTypes = {
   customProps: PropTypes.shape({
     TextBoxIconProps: PropTypes.object,
     TagWrapperProps: PropTypes.object,
-    TagProps: PropTypes.object
+    TagProps: PropTypes.object,
+    ListItemProps: PropTypes.object
   }),
   isFocus: PropTypes.bool
 };

package/es/list/DepartmentDropDown/DepartmentDropDown.js

@@ -48,15 +48,19 @@ class DepartmentDropDown extends Component {
       onSearch,
       needSearchFetching,
       searchStr,
-      i18nKeys
+      i18nKeys,
+      customProps
     } = this.props;
+    const {
+      ToggleDropDownProps = {}
+    } = customProps;
     let {
       title = 'Move Department',
       searchEmptyText = 'No results found',
       searchErrorText = 'No results',
       placeholder = 'Search Department'
     } = i18nKeys;
-    return /*#__PURE__*/React.createElement(ToggleDropDown, {
+    return /*#__PURE__*/React.createElement(ToggleDropDown, { ...ToggleDropDownProps,
       title: title,
       options: departmentList,
       value: /*#__PURE__*/React.createElement(DepartmentText, {

package/es/list/DepartmentDropDown/props/defaultProps.js

@@ -3,5 +3,6 @@ export const defaultProps = {
   isPopupActive: true,
   isNextOptions: false,
   searchStr: '',
-  i18nKeys: {}
+  i18nKeys: {},
+  customProps: {}
 };

package/es/list/DepartmentDropDown/props/propTypes.js

@@ -20,5 +20,8 @@ export const propTypes = {
     searchEmptyText: PropTypes.string,
     searchErrorText: PropTypes.string,
     placeholder: PropTypes.string
+  }),
+  customProps: PropTypes.shape({
+    ToggleDropDownProps: PropTypes.object
   })
 };

package/es/list/SecondaryText/AccountName.js

@@ -7,7 +7,6 @@ import { AccountName_propTypes } from "./props/propTypes";
 /**** Components ****/
 
 import { Container, Box } from '@zohodesk/components/es/Layout';
-import { highlightText } from '@zohodesk/components/es/Typography/utils/textHighlighter';
 import Link from "../../Link/Link";
 /**** CSS ****/
 
@@ -29,13 +28,8 @@ export default class AccountName extends Component {
       secondaryAccountHref,
       secondaryAccountClick,
       secondaryAccountText,
-      highlights,
-      enableHighlight,
       customProps
     } = this.props;
-    const displayContent = enableHighlight && highlights?.data && highlights?.data?.length > 0 && text ? highlightText({ ...highlights,
-      text
-    }) : text;
     let {
       LinkProps = {},
       TextProps = {},
@@ -68,10 +62,10 @@ export default class AccountName extends Component {
       ariaLabel: `Account Name ${text}`
     }, /*#__PURE__*/React.createElement("div", {
       className: `${style.textStyle} ${style[`font_${fontWeight}`]} ${className ? className : ''}`
-    }, displayContent)) : /*#__PURE__*/React.createElement("div", {
+    }, text)) : /*#__PURE__*/React.createElement("div", {
       className: `${style.secondaryText} ${style[`font_${fontWeight}`]} ${className ? className : ''} ${notAccessible ? style.disable : ''}`,
       ...TextProps
-    }, displayContent)), secondaryAccountText && /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Link, {
+    }, text)), secondaryAccountText && /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(Link, {
       href: secondaryAccountHref,
       onClick: secondaryAccountClick,
       className: style.link

package/es/list/SecondaryText/ContactName.js

@@ -2,7 +2,6 @@ import React, { Component } from 'react';
 import { ContactName_defaultProps } from "./props/defaultProps";
 import { ContactName_propTypes } from "./props/propTypes";
 import { Container, Box } from '@zohodesk/components/es/Layout';
-import { highlightText } from '@zohodesk/components/es/Typography/utils/textHighlighter';
 import Link from "../../Link/Link";
 import SentimentStatus from "../SentimentStatus/SentimentStatus";
 import { Icon } from '@zohodesk/icons';
@@ -24,8 +23,6 @@ export default class ContactName extends Component {
       notAccessible = false,
       fontWeight,
       i18nKeys,
-      highlights,
-      enableHighlight,
       customProps
     } = this.props;
     let {
@@ -41,9 +38,6 @@ export default class ContactName extends Component {
       LinkProps = {},
       TextProps = {}
     } = customProps;
-    const displayContent = enableHighlight && highlights?.data && highlights?.data?.length > 0 && text ? highlightText({ ...highlights,
-      text
-    }) : text;
     return /*#__PURE__*/React.createElement(Container, {
       alignBox: "row",
       align: "baseline",
@@ -70,11 +64,11 @@ export default class ContactName extends Component {
       ariaLabel: `Contact Name ${text}`
     }, /*#__PURE__*/React.createElement("div", {
       className: `${style.textStyle} ${style[`font_${fontWeight}`]} ${className ? className : ''}`
-    }, displayContent)) : /*#__PURE__*/React.createElement("div", {
+    }, text)) : /*#__PURE__*/React.createElement("div", {
       className: `${style.secondaryText} ${style[`font_${fontWeight}`]} ${className ? className : ''} ${notAccessible ? style.disable : ''}`,
       "data-title": dataTitle,
       ...TextProps
-    }, displayContent)), sentimentType && /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(SentimentStatus, {
+    }, text)), sentimentType && /*#__PURE__*/React.createElement(Box, null, /*#__PURE__*/React.createElement(SentimentStatus, {
       type: sentimentType,
       dataTitle: sentimentDataTitle
     })));

package/es/list/SecondaryText/DepartmentText.js

@@ -1,6 +1,5 @@
 import React, { Component } from 'react';
 import { DepartmentText_propTypes } from "./props/propTypes";
-import { highlightText } from '@zohodesk/components/es/Typography/utils/textHighlighter';
 import style from "./SecondaryText.module.css";
 export default class DepartmentText extends Component {
   constructor(props) {
@@ -12,19 +11,14 @@ export default class DepartmentText extends Component {
       className,
       text,
       dataTitle,
-      dataId,
-      enableHighlight,
-      highlights
+      dataId
     } = this.props;
-    const displayContent = enableHighlight && highlights?.data && highlights?.data?.length > 0 && text ? highlightText({ ...highlights,
-      text
-    }) : text;
     return /*#__PURE__*/React.createElement("div", {
       className: `${style.departmentText} ${className ? className : ''}`,
       "data-title": dataTitle,
       "data-id": dataId,
       "data-test-id": dataId
-    }, displayContent);
+    }, text);
   }
 
 }

package/es/list/SecondaryText/Email.js

@@ -6,7 +6,6 @@ import { Email_defaultProps } from "./props/defaultProps";
 import { Email_propTypes } from "./props/propTypes";
 /**** Components ****/
 
-import { highlightText } from '@zohodesk/components/es/Typography/utils/textHighlighter';
 import Link from "../../Link/Link";
 /**** CSS ****/
 
@@ -23,17 +22,12 @@ export default class Email extends Component {
       isLink,
       target,
       fontWeight,
-      customProps,
-      enableHighlight,
-      highlights
+      customProps
     } = this.props;
     let {
       LinkProps = {},
       TextProps = {}
     } = customProps;
-    const displayContent = enableHighlight && highlights?.data && highlights?.data?.length > 0 && text ? highlightText({ ...highlights,
-      text
-    }) : text;
     return /*#__PURE__*/React.createElement(React.Fragment, null, isLink ? /*#__PURE__*/React.createElement(Link, {
       href: href,
       title: title,
@@ -44,11 +38,11 @@ export default class Email extends Component {
       ...LinkProps
     }, /*#__PURE__*/React.createElement("div", {
       className: `${style.textStyle} ${style[`font_${fontWeight}`]} ${className ? className : ''}`
-    }, displayContent)) : /*#__PURE__*/React.createElement("div", {
+    }, text)) : /*#__PURE__*/React.createElement("div", {
       className: `${style.secondaryText}  ${style[`font_${fontWeight}`]} ${className ? className : ''}`,
       "data-title": title,
       ...TextProps
-    }, displayContent));
+    }, text));
   }
 
 }

package/es/list/SecondaryText/PhoneNumber.js

@@ -6,7 +6,6 @@ import { PhoneNumber_defaultProps } from "./props/defaultProps";
 import { PhoneNumber_propTypes } from "./props/propTypes";
 /**** Components ****/
 
-import { highlightText } from '@zohodesk/components/es/Typography/utils/textHighlighter';
 import Link from "../../Link/Link";
 /**** CSS ****/
 
@@ -25,17 +24,12 @@ export default class PhoneNumber extends Component {
       target,
       hasReload,
       fontWeight,
-      customProps,
-      enableHighlight,
-      highlights
+      customProps
     } = this.props;
     let {
       LinkProps = {},
       TextProps = {}
     } = customProps;
-    const displayContent = enableHighlight && highlights?.data && highlights?.data?.length > 0 && text ? highlightText({ ...highlights,
-      text
-    }) : text;
     return /*#__PURE__*/React.createElement(React.Fragment, null, isLink ? /*#__PURE__*/React.createElement(Link, {
       href: href,
       title: title,
@@ -48,11 +42,11 @@ export default class PhoneNumber extends Component {
       ...LinkProps
     }, /*#__PURE__*/React.createElement("div", {
       className: `${style.phoneNumber} ${style.phonetxt} ${style[`font_${fontWeight}`]} ${className ? className : ''}`
-    }, displayContent)) : /*#__PURE__*/React.createElement("div", {
+    }, text)) : /*#__PURE__*/React.createElement("div", {
       className: `${style.secondaryText} ${style.phonetxt} ${style[`font_${fontWeight}`]} ${className ? className : ''}`,
       "data-title": title,
       ...TextProps
-    }, displayContent));
+    }, text));
   }
 
 }

package/es/list/SecondaryText/PriorityText.js

@@ -1,7 +1,6 @@
 import React, { Component } from 'react';
 import { PriorityText_defaultProps } from "./props/defaultProps";
 import { PriorityText_propTypes } from "./props/propTypes";
-import { highlightText } from '@zohodesk/components/es/Typography/utils/textHighlighter';
 import style from "./SecondaryText.module.css";
 export default class PriorityText extends Component {
   constructor(props) {
@@ -14,19 +13,14 @@ export default class PriorityText extends Component {
       color,
       text,
       dataTitle,
-      dataId,
-      enableHighlight,
-      highlights
+      dataId
     } = this.props;
-    const displayContent = enableHighlight && highlights?.data && highlights?.data?.length > 0 && text ? highlightText({ ...highlights,
-      text
-    }) : text;
     return /*#__PURE__*/React.createElement("div", {
       className: `${style.priorityText} ${style[color]} ${className ? className : ''}`,
       "data-title": dataTitle,
       "data-id": dataId,
       "data-test-id": dataId
-    }, displayContent);
+    }, text);
   }
 
 }

package/es/list/SecondaryText/SecondaryText.js

@@ -1,7 +1,6 @@
 import React, { Component } from 'react';
 import { SecondaryText_defaultProps } from "./props/defaultProps";
 import { SecondaryText_propTypes } from "./props/propTypes";
-import { highlightText } from '@zohodesk/components/es/Typography/utils/textHighlighter';
 import style from "./SecondaryText.module.css";
 export default class SecondaryText extends Component {
   constructor(props) {
@@ -15,16 +14,11 @@ export default class SecondaryText extends Component {
       dataTitle,
       dataId,
       onClick,
-      customProps,
-      enableHighlight,
-      highlights
+      customProps
     } = this.props;
     let {
       SecondaryTextProps
     } = customProps;
-    const displayContent = enableHighlight && highlights?.data && highlights?.data?.length > 0 && text ? highlightText({ ...highlights,
-      text
-    }) : text;
     return /*#__PURE__*/React.createElement("div", {
       className: `${style.secondaryText} ${className ? className : ''}`,
       "data-title": dataTitle,
@@ -32,7 +26,7 @@ export default class SecondaryText extends Component {
       "data-test-id": dataId,
       onClick: onClick,
       ...SecondaryTextProps
-    }, displayContent);
+    }, text);
   }
 
 }

package/es/list/SecondaryText/StatusText.js

@@ -1,7 +1,6 @@
 import React, { Component } from 'react';
 import { StatusText_defaultProps } from "./props/defaultProps";
 import { StatusText_propTypes } from "./props/propTypes";
-import { highlightText } from '@zohodesk/components/es/Typography/utils/textHighlighter';
 import style from "./SecondaryText.module.css";
 export default class StatusText extends Component {
   constructor(props) {
@@ -15,19 +14,14 @@ export default class StatusText extends Component {
       text,
       dataTitle,
       fontWeight,
-      dataId,
-      enableHighlight,
-      highlights
+      dataId
     } = this.props;
-    const displayContent = enableHighlight && highlights?.data && highlights?.data?.length > 0 && text ? highlightText({ ...highlights,
-      text
-    }) : text;
     return /*#__PURE__*/React.createElement("div", {
       className: `${style.statusText} ${style[color]} ${style[`font_${fontWeight}`]} ${className ? className : ''}`,
       "data-title": dataTitle,
       "data-id": dataId,
       "data-test-id": dataId
-    }, displayContent);
+    }, text);
   }
 
 }

package/es/list/SecondaryText/TicketId.js

@@ -2,7 +2,6 @@ import React, { Component } from 'react';
 import { TicketId_defaultProps } from "./props/defaultProps";
 import { TicketId_propTypes } from "./props/propTypes";
 import Link from "../../Link/Link";
-import { highlightText } from '@zohodesk/components/es/Typography/utils/textHighlighter';
 import style from "./SecondaryText.module.css";
 export default class TicketId extends Component {
   constructor(props) {
@@ -21,18 +20,12 @@ export default class TicketId extends Component {
       target,
       urlName,
       urlData,
-      customProps,
-      enableHighlight,
-      highlights
+      customProps
     } = this.props;
     let {
       LinkProps = {},
       TicketIdProps = {}
     } = customProps;
-    const processedText = enableHighlight && highlights?.data && highlights?.data?.length > 0 && typeof text === 'string' ? highlightText({ ...highlights,
-      text
-    }) : text;
-    const textContent = Array.isArray(processedText) ? /*#__PURE__*/React.createElement(React.Fragment, null, processedText) : processedText;
     return /*#__PURE__*/React.createElement("div", {
       className: `${style.ticketId} ${isLink ? style.ticketIdLink : ''} ${className ? className : ''}`,
       "data-id": dataId,
@@ -47,7 +40,7 @@ export default class TicketId extends Component {
       target: target,
       onClick: onClick,
       ...LinkProps
-    }, textContent) : textContent);
+    }, text) : text);
   }
 
 }

package/es/list/SecondaryText/Website.js

@@ -6,7 +6,6 @@ import { Website_defaultProps } from "./props/defaultProps";
 import { Website_propTypes } from "./props/propTypes";
 /**** Components ****/
 
-import { highlightText } from '@zohodesk/components/es/Typography/utils/textHighlighter';
 import ExternalLink from "../../ExternalLink/ExternalLink";
 /**** CSS ****/
 
@@ -20,23 +19,18 @@ export default class Website extends Component {
       href,
       dataId,
       isLink,
-      target,
-      enableHighlight,
-      highlights
+      target
     } = this.props;
-    const displayContent = enableHighlight && highlights?.data && highlights?.data?.length > 0 && text ? highlightText({ ...highlights,
-      text
-    }) : text;
     return /*#__PURE__*/React.createElement(React.Fragment, null, isLink ? /*#__PURE__*/React.createElement(ExternalLink, {
       className: `${style.textStyle} ${className ? className : ''}`,
       href: href,
       title: title,
       dataId: dataId,
       target: target
-    }, displayContent) : /*#__PURE__*/React.createElement("div", {
+    }, text) : /*#__PURE__*/React.createElement("div", {
       className: `${style.secondaryText} ${className ? className : ''}`,
       "data-title": text
-    }, displayContent));
+    }, text));
   }
 
 }

package/es/list/SecondaryText/props/defaultProps.js

@@ -2,8 +2,6 @@ export const AccountName_defaultProps = {
   isLink: true,
   dataId: 'accountName',
   fontWeight: 'regular',
-  enableHighlight: false,
-  highlights: {},
   customProps: {}
 };
 export const ContactName_defaultProps = {
@@ -12,51 +10,35 @@ export const ContactName_defaultProps = {
   dataId: 'contactName',
   fontWeight: 'regular',
   i18nKeys: {},
-  enableHighlight: false,
-  highlights: {},
   customProps: {}
 };
 export const Email_defaultProps = {
   isLink: true,
   fontWeight: 'regular',
-  enableHighlight: false,
-  highlights: {},
   customProps: {}
 };
 export const PhoneNumber_defaultProps = {
   isLink: true,
   hasReload: false,
   fontWeight: 'regular',
-  enableHighlight: false,
-  highlights: {},
   customProps: {}
 };
 export const PriorityText_defaultProps = {
   color: 'black',
-  enableHighlight: false,
-  highlights: {},
   dataId: 'priority'
 };
 export const SecondaryText_defaultProps = {
-  enableHighlight: false,
-  highlights: {},
   customProps: {}
 };
 export const StatusText_defaultProps = {
   color: 'black',
   dataId: 'statusContainer',
-  enableHighlight: false,
-  highlights: {},
   fontWeight: 'regular'
 };
 export const TicketId_defaultProps = {
   dataId: 'ticketId',
-  enableHighlight: false,
-  highlights: {},
   customProps: {}
 };
 export const Website_defaultProps = {
-  enableHighlight: false,
-  highlights: {},
   isLink: true
 };

package/es/list/SecondaryText/props/propTypes.js

@@ -14,8 +14,6 @@ export const AccountName_propTypes = {
   secondaryAccountHref: PropTypes.string,
   secondaryAccountClick: PropTypes.func,
   secondaryAccountText: PropTypes.string,
-  enableHighlight: PropTypes.bool,
-  highlights: PropTypes.object,
   customProps: PropTypes.shape({
     LinkProps: PropTypes.object,
     TextProps: PropTypes.object,
@@ -44,8 +42,6 @@ export const ContactName_propTypes = {
     }),
     paidTitle: PropTypes.string
   }),
-  enableHighlight: PropTypes.bool,
-  highlights: PropTypes.object,
   customProps: PropTypes.shape({
     LinkProps: PropTypes.object,
     TextProps: PropTypes.object
@@ -55,8 +51,6 @@ export const DepartmentText_propTypes = {
   className: PropTypes.string,
   dataId: PropTypes.string,
   dataTitle: PropTypes.string,
-  enableHighlight: PropTypes.bool,
-  highlights: PropTypes.object,
   text: PropTypes.string
 };
 export const Email_propTypes = {
@@ -69,8 +63,6 @@ export const Email_propTypes = {
   title: PropTypes.string,
   urlData: PropTypes.object,
   urlName: PropTypes.string,
-  enableHighlight: PropTypes.bool,
-  highlights: PropTypes.object,
   customProps: PropTypes.shape({
     LinkProps: PropTypes.object,
     TextProps: PropTypes.object
@@ -93,8 +85,6 @@ export const PhoneNumber_propTypes = {
   title: PropTypes.string,
   urlData: PropTypes.object,
   urlName: PropTypes.string,
-  enableHighlight: PropTypes.bool,
-  highlights: PropTypes.object,
   customProps: PropTypes.shape({
     LinkProps: PropTypes.object,
     TextProps: PropTypes.object
@@ -105,8 +95,6 @@ export const PriorityText_propTypes = {
   color: PropTypes.oneOf(['red', 'green', 'gray', 'orange']),
   dataId: PropTypes.string,
   dataTitle: PropTypes.string,
-  enableHighlight: PropTypes.bool,
-  highlights: PropTypes.object,
   text: PropTypes.string
 };
 export const SecondaryText_propTypes = {
@@ -115,8 +103,6 @@ export const SecondaryText_propTypes = {
   dataTitle: PropTypes.string,
   onClick: PropTypes.func,
   text: PropTypes.string,
-  enableHighlight: PropTypes.bool,
-  highlights: PropTypes.object,
   customProps: PropTypes.shape({
     SecondaryTextProps: PropTypes.object
   })
@@ -127,8 +113,6 @@ export const StatusText_propTypes = {
   dataId: PropTypes.string,
   dataTitle: PropTypes.string,
   fontWeight: PropTypes.oneOf(['regular', 'semibold', 'bold']),
-  enableHighlight: PropTypes.bool,
-  highlights: PropTypes.object,
   text: PropTypes.string
 };
 export const TicketId_propTypes = {
@@ -142,8 +126,6 @@ export const TicketId_propTypes = {
   url: PropTypes.string,
   urlData: PropTypes.string,
   urlName: PropTypes.string,
-  enableHighlight: PropTypes.bool,
-  highlights: PropTypes.object,
   customProps: PropTypes.shape({
     TicketIdProps: PropTypes.object,
     LinkProps: PropTypes.object
@@ -156,7 +138,5 @@ export const Website_propTypes = {
   isLink: PropTypes.bool,
   target: PropTypes.string,
   text: PropTypes.string,
-  enableHighlight: PropTypes.bool,
-  highlights: PropTypes.object,
   title: PropTypes.string
 };

package/es/list/Subject/Subject.js

@@ -3,7 +3,6 @@ import { defaultProps } from "./props/defaultProps";
 import { propTypes } from "./props/propTypes";
 import Link from "../../Link/Link";
 import { whiteSpaceClassMapping } from '@zohodesk/components/es/utils/cssUtils';
-import { highlightText } from '@zohodesk/components/es/Typography/utils/textHighlighter';
 import style from "./Subject.module.css";
 export default class Subject extends Component {
   constructor(props) {
@@ -25,17 +24,12 @@ export default class Subject extends Component {
       isDotted,
       children,
       customProps,
-      whiteSpace,
-      enableHighlight,
-      highlights
+      whiteSpace
     } = this.props;
     let {
       LinkProps = {},
       TextProps = {}
     } = customProps;
-    const displayContent = enableHighlight && highlights?.data && highlights?.data?.length > 0 && text ? highlightText({ ...highlights,
-      text
-    }) : children ? children : text;
     return /*#__PURE__*/React.createElement(React.Fragment, null, isLink ? /*#__PURE__*/React.createElement(Link, {
       urlName: urlName,
       href: href,
@@ -47,14 +41,14 @@ export default class Subject extends Component {
       target: target,
       "data-title-wrap": whiteSpace,
       ...LinkProps
-    }, displayContent) : /*#__PURE__*/React.createElement("span", {
+    }, children ? children : text) : /*#__PURE__*/React.createElement("span", {
       className: `${style.subject} ${isDotted ? style.dotted : ''} ${whiteSpaceClassMapping[whiteSpace]} ${className} ${style[`font_${fontWeight}`]}`,
       "data-title": text,
       "data-id": dataId,
       "data-test-id": dataId,
       "data-title-wrap": whiteSpace,
       ...TextProps
-    }, displayContent));
+    }, text));
   }
 
 }

package/es/list/Subject/props/defaultProps.js

@@ -4,7 +4,5 @@ export const defaultProps = {
   className: '',
   isDotted: true,
   customProps: {},
-  whiteSpace: 'pre',
-  enableHighlight: false,
-  highlights: {}
+  whiteSpace: 'pre'
 };