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

package/lib/Typography/utils/textHighlighter.js

@@ -0,0 +1,160 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.highlightText = highlightText;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _cssJSLogic2 = _interopRequireDefault(require("../css/cssJSLogic"));
+
+var _utils = require("@zohodesk/utils");
+
+var _TypographyModule = _interopRequireDefault(require("./../css/Typography.module.css"));
+
+var _Common = require("../../utils/Common");
+
+var _excluded = ["customStyle"];
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+function highlightText(config) {
+  var sourceText = config.text,
+      highlightData = config.data,
+      _config$styleConfigur = config.styleConfiguration,
+      highlightStyleConfig = _config$styleConfigur === void 0 ? _Common.DUMMY_OBJECT : _config$styleConfigur,
+      _config$shouldExclude = config.shouldExcludeIndices,
+      shouldExcludeIndices = _config$shouldExclude === void 0 ? false : _config$shouldExclude,
+      _config$isCaseSensiti = config.isCaseSensitive,
+      enableCaseSensitiveMatch = _config$isCaseSensiti === void 0 ? false : _config$isCaseSensiti,
+      _config$isWholeWord = config.isWholeWord,
+      matchWholeWordOnly = _config$isWholeWord === void 0 ? false : _config$isWholeWord,
+      _config$tagName = config.tagName,
+      wrapperTagName = _config$tagName === void 0 ? 'span' : _config$tagName,
+      customRenderer = config.renderHighlight;
+
+  if (!sourceText || !(highlightData !== null && highlightData !== void 0 && highlightData.length)) {
+    return sourceText;
+  }
+
+  var cssClassCache = new Map();
+  var normalizedHighlightTerms = highlightData.map(function (highlightItem) {
+    var searchTerm = typeof highlightItem === 'string' ? highlightItem : highlightItem === null || highlightItem === void 0 ? void 0 : highlightItem.text;
+    if (!searchTerm) return null;
+    var itemConfiguration = typeof highlightItem === 'string' ? _Common.DUMMY_OBJECT : highlightItem;
+    var hasStyleConfigrationFromItem = itemConfiguration.styleConfiguration !== undefined;
+    var hasRenderHighlightFromItem = itemConfiguration.renderHighlight !== undefined;
+    var finalStyleConfig = itemConfiguration.styleConfiguration !== undefined ? itemConfiguration.styleConfiguration : highlightStyleConfig;
+
+    var customStyle = finalStyleConfig.customStyle,
+        restStyleConfig = _objectWithoutProperties(finalStyleConfig, _excluded);
+
+    var cacheKey = JSON.stringify(restStyleConfig);
+    var typographyClass;
+
+    if (Object.keys(restStyleConfig).length !== 0) {
+      if (cssClassCache.has(cacheKey)) {
+        typographyClass = cssClassCache.get(cacheKey);
+      } else {
+        var _cssJSLogic = (0, _cssJSLogic2["default"])({
+          props: restStyleConfig,
+          style: _TypographyModule["default"]
+        }),
+            computedClass = _cssJSLogic.typographyClass;
+
+        typographyClass = computedClass;
+        cssClassCache.set(cacheKey, typographyClass);
+      }
+    }
+
+    return {
+      searchTerm: searchTerm,
+      targetIndices: itemConfiguration.index !== undefined ? itemConfiguration.index : _Common.DUMMY_ARRAY,
+      shouldExcludeIndices: itemConfiguration.shouldExcludeIndices !== undefined ? itemConfiguration.shouldExcludeIndices : shouldExcludeIndices,
+      isCaseSensitive: itemConfiguration.isCaseSensitive !== undefined ? itemConfiguration.isCaseSensitive : enableCaseSensitiveMatch,
+      matchWholeWordOnly: itemConfiguration.isWholeWord !== undefined ? itemConfiguration.isWholeWord : matchWholeWordOnly,
+      wrapperTagName: itemConfiguration.tagName !== undefined ? itemConfiguration.tagName : wrapperTagName,
+      customStyle: customStyle,
+      customRenderer: itemConfiguration.renderHighlight !== undefined ? itemConfiguration.renderHighlight : customRenderer,
+      highlightClasses: typographyClass,
+      hasStyleConfigrationFromItem: hasStyleConfigrationFromItem,
+      hasRenderHighlightFromItem: hasRenderHighlightFromItem
+    };
+  }).filter(function (highlightConfig) {
+    return highlightConfig && highlightConfig.searchTerm.trim();
+  });
+
+  if (!normalizedHighlightTerms.length) {
+    return sourceText;
+  }
+
+  var regexPatterns = normalizedHighlightTerms.map(function (highlightConfig) {
+    //  Escape special regex characters in the searchTerm so it can be safely used in a RegExp
+    var escapedTerm = highlightConfig.searchTerm.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); // If matchWholeWordOnly is true, wrap the term with word boundaries (\b) to match whole words only
+
+    return highlightConfig.matchWholeWordOnly ? "\\b".concat(escapedTerm, "\\b") : escapedTerm;
+  });
+  var combinedRegexPattern = regexPatterns.join('|');
+  var textSegments = sourceText.split(new RegExp("(".concat(combinedRegexPattern, ")"), 'gi'));
+  var occurrenceCountByTerm = {};
+  return textSegments.map(function (textSegment, segmentIndex) {
+    var matchingHighlightConfig = normalizedHighlightTerms.find(function (highlightConfig) {
+      var segmentToCompare = highlightConfig.isCaseSensitive ? textSegment : textSegment.toLowerCase();
+      var termToCompare = highlightConfig.isCaseSensitive ? highlightConfig.searchTerm : highlightConfig.searchTerm.toLowerCase();
+      return segmentToCompare === termToCompare;
+    });
+
+    if (!matchingHighlightConfig) {
+      return textSegment;
+    }
+
+    var termKey = matchingHighlightConfig.searchTerm;
+    occurrenceCountByTerm[termKey] = (occurrenceCountByTerm[termKey] || 0) + 1;
+    var currentOccurrenceIndex = occurrenceCountByTerm[termKey];
+    var targetIndices = matchingHighlightConfig.targetIndices,
+        shouldExcludeIndices = matchingHighlightConfig.shouldExcludeIndices;
+    var isIndicesArray = Array.isArray(targetIndices);
+    var shouldApplyHighlight;
+
+    if (isIndicesArray) {
+      shouldApplyHighlight = (targetIndices.length === 0 || targetIndices.includes(currentOccurrenceIndex)) !== shouldExcludeIndices;
+    } else {
+      shouldApplyHighlight = (targetIndices === 0 || targetIndices === currentOccurrenceIndex) !== shouldExcludeIndices;
+    }
+
+    if (!shouldApplyHighlight) {
+      return textSegment;
+    }
+
+    var customStyle = matchingHighlightConfig.customStyle,
+        highlightClasses = matchingHighlightConfig.highlightClasses,
+        customRenderer = matchingHighlightConfig.customRenderer,
+        hasStyleConfigrationFromItem = matchingHighlightConfig.hasStyleConfigrationFromItem,
+        hasRenderHighlightFromItem = matchingHighlightConfig.hasRenderHighlightFromItem,
+        WrapperTag = matchingHighlightConfig.wrapperTagName;
+    var shouldUseCustomRenderer = false;
+
+    if (customRenderer) {
+      if (hasRenderHighlightFromItem) {
+        shouldUseCustomRenderer = true;
+      } else if (!hasStyleConfigrationFromItem && customRenderer) {
+        shouldUseCustomRenderer = true;
+      }
+    }
+
+    if (shouldUseCustomRenderer && (0, _utils.isRenderable)(customRenderer)) {
+      return (0, _utils.renderNode)(customRenderer, textSegment);
+    }
+
+    return /*#__PURE__*/_react["default"].createElement(WrapperTag, {
+      key: "".concat(textSegment, "_").concat(currentOccurrenceIndex),
+      style: customStyle,
+      className: highlightClasses
+    }, textSegment);
+  });
+}

package/lib/common/common.module.css

@@ -501,7 +501,7 @@
 }
 .lineClamp {
   composes: wbreak clamp;
-  -webkit-line-clamp: var(--line-clamp, 3);
+  -webkit-line-clamp: var(--line-clamp,2);
 }
 
 .offSelection {

package/lib/shared/ArrowIcon/ArrowIcon.js

@@ -26,10 +26,12 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 var ArrowIcon = function ArrowIcon(props) {
   var dataId = props.dataId,
       isRotated = props.isRotated,
+      isActive = props.isActive,
       customClass = props.customClass,
       customProps = props.customProps,
       tagAttributes = props.tagAttributes,
       a11yAttributes = props.a11yAttributes,
+      iconSize = props.iconSize,
       isDisabled = props.isDisabled,
       isReadOnly = props.isReadOnly,
       renderCustomToggleIndicator = props.renderCustomToggleIndicator;
@@ -38,7 +40,8 @@ var ArrowIcon = function ArrowIcon(props) {
       _customClass$containe = customClass.containerClass,
       containerClass = _customClass$containe === void 0 ? '' : _customClass$containe;
   return (0, _utils.isRenderable)(renderCustomToggleIndicator) ? (0, _utils.renderNode)(renderCustomToggleIndicator, {
-    isPopupOpened: isRotated,
+    isRotated: isRotated,
+    isActive: isActive,
     isReadOnly: isReadOnly,
     isDisabled: isDisabled
   }) : /*#__PURE__*/_react["default"].createElement(_Layout.Container, _extends({
@@ -48,10 +51,10 @@ var ArrowIcon = function ArrowIcon(props) {
     "aria-hidden": true
   }, tagAttributes, a11yAttributes, customProps, {
     dataId: "".concat(dataId, "_downIcon"),
-    className: "".concat(_ArrowIconModule["default"].arrowIcon, " ").concat(isRotated ? _ArrowIconModule["default"].rotated : '', " ").concat(containerClass)
+    className: "".concat(_ArrowIconModule["default"].arrowIcon, " ").concat(isRotated ? _ArrowIconModule["default"].rotated : '', " ").concat(isActive ? _ArrowIconModule["default"].active : '', " ").concat(isDisabled ? _ArrowIconModule["default"].disabled : '', " ").concat(isReadOnly ? _ArrowIconModule["default"].readonly : '', " ").concat(containerClass)
   }), /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
     name: "ZD-down",
-    size: "7",
+    size: iconSize,
     iconClass: iconClass
   }));
 };

package/lib/shared/ArrowIcon/ArrowIcon.module.css

@@ -28,7 +28,16 @@
 }
 
 .rotated,
+.active,
 .arrowContainer:hover .arrowIcon,
 .transparentContainer:hover .arrowIcon {
   --local-arrowIcon-color: var(--zdt_arrowicon_hover_icon);
+}
+
+.disabled {
+  composes: disabled from '../../common/common.module.css';
+}
+
+.readonly {
+  composes: curdefault from '../../common/common.module.css';
 }

package/lib/shared/ArrowIcon/__tests__/ArrowIcon.spec.js

@@ -31,52 +31,76 @@ describe('ArrowIcon', function () {
 
     expect(asFragment()).toMatchSnapshot();
   });
-  test('Should be render with customClass', function () {
+  test('Should be render isActive is true', function () {
     var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ArrowIcon["default"], {
+      isActive: true
+    })),
+        asFragment = _render4.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render isDisabled is true', function () {
+    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ArrowIcon["default"], {
+      isDisabled: true
+    })),
+        asFragment = _render5.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render isReadOnly is true', function () {
+    var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ArrowIcon["default"], {
+      isReadOnly: true
+    })),
+        asFragment = _render6.asFragment;
+
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('Should be render with customClass', function () {
+    var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ArrowIcon["default"], {
       customClass: {
         iconClass: 'arrowIcon_iconClass',
         containerClass: 'arrowIcon_containerClass'
       }
     })),
-        asFragment = _render4.asFragment;
+        asFragment = _render7.asFragment;
 
     expect(asFragment()).toMatchSnapshot();
   });
   test('Should be render with a11yAttributes', function () {
-    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ArrowIcon["default"], {
+    var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ArrowIcon["default"], {
       a11yAttributes: {
         'data-a11y-focus': true
       }
     })),
-        asFragment = _render5.asFragment;
+        asFragment = _render8.asFragment;
 
     expect(asFragment()).toMatchSnapshot();
   });
   test('Should be render with tagAttributes', function () {
-    var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ArrowIcon["default"], {
+    var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ArrowIcon["default"], {
       tagAttributes: {
         title: 'hello here is title'
       }
     })),
-        asFragment = _render6.asFragment;
+        asFragment = _render9.asFragment;
 
     expect(asFragment()).toMatchSnapshot();
   });
   test('Should be render with customProps', function () {
-    var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ArrowIcon["default"], {
+    var _render10 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ArrowIcon["default"], {
       customProps: {
         testId: 'hereIsTestId'
       }
     })),
-        asFragment = _render7.asFragment;
+        asFragment = _render10.asFragment;
 
     expect(asFragment()).toMatchSnapshot();
   });
   test('Should be render with renderCustomToggleIndicator', function () {
-    var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ArrowIcon["default"], {
+    var _render11 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ArrowIcon["default"], {
       renderCustomToggleIndicator: /*#__PURE__*/_react["default"].createElement("div", null, "Indicator")
     })),
-        asFragment = _render8.asFragment;
+        asFragment = _render11.asFragment;
 
     expect(asFragment()).toMatchSnapshot();
   });

package/lib/shared/ArrowIcon/__tests__/__snapshots__/ArrowIcon.spec.js.snap

@@ -1,10 +1,73 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`ArrowIcon Should be render isActive is true 1`] = `
+<DocumentFragment>
+  <div
+    aria-hidden="true"
+    class="arrowIcon  active    inflex coldir both"
+    data-id="undefined_downIcon"
+    data-selector-id="container"
+    data-test-id="undefined_downIcon"
+  >
+    <i
+      aria-hidden="true"
+      class="zd_font_icons basic icon-down    "
+      data-id="fontIcon"
+      data-selector-id="fontIcon"
+      data-test-id="fontIcon"
+      style="--zd-iconfont-size: var(--zd_font_size7);"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`ArrowIcon Should be render isDisabled is true 1`] = `
+<DocumentFragment>
+  <div
+    aria-hidden="true"
+    class="arrowIcon   disabled   inflex coldir both"
+    data-id="undefined_downIcon"
+    data-selector-id="container"
+    data-test-id="undefined_downIcon"
+  >
+    <i
+      aria-hidden="true"
+      class="zd_font_icons basic icon-down    "
+      data-id="fontIcon"
+      data-selector-id="fontIcon"
+      data-test-id="fontIcon"
+      style="--zd-iconfont-size: var(--zd_font_size7);"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`ArrowIcon Should be render isReadOnly is true 1`] = `
+<DocumentFragment>
+  <div
+    aria-hidden="true"
+    class="arrowIcon    readonly  inflex coldir both"
+    data-id="undefined_downIcon"
+    data-selector-id="container"
+    data-test-id="undefined_downIcon"
+  >
+    <i
+      aria-hidden="true"
+      class="zd_font_icons basic icon-down    "
+      data-id="fontIcon"
+      data-selector-id="fontIcon"
+      data-test-id="fontIcon"
+      style="--zd-iconfont-size: var(--zd_font_size7);"
+    />
+  </div>
+</DocumentFragment>
+`;
+
 exports[`ArrowIcon Should be render isRotated is true 1`] = `
 <DocumentFragment>
   <div
     aria-hidden="true"
-    class="arrowIcon rotated  inflex coldir both"
+    class="arrowIcon rotated     inflex coldir both"
     data-id="undefined_downIcon"
     data-selector-id="container"
     data-test-id="undefined_downIcon"
@@ -25,7 +88,7 @@ exports[`ArrowIcon Should be render with a11yAttributes 1`] = `
 <DocumentFragment>
   <div
     aria-hidden="true"
-    class="arrowIcon   inflex coldir both"
+    class="arrowIcon      inflex coldir both"
     data-a11y-focus="true"
     data-id="undefined_downIcon"
     data-selector-id="container"
@@ -47,7 +110,7 @@ exports[`ArrowIcon Should be render with customClass 1`] = `
 <DocumentFragment>
   <div
     aria-hidden="true"
-    class="arrowIcon  arrowIcon_containerClass inflex coldir both"
+    class="arrowIcon     arrowIcon_containerClass inflex coldir both"
     data-id="undefined_downIcon"
     data-selector-id="container"
     data-test-id="undefined_downIcon"
@@ -68,7 +131,7 @@ exports[`ArrowIcon Should be render with customProps 1`] = `
 <DocumentFragment>
   <div
     aria-hidden="true"
-    class="arrowIcon   inflex coldir both"
+    class="arrowIcon      inflex coldir both"
     data-id="undefined_downIcon"
     data-selector-id="container"
     data-test-id="hereIsTestId"
@@ -89,7 +152,7 @@ exports[`ArrowIcon Should be render with dataId 1`] = `
 <DocumentFragment>
   <div
     aria-hidden="true"
-    class="arrowIcon   inflex coldir both"
+    class="arrowIcon      inflex coldir both"
     data-id="ArrowIcon-test-dataId_downIcon"
     data-selector-id="container"
     data-test-id="ArrowIcon-test-dataId_downIcon"
@@ -118,7 +181,7 @@ exports[`ArrowIcon Should be render with tagAttributes 1`] = `
 <DocumentFragment>
   <div
     aria-hidden="true"
-    class="arrowIcon   inflex coldir both"
+    class="arrowIcon      inflex coldir both"
     data-id="undefined_downIcon"
     data-selector-id="container"
     data-test-id="undefined_downIcon"
@@ -140,7 +203,7 @@ exports[`ArrowIcon rendering the defult props 1`] = `
 <DocumentFragment>
   <div
     aria-hidden="true"
-    class="arrowIcon   inflex coldir both"
+    class="arrowIcon      inflex coldir both"
     data-id="undefined_downIcon"
     data-selector-id="container"
     data-test-id="undefined_downIcon"

package/lib/shared/ArrowIcon/props/defaultProps.js

@@ -8,6 +8,8 @@ var _default = {
   isRotated: false,
   isDisabled: false,
   isReadOnly: false,
+  iconSize: '7',
+  isActive: false,
   customClass: {},
   customProps: {},
   tagAttributes: {},

package/lib/shared/ArrowIcon/props/propTypes.js

@@ -21,6 +21,8 @@ var _default = {
   a11yAttributes: _propTypes["default"].object,
   renderCustomToggleIndicator: _propTypes["default"].oneOfType([_propTypes["default"].node, _propTypes["default"].func]),
   isDisabled: _propTypes["default"].bool,
-  isReadOnly: _propTypes["default"].bool
+  isReadOnly: _propTypes["default"].bool,
+  isActive: _propTypes["default"].bool,
+  iconSize: _propTypes["default"].string
 };
 exports["default"] = _default;

package/lib/utils/dropDownUtils.js

@@ -296,7 +296,7 @@ var makeFormatOptions = function makeFormatOptions() {
         var value = _typeof(option) === 'object' ? option[impTextField || textField] : allowValueFallback ? option : '';
         var secondaryValue = _typeof(option) === 'object' ? option[impSecondaryField || secondaryField] : '';
         var photoURL = _typeof(option) === 'object' ? option[impImageField || imageField] : '';
-        var colorCode = (0, _selectn["default"])('colorCode', option); // grouping options (group select/MultiSelect)
+        var colorConfig = (0, _selectn["default"])('colorConfig', option); // grouping options (group select/MultiSelect)
 
         id = !(0, _Common.getIsEmptyValue)(id) ? optionIdGrouping(id, prefixText) : '';
         var additionalSearchFieldData = searchFields.reduce(function (value, item) {
@@ -337,8 +337,8 @@ var makeFormatOptions = function makeFormatOptions() {
             optionDetails.listItemProps = listStyle || listItemProps;
           }
 
-          if (colorCode) {
-            optionDetails.colorCode = colorCode;
+          if (colorConfig) {
+            optionDetails.colorConfig = colorConfig;
           }
 
           if (listStyleCustomProps || listItemCustomProps) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zohodesk/components",
-  "version": "1.0.0-temp-199.18",
+  "version": "1.0.0-temp-246",
   "main": "es/index.js",
   "module": "es/index.js",
   "private": false,
@@ -39,7 +39,7 @@
     "build:css:umd": "npm run clean &&  npm run init && react-cli build:css:umd",
     "coverage": "react-cli coverage",
     "prepare": "npm run init &&  npm run css:build ",
-    "prepublishOnly": "node prePublish.js && npm run css:review",
+    "prepublishOnly": "node prePublish.js && npm run css:review && npm run review:props ",
     "postpublish": "node postPublish.js",
     "report": "react-cli publish:report",
     "test": "react-cli test",