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

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

@@ -0,0 +1,451 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Typography component should be render with text children 1`] = `
+<DocumentFragment>
+  <div
+    class=""
+  >
+    Text testing
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography component should be render with the basic set of default props 1`] = `
+<DocumentFragment>
+  <div
+    class=""
+  />
+</DocumentFragment>
+`;
+
+exports[`Typography component should render customised render the highlight element for all highlighted words 1`] = `
+<DocumentFragment>
+  <div
+    class=""
+  >
+    The 
+    <div
+      aria-labelledby="1"
+      class="container effect    medium lgRadius default   "
+      data-id="tag_Tag"
+      data-selector-id="tag"
+      data-test-id="tag_Tag"
+      data-title="Sun"
+      tabindex="0"
+    >
+      <div
+        aria-hidden="true"
+        class="text mediumtext"
+        id="1"
+      >
+        Sun
+      </div>
+    </div>
+     was bright.
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography component should render globally skip highlights at given indexes, with isExcludedIndex 1`] = `
+<DocumentFragment>
+  <div
+    class=""
+  >
+    The sun was bright, the 
+    <span
+      class="font_bold decoration_underline"
+    >
+      sun
+    </span>
+     was warm, the 
+    <span
+      class="font_bold decoration_underline"
+    >
+      sun
+    </span>
+     was high in the sky.
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography component should render highlight by Index 1`] = `
+<DocumentFragment>
+  <div
+    class=""
+  >
+    The 
+    <span
+      class="font_bold decoration_underline"
+    >
+      sun
+    </span>
+     was bright, I walked 
+    <span
+      class="font_bold decoration_underline"
+    >
+      under
+    </span>
+     the 
+    <span
+      class="font_bold decoration_underline"
+    >
+      sun
+    </span>
+    , I talked under the sun.
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography component should render highlighted word 1`] = `
+<DocumentFragment>
+  <div
+    class=""
+  >
+    The 
+    <span
+      class="font_bold"
+    >
+      sun
+    </span>
+     was bright, the 
+    <span
+      class="font_bold"
+    >
+      sun
+    </span>
+     was warm, the 
+    <span
+      class="font_bold"
+    >
+      sun
+    </span>
+     was high in the sky.
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography component should render separate Styles per Word 1`] = `
+<DocumentFragment>
+  <div
+    class=""
+  >
+    The 
+    <span
+      class="font_bold"
+    >
+      sun
+    </span>
+     was bright, I walked 
+    <span
+      class="decoration_underline"
+    >
+      under
+    </span>
+     the 
+    <span
+      class="font_bold"
+    >
+      sun
+    </span>
+    , I talked 
+    <span
+      class="decoration_underline"
+    >
+      under
+    </span>
+     the 
+    <span
+      class="font_bold"
+    >
+      sun
+    </span>
+    .
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography component should render separate customised render the highlight element for each highlighted word 1`] = `
+<DocumentFragment>
+  <div
+    class=""
+  >
+    The 
+    <div
+      aria-labelledby="2"
+      class="container effect    medium lgRadius default   "
+      data-id="tag_Tag"
+      data-selector-id="tag"
+      data-test-id="tag_Tag"
+      data-title="Sun"
+      tabindex="0"
+    >
+      <div
+        aria-hidden="true"
+        class="text mediumtext"
+        id="2"
+      >
+        Sun
+      </div>
+    </div>
+     and 
+    <div
+      aria-labelledby="3"
+      class="container effect    medium lgRadius default   "
+      data-id="tag_Tag"
+      data-selector-id="tag"
+      data-test-id="tag_Tag"
+      data-title="Moon"
+      tabindex="0"
+    >
+      <div
+        aria-hidden="true"
+        class="text mediumtext"
+        id="3"
+      >
+        Moon
+      </div>
+    </div>
+     were bright.
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography component should render with global case-sensitive option 1`] = `
+<DocumentFragment>
+  <div
+    class=""
+  >
+    The 
+    <span
+      class="font_bold decoration_underline"
+    >
+      Sun
+    </span>
+     was bright, the 
+    <span
+      class="font_bold decoration_underline"
+    >
+      moon
+    </span>
+     was bright, the sun was warm.
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography component should render with global custom class for all highlights 1`] = `
+<DocumentFragment>
+  <div
+    class=""
+  >
+    The 
+    <span
+      class="global_custom_class"
+    >
+      sun
+    </span>
+     and 
+    <span
+      class="global_custom_class"
+    >
+      moon
+    </span>
+     were bright.
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography component should render with global custom style for all highlights 1`] = `
+<DocumentFragment>
+  <div
+    class=""
+  >
+    The 
+    <span
+      class=""
+      style="background-color: lightgreen;"
+    >
+      sun
+    </span>
+     and 
+    <span
+      class=""
+      style="background-color: lightgreen;"
+    >
+      moon
+    </span>
+     were bright.
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography component should render with global tagName applied to all highlights 1`] = `
+<DocumentFragment>
+  <div
+    class=""
+  >
+    The 
+    <i
+      class=""
+    >
+      sun
+    </i>
+     and 
+    <i
+      class=""
+    >
+      moon
+    </i>
+     were bright.
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography component should render with global whole-word match only 1`] = `
+<DocumentFragment>
+  <div
+    class=""
+  >
+    Sunflower is a flower. The 
+    <span
+      class="font_bold decoration_underline"
+    >
+      Sun
+    </span>
+     was bright, the moonlight was bright.
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography component should render with separate case-sensitive option per word 1`] = `
+<DocumentFragment>
+  <div
+    class=""
+  >
+    The 
+    <span
+      class="font_bold decoration_underline"
+    >
+      Sun
+    </span>
+     was bright, the 
+    <span
+      class="font_bold decoration_underline"
+    >
+      Moon
+    </span>
+     was bright, the sun was warm.
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography component should render with separate custom class for each highlighted word 1`] = `
+<DocumentFragment>
+  <div
+    class=""
+  >
+    The 
+    <span
+      class="separate_custom_class_sun"
+    >
+      sun
+    </span>
+     and 
+    <span
+      class="separate_custom_class_moon"
+    >
+      moon
+    </span>
+     were bright.
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography component should render with separate custom style per word 1`] = `
+<DocumentFragment>
+  <div
+    class=""
+  >
+    The 
+    <span
+      class=""
+      style="background-color: lightgreen;"
+    >
+      sun
+    </span>
+     and 
+    <span
+      class=""
+      style="background-color: orange;"
+    >
+      moon
+    </span>
+     were bright.
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography component should render with separate excluded index option per word 1`] = `
+<DocumentFragment>
+  <div
+    class=""
+  >
+    The sun was bright, the moon was bright, the 
+    <span
+      class="font_bold decoration_underline"
+    >
+      sun
+    </span>
+     and 
+    <span
+      class="font_bold decoration_underline"
+    >
+      moon
+    </span>
+     again.
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography component should render with separate tagName for each highlighted word 1`] = `
+<DocumentFragment>
+  <div
+    class=""
+  >
+    The 
+    <i
+      class=""
+    >
+      sun
+    </i>
+     and 
+    <u
+      class=""
+    >
+      moon
+    </u>
+     were bright.
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Typography component should render with separate whole-word option per word 1`] = `
+<DocumentFragment>
+  <div
+    class=""
+  >
+    Sunflower is a flower. The 
+    <span
+      class="font_bold decoration_underline"
+    >
+      Sun
+    </span>
+     was bright, the 
+    <span
+      class="font_bold decoration_underline"
+    >
+      moon
+    </span>
+    light was bright.
+  </div>
+</DocumentFragment>
+`;

package/lib/Typography/highlight.js

@@ -0,0 +1,151 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.highlight = highlight;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _utils = require("@zohodesk/utils");
+
+var _TypographyModule = _interopRequireDefault(require("./css/Typography.module.css"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+function highlight(data) {
+  var text = data.text,
+      highlightData = data.highlightData,
+      _data$customStyle = data.customStyle,
+      globalCustomStyle = _data$customStyle === void 0 ? {} : _data$customStyle,
+      _data$highlightsStyle = data.highlightsStyle,
+      globalHighlightsStyle = _data$highlightsStyle === void 0 ? {} : _data$highlightsStyle,
+      _data$isExcludedIndex = data.isExcludedIndex,
+      hasGlobalExcludedIndex = _data$isExcludedIndex === void 0 ? false : _data$isExcludedIndex,
+      _data$isCaseSensitive = data.isCaseSensitive,
+      hasGlobalCaseSensitive = _data$isCaseSensitive === void 0 ? false : _data$isCaseSensitive,
+      _data$isWholeWord = data.isWholeWord,
+      hasGlobalWholeWord = _data$isWholeWord === void 0 ? false : _data$isWholeWord,
+      _data$tagName = data.tagName,
+      globalTagName = _data$tagName === void 0 ? 'span' : _data$tagName,
+      globalRender = data.render;
+  var patternParts = [];
+  var highlightTextList = [];
+  var highlightListArray = highlightData.map(function (item) {
+    var _ref = item || {},
+        highlightText = _ref.highlightText,
+        index = _ref.index,
+        isExcludedIndex = _ref.isExcludedIndex,
+        isCaseSensitive = _ref.isCaseSensitive,
+        highlightsStyle = _ref.highlightsStyle,
+        customStyle = _ref.customStyle,
+        isWholeWord = _ref.isWholeWord,
+        tagName = _ref.tagName,
+        render = _ref.render;
+
+    var selectedHighlightText = '';
+    var selectedIndex = [];
+    var selectedExcludedIndex = hasGlobalExcludedIndex;
+    var selectedCaseSensitive = hasGlobalCaseSensitive;
+    var selectedHighlightsStyle = globalHighlightsStyle;
+    var selectedCustomStyle = globalCustomStyle;
+    var selectedWholeWord = hasGlobalWholeWord;
+    var selectedTagName = globalTagName;
+    var selectedRender = globalRender;
+
+    if (typeof item === 'string') {
+      selectedHighlightText = item;
+    } else if (item && typeof highlightText === 'string') {
+      selectedHighlightText = highlightText;
+      selectedIndex = index !== undefined ? index : [];
+      selectedExcludedIndex = isExcludedIndex !== undefined ? isExcludedIndex : hasGlobalExcludedIndex;
+      selectedCaseSensitive = isCaseSensitive !== undefined ? isCaseSensitive : hasGlobalCaseSensitive;
+      selectedCustomStyle = customStyle !== undefined ? customStyle : globalCustomStyle;
+      selectedHighlightsStyle = highlightsStyle !== undefined ? highlightsStyle : globalHighlightsStyle;
+      selectedWholeWord = isWholeWord !== undefined ? isWholeWord : hasGlobalWholeWord;
+      selectedTagName = tagName !== undefined ? tagName : globalTagName;
+      selectedRender = render !== undefined ? render : globalRender;
+    }
+
+    var _getClassFromStyle = getClassFromStyle(selectedHighlightsStyle),
+        highlightsClass = _getClassFromStyle.highlightsClass;
+
+    if (selectedHighlightText.trim() !== '') {
+      var escaped = selectedHighlightText.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+      patternParts.push(selectedWholeWord ? "\\b".concat(escaped, "\\b") : escaped);
+      highlightTextList.push(isCaseSensitive ? selectedHighlightText : selectedHighlightText.toLowerCase());
+    }
+
+    return {
+      highlightText: selectedHighlightText,
+      index: selectedIndex,
+      isExcludedIndex: selectedExcludedIndex,
+      isCaseSensitive: selectedCaseSensitive,
+      highlightsClass: highlightsClass,
+      customStyle: selectedCustomStyle,
+      tagName: selectedTagName,
+      render: selectedRender
+    };
+  });
+  var pattern = patternParts.join('|');
+
+  if (!pattern) {
+    return text;
+  }
+
+  var splittedChild = text.split(new RegExp("(".concat(pattern, ")"), 'gi'));
+  var indexCount = {};
+  return splittedChild.map(function (part, i) {
+    var Tag = 'span';
+    var match = highlightListArray.find(function (_ref2) {
+      var highlightText = _ref2.highlightText,
+          isCaseSensitive = _ref2.isCaseSensitive;
+      var inputText = isCaseSensitive ? part : part.toLowerCase();
+      var target = isCaseSensitive ? highlightText : highlightText.toLowerCase();
+      return inputText === target;
+    });
+
+    if (!match) {
+      return part;
+    }
+
+    var key = match.highlightText;
+    indexCount[key] = (indexCount[key] || 0) + 1;
+    var tagName = match.tagName,
+        index = match.index,
+        isExcludedIndex = match.isExcludedIndex,
+        render = match.render,
+        highlightsClass = match.highlightsClass,
+        customStyle = match.customStyle;
+    Tag = tagName;
+    var currentIndex = indexCount[key];
+    var isArrayIndex = Array.isArray(index);
+    var isMatch = isArrayIndex ? (index.length === 0 || index.includes(currentIndex)) !== isExcludedIndex : (index === 0 || index === currentIndex) !== isExcludedIndex;
+
+    if (!isMatch) {
+      return part;
+    }
+
+    return render || /*#__PURE__*/_react["default"].createElement(Tag, {
+      key: i,
+      style: customStyle,
+      className: highlightsClass
+    }, part);
+  });
+}
+
+function getClassFromStyle(styleObj) {
+  var _compileClassNames;
+
+  var weight = styleObj.weight,
+      typeFace = styleObj.typeFace,
+      transform = styleObj.transform,
+      decoration = styleObj.decoration,
+      customClass = styleObj.customClass;
+  var highlightsClass = (0, _utils.compileClassNames)((_compileClassNames = {}, _defineProperty(_compileClassNames, _TypographyModule["default"]["font_".concat(weight)], !!weight), _defineProperty(_compileClassNames, _TypographyModule["default"]["fontStyles_".concat(typeFace)], !!typeFace), _defineProperty(_compileClassNames, _TypographyModule["default"]["transform_".concat(transform)], !!transform), _defineProperty(_compileClassNames, _TypographyModule["default"]["decoration_".concat(decoration)], !!decoration), _defineProperty(_compileClassNames, customClass, !!customClass), _compileClassNames));
+  return {
+    highlightsClass: highlightsClass
+  };
+}

package/lib/Typography/props/defaultProps.js

@@ -10,6 +10,7 @@ var defaultProps = {
   $flag_reset: false,
   $flag_dotted: false,
   $tagAttributes_text: {},
-  $a11yAttributes_text: {}
+  $a11yAttributes_text: {},
+  highlights: {}
 };
 exports.defaultProps = defaultProps;

package/lib/Typography/props/propTypes.js

@@ -9,6 +9,29 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var highlightsStyleShape = _propTypes["default"].shape({
+  weight: _propTypes["default"].oneOf(['regular', 'light', 'semibold', 'bold']),
+  transform: _propTypes["default"].oneOf(['default', 'upper', 'lower', 'capital']),
+  decoration: _propTypes["default"].oneOf(['default', 'underline', 'strike', 'overline']),
+  typeFace: _propTypes["default"].oneOf(['normal', 'italic']),
+  customClass: _propTypes["default"].object
+});
+
+var commonHighlightProps = {
+  customStyle: _propTypes["default"].object,
+  isExcludedIndex: _propTypes["default"].bool,
+  isCaseSensitive: _propTypes["default"].bool,
+  isWholeWord: _propTypes["default"].bool,
+  tagName: _propTypes["default"].string,
+  render: _propTypes["default"].element,
+  highlightsStyle: _propTypes["default"].objectOf(highlightsStyleShape)
+};
 var propTypes = {
   children: _propTypes["default"].node,
   $ui_className: _propTypes["default"].string,
@@ -33,6 +56,13 @@ var propTypes = {
   customId: _propTypes["default"].string,
   customStyle: _propTypes["default"].object,
   $a11yAttributes_text: _propTypes["default"].object,
-  $tagAttributes_text: _propTypes["default"].object
+  $tagAttributes_text: _propTypes["default"].object,
+  highlights: _propTypes["default"].objectOf(_propTypes["default"].shape(_objectSpread({
+    text: _propTypes["default"].string,
+    highlightData: _propTypes["default"].arrayOf(_propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].shape(_objectSpread({
+      highlightText: _propTypes["default"].string,
+      index: _propTypes["default"].oneOfType([_propTypes["default"].arrayOf(_propTypes["default"].number), _propTypes["default"].number])
+    }, commonHighlightProps))]))
+  }, commonHighlightProps)))
 };
 exports.propTypes = propTypes;

package/lib/utils/Common.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.DUMMY_OBJECT = void 0;
+exports.DUMMY_OBJECT = exports.DUMMY_ARRAY = void 0;
 exports.bind = bind;
 exports.bytesToSize = bytesToSize;
 exports.cancelBubblingEffect = cancelBubblingEffect;
@@ -516,4 +516,6 @@ function isTextSelected() {
 }
 
 var DUMMY_OBJECT = {};
-exports.DUMMY_OBJECT = DUMMY_OBJECT;
+exports.DUMMY_OBJECT = DUMMY_OBJECT;
+var DUMMY_ARRAY = [];
+exports.DUMMY_ARRAY = DUMMY_ARRAY;

package/lib/utils/dropDownUtils.js

@@ -152,8 +152,10 @@ var getListItemProps = function getListItemProps(props) {
   return props.listItemProps || '';
 };
 
+var defaultSearchFields = ['value'];
+
 var getSearchFields = function getSearchFields(props) {
-  return props.searchFields || ['value'];
+  return props.searchFields || defaultSearchFields;
 }; // const isObjectContainsSearchString = (searchFields = [], searchStr = '', obj) => {
 //   const matchedFields = searchFields.filter(element => {
 //     return getSearchString(obj[element]).indexOf(searchStr) !== -1