@zohodesk/dot 1.6.0 → 1.6.2

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/CurrencyField/CurrencyField.js

@@ -166,6 +166,7 @@ var CurrencyField = /*#__PURE__*/function (_PureComponent) {
       }
 
       var uniqueId = htmlId ? htmlId : this.getNextId();
+      var isFocusable = !needReadOnlyStyle || !isReadOnly && needReadOnlyStyle;
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(_FieldsModule["default"].container, " ").concat(isDisabled ? _FieldsModule["default"].disabled : isReadOnly ? _FieldsModule["default"].readonly : ''),
         "data-title": isDisabled ? title : null,
@@ -197,7 +198,7 @@ var CurrencyField = /*#__PURE__*/function (_PureComponent) {
         onChange: this.handleChange,
         dataId: dataId,
         onBlur: this.onBlur,
-        onFocus: this.onFocus,
+        onFocus: isFocusable && this.onFocus,
         onKeyDown: onKeyDown,
         placeHolder: placeHolder,
         borderColor: borderColor,

package/lib/list/status/StatusDropdown/StatusDropdown.js

@@ -244,6 +244,8 @@ var StatusDropdown = /*#__PURE__*/function (_React$Component) {
           isRestrictScroll = _this$props4.isRestrictScroll,
           positionsOffset = _this$props4.positionsOffset,
           targetOffset = _this$props4.targetOffset,
+          renderTargetElement = _this$props4.renderTargetElement,
+          renderFooterElement = _this$props4.renderFooterElement,
           _this$props4$a11y = _this$props4.a11y,
           a11y = _this$props4$a11y === void 0 ? {} : _this$props4$a11y;
       var _a11y$tabIndex = a11y.tabIndex,
@@ -258,7 +260,11 @@ var StatusDropdown = /*#__PURE__*/function (_React$Component) {
         className: _StatusDropdownModule["default"].posRel,
         onMouseEnter: showOnHover && !isDisabled && !isReadOnly && isEditable ? this.handleTogglePopup : undefined,
         onMouseLeave: showOnHover && !isDisabled && !isReadOnly && isEditable ? this.handleTogglePopup : undefined
-      }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+      }, renderTargetElement ? renderTargetElement({
+        handleTogglePopup: this.handleTogglePopup,
+        isPopupOpen: isPopupOpen,
+        getTargetRef: getTargetRef
+      }) : /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         tagName: "button",
         alignBox: "row",
         className: "".concat(_StatusDropdownModule["default"].container, " ").concat(containerClass, " ").concat(_semanticButtonModule["default"].buttonReset),
@@ -396,7 +402,7 @@ var StatusDropdown = /*#__PURE__*/function (_React$Component) {
           getEmptyState: _this2.emptySearchSVG
         }) : /*#__PURE__*/_react["default"].createElement("div", {
           className: _StatusDropdownModule["default"].loader
-        }, /*#__PURE__*/_react["default"].createElement(_Loader["default"], null)))));
+        }, /*#__PURE__*/_react["default"].createElement(_Loader["default"], null))), renderFooterElement ? renderFooterElement : null));
       }) : null);
     }
   }]);

package/lib/list/status/StatusDropdown/__tests__/StatusDropdown.spec.js

@@ -13,6 +13,20 @@ describe('StatusDropdown', function () {
     var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_StatusDropdown["default"], null)),
         asFragment = _render.asFragment;
 
+    expect(asFragment()).toMatchSnapshot();
+  }), test('rendering target element', function () {
+    var renderTargetElement = function renderTargetElement(_ref) {
+      var isPopupOpen = _ref.isPopupOpen;
+      return /*#__PURE__*/_react["default"].createElement("div", {
+        className: isPopupOpen ? 'popupOpened' : 'popupClosed'
+      }, "Target Element");
+    };
+
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_StatusDropdown["default"], {
+      renderTargetElement: renderTargetElement
+    })),
+        asFragment = _render2.asFragment;
+
     expect(asFragment()).toMatchSnapshot();
   });
 });

package/lib/list/status/StatusDropdown/__tests__/__snapshots__/StatusDropdown.spec.js.snap

@@ -1,5 +1,19 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`StatusDropdown rendering target element 1`] = `
+<DocumentFragment>
+  <div
+    class="posRel"
+  >
+    <div
+      class="popupClosed"
+    >
+      Target Element
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
 exports[`StatusDropdown rendering the defult props 1`] = `
 <DocumentFragment>
   <div

package/lib/list/status/StatusDropdown/props/propTypes.js

@@ -30,5 +30,5 @@ var propTypes = (_propTypes = {
   idName: _propTypes2["default"].string,
   isArrow: _propTypes2["default"].bool,
   isDataLoaded: _propTypes2["default"].bool
-}, _defineProperty(_propTypes, "isDataLoaded", _propTypes2["default"].bool), _defineProperty(_propTypes, "isDisabled", _propTypes2["default"].bool), _defineProperty(_propTypes, "isEditable", _propTypes2["default"].bool), _defineProperty(_propTypes, "isFetchingOptions", _propTypes2["default"].bool), _defineProperty(_propTypes, "isPopupActive", _propTypes2["default"].bool), _defineProperty(_propTypes, "isPopupOpen", _propTypes2["default"].bool), _defineProperty(_propTypes, "isPopupReady", _propTypes2["default"].bool), _defineProperty(_propTypes, "isReadOnly", _propTypes2["default"].bool), _defineProperty(_propTypes, "isSearch", _propTypes2["default"].bool), _defineProperty(_propTypes, "keyName", _propTypes2["default"].string), _defineProperty(_propTypes, "left", _propTypes2["default"].number), _defineProperty(_propTypes, "needExternalPopupState", _propTypes2["default"].bool), _defineProperty(_propTypes, "needResponsive", _propTypes2["default"].bool), _defineProperty(_propTypes, "needTick", _propTypes2["default"].bool), _defineProperty(_propTypes, "onClick", _propTypes2["default"].func), _defineProperty(_propTypes, "onTogglePopup", _propTypes2["default"].func), _defineProperty(_propTypes, "options", _propTypes2["default"].array.isRequired), _defineProperty(_propTypes, "placeHolderText", _propTypes2["default"].string), _defineProperty(_propTypes, "position", _propTypes2["default"].string), _defineProperty(_propTypes, "removeClose", _propTypes2["default"].func), _defineProperty(_propTypes, "right", _propTypes2["default"].number), _defineProperty(_propTypes, "searchBoxSize", _propTypes2["default"].oneOf(['small', 'medium', 'xmedium'])), _defineProperty(_propTypes, "searchEmptyHint", _propTypes2["default"].string), _defineProperty(_propTypes, "searchErrorText", _propTypes2["default"].string), _defineProperty(_propTypes, "showIconOnHover", _propTypes2["default"].bool), _defineProperty(_propTypes, "showOnHover", _propTypes2["default"].bool), _defineProperty(_propTypes, "statusColor", _propTypes2["default"].string), _defineProperty(_propTypes, "targetAlign", _propTypes2["default"].oneOf(['vertical', 'horizontal', 'both', 'top', 'right', 'bottom', 'left', 'between', 'around'])), _defineProperty(_propTypes, "title", _propTypes2["default"].string), _defineProperty(_propTypes, "togglePopup", _propTypes2["default"].func), _defineProperty(_propTypes, "value", _propTypes2["default"].node), _defineProperty(_propTypes, "needMultiLineText", _propTypes2["default"].bool), _defineProperty(_propTypes, "onSelectLabel", _propTypes2["default"].func), _defineProperty(_propTypes, "top", _propTypes2["default"].number), _defineProperty(_propTypes, "a11y", _propTypes2["default"].object), _defineProperty(_propTypes, "isAbsolutePositioningNeeded", _propTypes2["default"].bool), _defineProperty(_propTypes, "isRestrictScroll", _propTypes2["default"].bool), _defineProperty(_propTypes, "positionsOffset", _propTypes2["default"].object), _defineProperty(_propTypes, "targetOffset", _propTypes2["default"].object), _propTypes);
+}, _defineProperty(_propTypes, "isDataLoaded", _propTypes2["default"].bool), _defineProperty(_propTypes, "isDisabled", _propTypes2["default"].bool), _defineProperty(_propTypes, "isEditable", _propTypes2["default"].bool), _defineProperty(_propTypes, "isFetchingOptions", _propTypes2["default"].bool), _defineProperty(_propTypes, "isPopupActive", _propTypes2["default"].bool), _defineProperty(_propTypes, "isPopupOpen", _propTypes2["default"].bool), _defineProperty(_propTypes, "isPopupReady", _propTypes2["default"].bool), _defineProperty(_propTypes, "isReadOnly", _propTypes2["default"].bool), _defineProperty(_propTypes, "isSearch", _propTypes2["default"].bool), _defineProperty(_propTypes, "keyName", _propTypes2["default"].string), _defineProperty(_propTypes, "left", _propTypes2["default"].number), _defineProperty(_propTypes, "needExternalPopupState", _propTypes2["default"].bool), _defineProperty(_propTypes, "needResponsive", _propTypes2["default"].bool), _defineProperty(_propTypes, "needTick", _propTypes2["default"].bool), _defineProperty(_propTypes, "onClick", _propTypes2["default"].func), _defineProperty(_propTypes, "onTogglePopup", _propTypes2["default"].func), _defineProperty(_propTypes, "options", _propTypes2["default"].array.isRequired), _defineProperty(_propTypes, "placeHolderText", _propTypes2["default"].string), _defineProperty(_propTypes, "position", _propTypes2["default"].string), _defineProperty(_propTypes, "removeClose", _propTypes2["default"].func), _defineProperty(_propTypes, "right", _propTypes2["default"].number), _defineProperty(_propTypes, "searchBoxSize", _propTypes2["default"].oneOf(['small', 'medium', 'xmedium'])), _defineProperty(_propTypes, "searchEmptyHint", _propTypes2["default"].string), _defineProperty(_propTypes, "searchErrorText", _propTypes2["default"].string), _defineProperty(_propTypes, "showIconOnHover", _propTypes2["default"].bool), _defineProperty(_propTypes, "showOnHover", _propTypes2["default"].bool), _defineProperty(_propTypes, "statusColor", _propTypes2["default"].string), _defineProperty(_propTypes, "targetAlign", _propTypes2["default"].oneOf(['vertical', 'horizontal', 'both', 'top', 'right', 'bottom', 'left', 'between', 'around'])), _defineProperty(_propTypes, "title", _propTypes2["default"].string), _defineProperty(_propTypes, "togglePopup", _propTypes2["default"].func), _defineProperty(_propTypes, "value", _propTypes2["default"].node), _defineProperty(_propTypes, "needMultiLineText", _propTypes2["default"].bool), _defineProperty(_propTypes, "onSelectLabel", _propTypes2["default"].func), _defineProperty(_propTypes, "top", _propTypes2["default"].number), _defineProperty(_propTypes, "a11y", _propTypes2["default"].object), _defineProperty(_propTypes, "isAbsolutePositioningNeeded", _propTypes2["default"].bool), _defineProperty(_propTypes, "isRestrictScroll", _propTypes2["default"].bool), _defineProperty(_propTypes, "positionsOffset", _propTypes2["default"].object), _defineProperty(_propTypes, "renderTargetElement", _propTypes2["default"].func), _defineProperty(_propTypes, "renderFooterElement", _propTypes2["default"].node), _defineProperty(_propTypes, "targetOffset", _propTypes2["default"].object), _propTypes);
 exports.propTypes = propTypes;

package/lib/v1/AttachmentViewer/AttachmentImage.js

@@ -9,10 +9,16 @@ exports["default"] = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _hooks = require("@zohodesk/hooks");
+
+var _Layout = require("@zohodesk/components/es/Layout");
+
 var _defaultProps = require("./props/defaultProps");
 
 var _propTypes = require("./props/propTypes");
 
+var _utils = require("../../AttachmentViewer/utils");
+
 var _Image = _interopRequireDefault(require("../Image/Image"));
 
 var _AttachmentViewerModule = _interopRequireDefault(require("../../AttachmentViewer/AttachmentViewer.module.css"));
@@ -36,51 +42,73 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
 var AttachmentImage = function AttachmentImage(props) {
-  var isImage = props.isImage,
-      onLoad = props.onLoad,
+  var onLoad = props.onLoad,
+      onError = props.onError,
       src = props.src,
       onClick = props.onClick,
       alt = props.alt,
       dataId = props.dataId,
       id = props.id,
-      className = props.className,
-      isCover = props.isCover;
-  var imageEle = (0, _react.useRef)();
+      customClass = props.customClass,
+      isCover = props.isCover,
+      children = props.children;
+  var _customClass$customIm = customClass.customImageClass,
+      customImageClass = _customClass$customIm === void 0 ? '' : _customClass$customIm,
+      _customClass$customCh = customClass.customChildrenClass,
+      customChildrenClass = _customClass$customCh === void 0 ? '' : _customClass$customCh;
 
   var _useState = (0, _react.useState)(true),
       _useState2 = _slicedToArray(_useState, 2),
       isLoading = _useState2[0],
       setLoading = _useState2[1];
 
-  var imgLoad = function imgLoad() {
-    setLoading(false);
-    onLoad && onLoad();
-  };
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      isImageValid = _useState4[0],
+      setImageValidity = _useState4[1];
 
-  (0, _react.useEffect)(function () {
-    if (isImage) {
-      var image = imageEle.current;
-      image.addEventListener('load', imgLoad);
-    } else {
+  function handleImageValidation() {
+    (0, _utils.checkImageValidity)(src).then(function (isValid) {
+      setImageValidity(isValid);
       setLoading(false);
-    }
+    });
+  }
+
+  (0, _react.useEffect)(function () {
+    handleImageValidation();
   }, []);
+  (0, _hooks.useEffectCallOnlyAfterState)(function () {
+    setLoading(true);
+    handleImageValidation();
+  }, [src]);
+
+  function renderImage() {
+    return /*#__PURE__*/_react["default"].createElement(_Image["default"], {
+      htmlId: id,
+      dataId: isImageValid ? dataId : "".concat(dataId, "_alt"),
+      src: src,
+      onClick: onClick,
+      className: customImageClass,
+      alt: alt,
+      isCover: isCover,
+      onLoad: onLoad,
+      onError: onError
+    });
+  }
+
   return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, isLoading ? /*#__PURE__*/_react["default"].createElement("div", {
     className: "".concat(_AttachmentViewerModule["default"].spinLoad),
     "data-id": "".concat(dataId, "_loader"),
     "data-test-id": "".concat(dataId, "_loader")
   }, /*#__PURE__*/_react["default"].createElement("div", {
     className: _AttachmentViewerModule["default"].loader
-  })) : null, /*#__PURE__*/_react["default"].createElement(_Image["default"], {
+  })) : isImageValid ? renderImage() : children ? /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+    align: "both",
     htmlId: id,
-    eleRef: imageEle,
-    dataId: dataId,
-    src: src,
-    onClick: onClick,
-    className: "".concat(isLoading ? _AttachmentViewerModule["default"].hide : '', " ").concat(className),
-    alt: alt,
-    isCover: isCover
-  }));
+    dataId: "".concat(dataId, "_custom"),
+    className: customChildrenClass
+  }, children) : renderImage() //alt ui
+  );
 };
 
 AttachmentImage.propTypes = _propTypes.AttachmentImage_propTypes;