@zohodesk/dot 1.0.0-temp-197.6 → 1.0.0-temp-187.1

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

@@ -65,59 +65,6 @@ exports[`AttachmentViewer rendering the when isActive is true  1`] = `
                 data-selector-id="container"
                 data-test-id="containerComponent"
               >
-                <div
-                  class="menu"
-                  data-id="zoomIn"
-                  data-test-id="zoomIn"
-                >
-                  <button
-                    aria-pressed="false"
-                    class="buttonReset wrapper menuIcon undefined effect default border borderHover  hoverEffect  inflex coldir both"
-                    data-id="iconContainer"
-                    data-ishtml="false"
-                    data-selector-id="iconButton"
-                    data-test-id="iconContainer"
-                  >
-                    <i
-                      aria-hidden="true"
-                      class="zd_font_icons basic icon-zoomIn    "
-                      data-id="fontIcon"
-                      data-selector-id="fontIcon"
-                      data-test-id="fontIcon"
-                      style="--zd-iconfont-size: var(--zd_font_size16);"
-                    />
-                  </button>
-                </div>
-                <div
-                  class="menu"
-                >
-                  <a
-                    class="container  "
-                    data-id="newTabAttach"
-                    data-test-id="newTabAttach"
-                    href="https://2.bp.blogspot.com/_H-PCzW2K720/SlXXLLMOzsI/AAAAAAAAAFE/efv7GBth9cQ/s280/Elva+Hill+04.JPG"
-                    rel="noopener noreferrer"
-                    target="_blank"
-                  >
-                    <div
-                      aria-pressed="false"
-                      class="false wrapper menuIcon undefined effect default border borderHover  hoverEffect  inflex coldir both"
-                      data-id="iconContainer"
-                      data-ishtml="false"
-                      data-selector-id="iconButton"
-                      data-test-id="iconContainer"
-                    >
-                      <i
-                        aria-hidden="true"
-                        class="zd_font_icons basic icon-newLink    "
-                        data-id="fontIcon"
-                        data-selector-id="fontIcon"
-                        data-test-id="fontIcon"
-                        style="--zd-iconfont-size: var(--zd_font_size16);"
-                      />
-                    </div>
-                  </a>
-                </div>
                 <div
                   class="menu"
                 >
@@ -241,14 +188,6 @@ exports[`AttachmentViewer rendering the when isActive is true  1`] = `
                       class="loader"
                     />
                   </div>
-                  <img
-                    alt="Preview"
-                    class=" hide img  imgMaxFullSize "
-                    data-id="attachViewer"
-                    data-test-id="attachViewer"
-                    id="img0"
-                    src="https://2.bp.blogspot.com/_H-PCzW2K720/SlXXLLMOzsI/AAAAAAAAAFE/efv7GBth9cQ/s280/Elva+Hill+04.JPG"
-                  />
                 </div>
               </div>
             </div>
@@ -298,7 +237,7 @@ exports[`AttachmentViewer rendering the when isActive is true  1`] = `
                 data-test-id="containerComponent"
               >
                 <div
-                  class="imgItem selected   shrinkOff"
+                  class="imgItem selected shrinkOff"
                   data-id="attachPreviewList"
                   data-selector-id="box"
                   data-test-id="attachPreviewList"
@@ -313,16 +252,9 @@ exports[`AttachmentViewer rendering the when isActive is true  1`] = `
                       class="loader"
                     />
                   </div>
-                  <img
-                    alt="slack0.jpg"
-                    class=" hide image imgMaxFullSize "
-                    data-id="AttachmentImage"
-                    data-test-id="AttachmentImage"
-                    src="https://2.bp.blogspot.com/_H-PCzW2K720/SlXXLLMOzsI/AAAAAAAAAFE/efv7GBth9cQ/s280/Elva+Hill+04.JPG"
-                  />
                 </div>
                 <div
-                  class="imgItem    shrinkOff"
+                  class="imgItem  shrinkOff"
                   data-id="attachPreviewList"
                   data-selector-id="box"
                   data-test-id="attachPreviewList"
@@ -337,16 +269,9 @@ exports[`AttachmentViewer rendering the when isActive is true  1`] = `
                       class="loader"
                     />
                   </div>
-                  <img
-                    alt="slack1.jpg"
-                    class=" hide image imgMaxFullSize "
-                    data-id="AttachmentImage"
-                    data-test-id="AttachmentImage"
-                    src="https://p.bigstockphoto.com/GeFvQkBbSLaMdpKXF1Zv_bigstock-Aerial-View-Of-Blue-Lakes-And--227291596.jpg"
-                  />
                 </div>
                 <div
-                  class="imgItem    shrinkOff"
+                  class="imgItem  shrinkOff"
                   data-id="attachPreviewList"
                   data-selector-id="box"
                   data-test-id="attachPreviewList"
@@ -361,16 +286,9 @@ exports[`AttachmentViewer rendering the when isActive is true  1`] = `
                       class="loader"
                     />
                   </div>
-                  <img
-                    alt="slack2.jpg"
-                    class=" hide image imgMaxFullSize "
-                    data-id="AttachmentImage"
-                    data-test-id="AttachmentImage"
-                    src="https://wallpapercave.com/wp/wp3913900.jpg"
-                  />
                 </div>
                 <div
-                  class="imgItem    shrinkOff"
+                  class="imgItem  shrinkOff"
                   data-id="attachPreviewList"
                   data-selector-id="box"
                   data-test-id="attachPreviewList"
@@ -385,16 +303,9 @@ exports[`AttachmentViewer rendering the when isActive is true  1`] = `
                       class="loader"
                     />
                   </div>
-                  <img
-                    alt="slack3.jpg"
-                    class=" hide image imgMaxFullSize "
-                    data-id="AttachmentImage"
-                    data-test-id="AttachmentImage"
-                    src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/09/Giraffe_2019-07-28.jpg/682px-Giraffe_2019-07-28.jpg"
-                  />
                 </div>
                 <div
-                  class="imgItem    shrinkOff"
+                  class="imgItem  shrinkOff"
                   data-id="attachPreviewList"
                   data-selector-id="box"
                   data-test-id="attachPreviewList"
@@ -409,16 +320,9 @@ exports[`AttachmentViewer rendering the when isActive is true  1`] = `
                       class="loader"
                     />
                   </div>
-                  <img
-                    alt="slack4.jpg"
-                    class=" hide image imgMaxFullSize "
-                    data-id="AttachmentImage"
-                    data-test-id="AttachmentImage"
-                    src="https://wallpapercave.com/wp/wp3913900.jpg"
-                  />
                 </div>
                 <div
-                  class="imgItem    shrinkOff"
+                  class="imgItem  shrinkOff"
                   data-id="attachPreviewList"
                   data-selector-id="box"
                   data-test-id="attachPreviewList"
@@ -433,28 +337,23 @@ exports[`AttachmentViewer rendering the when isActive is true  1`] = `
                       class="loader"
                     />
                   </div>
-                  <img
-                    alt="slack5.jpg"
-                    class=" hide image imgMaxFullSize "
-                    data-id="AttachmentImage"
-                    data-test-id="AttachmentImage"
-                    src="https://upload.wikimedia.org/wikipedia/commons/thumb/0/09/Giraffe_2019-07-28.jpg/682px-Giraffe_2019-07-28.jpg"
-                  />
                 </div>
                 <div
-                  class="imgItem   isAudio shrinkOff"
+                  class="imgItem  shrinkOff"
                   data-id="attachPreviewList"
                   data-selector-id="box"
                   data-test-id="attachPreviewList"
                   data-title="slack5.mp3"
                 >
-                  <img
-                    alt="slack5.mp3"
-                    class="  image imgMaxFullSize "
-                    data-id="AttachmentImage"
-                    data-test-id="AttachmentImage"
-                    src="https://www.w3schools.com/html/horse.mp3"
-                  />
+                  <div
+                    class="spinLoad"
+                    data-id="AttachmentImage_loader"
+                    data-test-id="AttachmentImage_loader"
+                  >
+                    <div
+                      class="loader"
+                    />
+                  </div>
                 </div>
               </div>
             </div>

package/lib/AttachmentViewer/props/defaultProps.js

@@ -5,7 +5,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.AttachmentViewer_defaultProps = exports.AttachmentImage_defaultProps = void 0;
 var AttachmentImage_defaultProps = {
-  dataId: 'AttachmentImage'
+  dataId: 'AttachmentImage',
+  customClass: {
+    customImageClass: '',
+    customChildrenClass: ''
+  }
 };
 exports.AttachmentImage_defaultProps = AttachmentImage_defaultProps;
 var AttachmentViewer_defaultProps = {

package/lib/AttachmentViewer/props/propTypes.js

@@ -11,14 +11,18 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "d
 
 var AttachmentImage_propTypes = {
   alt: _propTypes["default"].string,
-  className: _propTypes["default"].string,
+  customClass: _propTypes["default"].shape({
+    customImageClass: _propTypes["default"].string,
+    customChildrenClass: _propTypes["default"].string
+  }),
   dataId: _propTypes["default"].string,
   id: _propTypes["default"].string,
   isCover: _propTypes["default"].bool,
-  isImage: _propTypes["default"].string,
   onClick: _propTypes["default"].func,
   onLoad: _propTypes["default"].func,
-  src: _propTypes["default"].string
+  onError: _propTypes["default"].func,
+  src: _propTypes["default"].string,
+  children: _propTypes["default"].node
 };
 exports.AttachmentImage_propTypes = AttachmentImage_propTypes;
 var AttachmentViewer_propTypes = {

package/lib/AttachmentViewer/utils.js

@@ -4,6 +4,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.ZoomEvent = exports.Zoom = void 0;
+exports.checkAudioUrlValidity = checkAudioUrlValidity;
+exports.checkFileSourcesValidation = checkFileSourcesValidation;
+exports.checkImageValidity = checkImageValidity;
+
+var _Attachment = require("./Attachment");
 
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
@@ -131,4 +136,58 @@ var ZoomEvent = /*#__PURE__*/function () {
   return ZoomEvent;
 }();
 
-exports.ZoomEvent = ZoomEvent;
+exports.ZoomEvent = ZoomEvent;
+
+function checkImageValidity(src) {
+  return new Promise(function (resolve) {
+    var img = new Image();
+    img.src = src;
+
+    img.onload = function () {
+      resolve(true);
+    };
+
+    img.onerror = function () {
+      resolve(false);
+    };
+  });
+}
+
+function checkAudioUrlValidity(url) {
+  return new Promise(function (resolve) {
+    var audio = new Audio(url);
+
+    audio.oncanplaythrough = function () {
+      resolve(true);
+    };
+
+    audio.onerror = function () {
+      resolve(false);
+    };
+  });
+}
+
+;
+
+function checkFileSourcesValidation(_ref) {
+  var fileName = _ref.fileName,
+      viewURL = _ref.viewURL;
+
+  if ((0, _Attachment.isAudioFile)(fileName)) {
+    var audioValidityPromise = checkAudioUrlValidity(viewURL);
+    return audioValidityPromise.then(function (isURLValid) {
+      return {
+        isViewURLValid: isURLValid,
+        canZoom: false
+      };
+    });
+  } else {
+    var imageValidityPromise = checkImageValidity(viewURL);
+    return imageValidityPromise.then(function (isURLValid) {
+      return {
+        isViewURLValid: isURLValid,
+        canZoom: isURLValid
+      };
+    });
+  }
+}

package/lib/Image/Image.js

@@ -61,7 +61,9 @@ var Image = /*#__PURE__*/function (_React$Component) {
           dataId = _this$props.dataId,
           htmlId = _this$props.htmlId,
           eleRef = _this$props.eleRef,
-          original = _this$props.original;
+          original = _this$props.original,
+          onLoad = _this$props.onLoad,
+          onError = _this$props.onError;
       return /*#__PURE__*/_react["default"].createElement("img", {
         src: src,
         alt: alt,
@@ -72,7 +74,9 @@ var Image = /*#__PURE__*/function (_React$Component) {
         onClick: onClick,
         id: htmlId,
         ref: eleRef,
-        "data-original": original
+        "data-original": original,
+        onLoad: onLoad,
+        onError: onError
       });
     }
   }]);

package/lib/Image/props/propTypes.js

@@ -19,6 +19,8 @@ var propTypes = {
   onClick: _propTypes["default"].func,
   original: _propTypes["default"].string,
   src: _propTypes["default"].string.isRequired,
-  title: _propTypes["default"].string
+  title: _propTypes["default"].string,
+  onLoad: _propTypes["default"].func,
+  onError: _propTypes["default"].func
 };
 exports.propTypes = propTypes;

package/lib/form/fields/TagsMultiSelect/TagsMultiSelect.js

@@ -227,7 +227,9 @@ var TagsMultiSelect = /*#__PURE__*/function (_React$Component) {
           _customProps$TagWrapp = customProps.TagWrapperProps,
           TagWrapperProps = _customProps$TagWrapp === void 0 ? {} : _customProps$TagWrapp,
           _customProps$TagProps = customProps.TagProps,
-          TagProps = _customProps$TagProps === void 0 ? {} : _customProps$TagProps;
+          TagProps = _customProps$TagProps === void 0 ? {} : _customProps$TagProps,
+          _customProps$listProp = customProps.listProps,
+          listProps = _customProps$listProp === void 0 ? {} : _customProps$listProp;
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(_TagsMultiSelectModule["default"].container, " ").concat(!isReadOnly ? " ".concat(needBorder ? _TagsMultiSelectModule["default"].hasBorder : '', "\n              ").concat(needBorder ? _TagsMultiSelectModule["default"]["borderColor_".concat(borderColor)] : _TagsMultiSelectModule["default"].borderColor_transparent, " ").concat(isPopupReady && needBorder ? _TagsMultiSelectModule["default"].active : '') : '', " ").concat(className),
         onClick: _General.stopBubbling,
@@ -336,7 +338,7 @@ var TagsMultiSelect = /*#__PURE__*/function (_React$Component) {
           var name = item.name,
               isNew = item.isNew,
               listItemProps = item.listItemProps;
-          return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, searchList.length > 1 && isNew ? /*#__PURE__*/_react["default"].createElement(_DropDownSeparator["default"], null) : null, /*#__PURE__*/_react["default"].createElement(_ListItem["default"], {
+          return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, searchList.length > 1 && isNew ? /*#__PURE__*/_react["default"].createElement(_DropDownSeparator["default"], null) : null, /*#__PURE__*/_react["default"].createElement(_ListItem["default"], _extends({
             key: index,
             index: index,
             autoHover: true,
@@ -349,7 +351,7 @@ var TagsMultiSelect = /*#__PURE__*/function (_React$Component) {
             isDisabled: listDisabled,
             customProps: listItemProps,
             customClass: listItemClass
-          }, isNew ? /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+          }, listProps), isNew ? /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
             alignBox: "row",
             align: "vertical"
           }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {

package/lib/form/fields/TextEditor/__tests__/__snapshots__/TextEditor.spec.js.snap

@@ -4,7 +4,7 @@ exports[`TextEditor rendering the defult props 1`] = `
 <DocumentFragment>
   <div
     class="textEditor large borderTop
-        light  editorHide flex cover coldir"
+        light   editorHide flex cover coldir"
     data-id="containerComponent"
     data-iseditor="true"
     data-selector-id="textEditor"

package/lib/form/fields/TextEditor/props/propTypes.js

@@ -22,7 +22,6 @@ var propTypes = {
   fontSize: _propTypes["default"].string,
   getRef: _propTypes["default"].func,
   handleAlertMessage: _propTypes["default"].func,
-  handleDropUpload: _propTypes["default"].func,
   i18nKeys: _propTypes["default"].shape({
     fileUploadError: _propTypes["default"].string,
     fileNotSupported: _propTypes["default"].string,

package/lib/list/DepartmentDropDown/DepartmentDropDown.js

@@ -25,6 +25,8 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
@@ -100,7 +102,10 @@ var DepartmentDropDown = /*#__PURE__*/function (_Component) {
           onSearch = _this$props3.onSearch,
           needSearchFetching = _this$props3.needSearchFetching,
           searchStr = _this$props3.searchStr,
-          i18nKeys = _this$props3.i18nKeys;
+          i18nKeys = _this$props3.i18nKeys,
+          customProps = _this$props3.customProps;
+      var _customProps$toggleDr = customProps.toggleDropDownProps,
+          toggleDropDownProps = _customProps$toggleDr === void 0 ? {} : _customProps$toggleDr;
       var _i18nKeys$title = i18nKeys.title,
           title = _i18nKeys$title === void 0 ? 'Move Department' : _i18nKeys$title,
           _i18nKeys$searchEmpty = i18nKeys.searchEmptyText,
@@ -109,7 +114,7 @@ var DepartmentDropDown = /*#__PURE__*/function (_Component) {
           searchErrorText = _i18nKeys$searchError === void 0 ? 'No results' : _i18nKeys$searchError,
           _i18nKeys$placeholder = i18nKeys.placeholder,
           placeholder = _i18nKeys$placeholder === void 0 ? 'Search Department' : _i18nKeys$placeholder;
-      return /*#__PURE__*/_react["default"].createElement(_ToggleDropDown["default"], {
+      return /*#__PURE__*/_react["default"].createElement(_ToggleDropDown["default"], _extends({
         title: title,
         options: departmentList,
         value: /*#__PURE__*/_react["default"].createElement(_SecondaryText.DepartmentText, {
@@ -138,7 +143,7 @@ var DepartmentDropDown = /*#__PURE__*/function (_Component) {
         isNextOptions: isNextOptions,
         onSearch: onSearch,
         needSearchFetching: needSearchFetching
-      });
+      }, toggleDropDownProps));
     }
   }]);
 

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

@@ -9,6 +9,7 @@ var defaultProps = {
   isPopupActive: true,
   isNextOptions: false,
   searchStr: '',
-  i18nKeys: {}
+  i18nKeys: {},
+  customProps: {}
 };
 exports.defaultProps = defaultProps;

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

@@ -31,5 +31,5 @@ var propTypes = (_propTypes = {
   searchEmptyText: _propTypes2["default"].string,
   searchErrorText: _propTypes2["default"].string,
   placeholder: _propTypes2["default"].string
-})), _propTypes);
+})), _defineProperty(_propTypes, "customProps", _propTypes2["default"].string), _propTypes);
 exports.propTypes = propTypes;

package/lib/list/status/StatusListItem/StatusListItem.module.css

@@ -6,43 +6,58 @@
   min-height: var(--zd_size35) ;
   cursor: pointer;
 }
+
 [dir=ltr] .withBorder {
   border-left: 1px solid var(--zdt_statuslistitem_default_border);
 }
+
 [dir=rtl] .withBorder {
   border-right: 1px solid var(--zdt_statuslistitem_default_border);
 }
+
 [dir=ltr] .small {
   padding: var(--zd_size7) var(--zd_size3) var(--zd_size7) var(--zd_size5) ;
 }
+
 [dir=rtl] .small {
   padding: var(--zd_size7) var(--zd_size5) var(--zd_size7) var(--zd_size3) ;
 }
+
 .medium {
   padding: var(--zd_size7) var(--zd_size20) ;
 }
+
 .large {
   height: var(--zd_size48) ;
 }
+
 [dir=ltr] .large {
   padding: var(--zd_size10) var(--zd_size3) var(--zd_size10) var(--zd_size25) ;
 }
+
 [dir=rtl] .large {
   padding: var(--zd_size10) var(--zd_size25) var(--zd_size10) var(--zd_size3) ;
 }
-.value,.multiLineValue {
+
+.value,
+.multiLineValue {
   line-height: 1.5385;
 }
+
 .value {
   composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
 }
-.multiLineValue{
+
+.multiLineValue {
   word-break: break-word;
+  -webkit-line-clamp: 2;
   composes: clamp from '~@zohodesk/components/lib/common/common.module.css';
 }
+
 [dir=ltr] .withBorder.active {
   border-left-color: var(--zdt_statuslistitem_default_active_border);
 }
+
 [dir=rtl] .withBorder.active {
   border-right-color: var(--zdt_statuslistitem_default_active_border);
 }
@@ -50,44 +65,56 @@
 .default.hover, .default.effect:hover {
   background-color: var(--zdt_statuslistitem_default_effect_bg);
 }
+
 .primary.hover, .primary.effect:hover, .selected {
   background-color: var(--zdt_statuslistitem_primary_efffect_bg);
 }
+
 .secondary.hover, .secondary.effect:hover {
   background-color: var(--zdt_statuslistitem_secondary_effect_bg);
 }
+
 .list.active.default, .list.active.primary {
   background-color: var(--zdt_statuslistitem_primary_efffect_bg);
 }
+
 .list.active.secondary {
   background-color: var(--zdt_statuslistitem_secondary_effect_bg);
 }
+
 .secondary.hover,
 .secondary.effect:hover,
 .list.active.secondary {
   color: var(--zdt_statuslistitem_secondary_effect_text);
 }
+
 .tickIcon {
   color: var(--zdt_statuslistitem_tickicon);
   position: absolute;
-  top:50% ;
+  top: 50% ;
   transform: translateY(-50%);
 }
+
 [dir=ltr] .tickIcon {
   right: var(--zd_size20) ;
 }
+
 [dir=rtl] .tickIcon {
   left: var(--zd_size20) ;
 }
-.tickIcon > i {
+
+.tickIcon>i {
   display: block;
 }
+
 [dir=ltr] .active.withTick {
   padding-right: var(--zd_size39) ;
 }
+
 [dir=rtl] .active.withTick {
   padding-left: var(--zd_size39) ;
 }
+
 /* Status Type */
 .statusType {
   width: var(--zd_size8) ;
@@ -100,12 +127,15 @@
 [dir=rtl] .statusType {
   margin-left: var(--zd_size13) ;
 }
+
 .black {
   background-color: var(--zdt_statuslistitem_black_bg);
 }
+
 .orange {
   background-color: var(--zdt_statuslistitem_orange_bg);
 }
+
 .green {
   background-color: var(--zdt_statuslistitem_green_bg);
-}
+}