@zohodesk/dot 1.0.0-temp-198.3.3 → 1.0.0-temp-199

package/es/list/Thread/Thread.module.css

@@ -1,43 +1,43 @@
-.varClass {
-  --icon_color: var(--zdt_thread_iconText);
-}
-.container {
-  composes: varClass;
-  position: relative;
-  color: var(--icon_color);
-  cursor: pointer;
-}
-.container:hover {
-  --icon_color: var(--zdt_thread_hover_iconText);
-}
-.count {
-  font-size: var(--zd_font_size9) ;
-}
-.align_left .count {
-  position: absolute;
-  line-height: normal;
-  top: var(--zd_size3) ;
-}
-[dir=ltr] .align_left .count {
-  text-align: left;
-  left: var(--zd_size8) ;
-}
-[dir=rtl] .align_left .count {
-  text-align: right;
-  right: var(--zd_size8) ;
-}
-.align_right {
-  composes: dInflex alignFend from '~@zohodesk/components/lib/common/common.module.css';
-}
-.align_right .count {
-  position: relative;
-  bottom: var(--zd_size2) ;
-}
-[dir=ltr] .align_right .count {
-  right: var(--zd_size5) ;
-  float: right;
-}
-[dir=rtl] .align_right .count {
-  left: var(--zd_size5) ;
-  float: left;
+.varClass {
+  --icon_color: var(--zdt_thread_iconText);
+}
+.container {
+  composes: varClass;
+  position: relative;
+  color: var(--icon_color);
+  cursor: pointer;
+}
+.container:hover {
+  --icon_color: var(--zdt_thread_hover_iconText);
+}
+.count {
+  font-size: var(--zd_font_size9) ;
+}
+.align_left .count {
+  position: absolute;
+  line-height: normal;
+  top: var(--zd_size3) ;
+}
+[dir=ltr] .align_left .count {
+  text-align: left;
+  left: var(--zd_size8) ;
+}
+[dir=rtl] .align_left .count {
+  text-align: right;
+  right: var(--zd_size8) ;
+}
+.align_right {
+  composes: dInflex alignFend from '~@zohodesk/components/lib/common/common.module.css';
+}
+.align_right .count {
+  position: relative;
+  bottom: var(--zd_size2) ;
+}
+[dir=ltr] .align_right .count {
+  right: var(--zd_size5) ;
+  float: right;
+}
+[dir=rtl] .align_right .count {
+  left: var(--zd_size5) ;
+  float: left;
 }

package/es/list/status/StatusDropdown/StatusDropdown.js

@@ -176,6 +176,8 @@ export class StatusDropdown extends React.Component {
       isRestrictScroll,
       positionsOffset,
       targetOffset,
+      renderTargetElement,
+      renderFooterElement,
       a11y = {}
     } = this.props;
     const {
@@ -193,7 +195,11 @@ export class StatusDropdown extends React.Component {
       className: style.posRel,
       onMouseEnter: showOnHover && !isDisabled && !isReadOnly && isEditable ? this.handleTogglePopup : undefined,
       onMouseLeave: showOnHover && !isDisabled && !isReadOnly && isEditable ? this.handleTogglePopup : undefined
-    }, /*#__PURE__*/React.createElement(Container, {
+    }, renderTargetElement ? renderTargetElement({
+      handleTogglePopup: this.handleTogglePopup,
+      isPopupOpen,
+      getTargetRef
+    }) : /*#__PURE__*/React.createElement(Container, {
       tagName: "button",
       alignBox: "row",
       className: `${style.container} ${containerClass} ${btnStyle.buttonReset}`,
@@ -333,7 +339,7 @@ export class StatusDropdown extends React.Component {
         getEmptyState: this.emptySearchSVG
       }) : /*#__PURE__*/React.createElement("div", {
         className: style.loader
-      }, /*#__PURE__*/React.createElement(Loader, null)))));
+      }, /*#__PURE__*/React.createElement(Loader, null))), renderFooterElement ? renderFooterElement : null));
     }) : null);
   }
 

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

@@ -7,5 +7,21 @@ describe('StatusDropdown', () => {
       asFragment
     } = render( /*#__PURE__*/React.createElement(StatusDropdown, null));
     expect(asFragment()).toMatchSnapshot();
+  }), test('rendering target element', () => {
+    const renderTargetElement = _ref => {
+      let {
+        isPopupOpen
+      } = _ref;
+      return /*#__PURE__*/React.createElement("div", {
+        className: isPopupOpen ? 'popupOpened' : 'popupClosed'
+      }, "Target Element");
+    };
+
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(StatusDropdown, {
+      renderTargetElement: renderTargetElement
+    }));
+    expect(asFragment()).toMatchSnapshot();
   });
 });

package/es/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/es/list/status/StatusDropdown/props/propTypes.js

@@ -54,5 +54,7 @@ export const propTypes = {
   isAbsolutePositioningNeeded: PropTypes.bool,
   isRestrictScroll: PropTypes.bool,
   positionsOffset: PropTypes.object,
+  renderTargetElement: PropTypes.func,
+  renderFooterElement: PropTypes.node,
   targetOffset: PropTypes.object
 };

package/es/lookup/header/Search/LookupSearch.module.css

@@ -1,20 +1,25 @@
-.searchStyle,
-.boxStyle {
+.wrapper {
   transition: var(--zd_transition1);
-  width: var(--zd_size96) ;
+  width: var(--zd_size160) ;
   height: var(--zd_size28) ;
   position: relative;
-}.searchStyle, .boxStyle {
-  background: none;
 }
-.boxStyle {
-  width: var(--zd_size160) ;
+.boxType {
+  border: 1px solid transparent;
   border-radius: 4px;
-  border: 1px solid var(--zdt_lookupsearch_boxstyle_border);
 }
-.searchStyle:hover, .boxStyle:hover {
+.borderType {
+  border-bottom: 1px solid transparent;
+}
+.boxType, .borderType {
+  border-color: var(--zdt_lookupsearch_boxstyle_border);
+}
+.boxType:hover, .borderType:hover {
   border-color: var(--zdt_lookupsearch_boxstyle_hover_border);
 }
+.boxType.active, .borderType.active {
+  border-color: var(--zdt_lookupsearch_boxstyle_activer_border);
+}
 .focusWidth {
   width: var(--zd_size220) ;
 }
@@ -22,36 +27,31 @@
   position: relative;
   height: var(--zd_size28) ;
   cursor: pointer;
+  padding: 0 var(--zd_size9) ;
 }
 .drpSearchBox::after {
   content: '';
   position: absolute;
-  top: var(--zd_size8) ;
-  bottom: var(--zd_size8) ;
+  top: var(--zd_size4) ;
+  bottom: var(--zd_size4) ;
 }
 [dir=ltr] .drpSearchBox::after {
-  right: calc( var(--zd_size1) * -1 ) ;
+  right: var(--zd_size6) ;
   border-right: 1px solid var(--zdt_lookupsearch_boxstyle_border);
 }
 [dir=rtl] .drpSearchBox::after {
-  left: calc( var(--zd_size1) * -1 ) ;
+  left: var(--zd_size6) ;
   border-left: 1px solid var(--zdt_lookupsearch_boxstyle_border);
 }
-.inputBox, .drpSearchBox {
-  padding: 0 var(--zd_size9) ;
-}
-[dir=ltr] .searchIconBox {
-  padding: var(--zd_size4) 0 var(--zd_size4) var(--zd_size9) ;
+[dir=ltr] .searchIcon {
+  padding-right: var(--zd_size8) ;
 }
-[dir=rtl] .searchIconBox {
-  padding: var(--zd_size4) var(--zd_size9) var(--zd_size4) 0 ;
+[dir=rtl] .searchIcon {
+  padding-left: var(--zd_size8) ;
 }
 .active, .boxStyle.active, .lineActive.drpSearchBox::after {
   border-color: var(--zdt_lookupsearch_boxstyle_activer_border);
 }
-[dir=ltr] .iconArrow {
-  margin-left: var(--zd_size5) ;
-}
-[dir=rtl] .iconArrow {
-  margin-right: var(--zd_size5) ;
-}
+.iconArrow {
+  margin: 0 var(--zd_size6) ;
+}

package/es/lookup/header/Search/Search.js

@@ -8,6 +8,7 @@ import { Search_propTypes, SearchUI_propTypes } from "./props/propTypes";
 
 import TextBoxIcon from '@zohodesk/components/lib/TextBoxIcon/TextBoxIcon';
 import { Container, Box } from '@zohodesk/components/lib/Layout';
+import { mergeStyle } from '@zohodesk/utils';
 import { Icon } from '@zohodesk/icons';
 import ToggleDropDown from "../../../dropdown/ToggleDropDown/ToggleDropDown";
 /** * Methods ** */
@@ -16,33 +17,19 @@ import { debounce } from '@zohodesk/components/lib/utils/debounce';
 import { cancelBubblingEffect } from '@zohodesk/components/es/utils/Common';
 /** * CSS ** */
 
-import style from "./LookupSearch.module.css";
+import defaultStyle from "./LookupSearch.module.css";
 export default class Search extends Component {
   constructor(props) {
     super(props);
-    this.handleDropDownOpen = this.handleDropDownOpen.bind(this);
-    this.handleDropDownClose = this.handleDropDownClose.bind(this);
     this.handleTextBoxFocus = this.handleTextBoxFocus.bind(this);
     this.handleTextBoxBlur = this.handleTextBoxBlur.bind(this);
     this.handleGetTextBoxRef = this.handleGetTextBoxRef.bind(this);
+    this.handleRenderChildren = this.handleRenderChildren.bind(this);
     this.state = {
-      isFocus: false,
-      isDropDownOpen: false
+      isFocus: false
     };
   }
 
-  handleDropDownOpen() {
-    this.setState({
-      isDropDownOpen: true
-    });
-  }
-
-  handleDropDownClose() {
-    this.setState({
-      isDropDownOpen: false
-    });
-  }
-
   handleTextBoxFocus(e) {
     const {
       onFocus
@@ -71,22 +58,45 @@ export default class Search extends Component {
     getRef && getRef(el);
   }
 
+  handleRenderChildren(_ref) {
+    let {
+      isActive
+    } = _ref;
+    const {
+      value,
+      selectedId,
+      renderChildren
+    } = this.props;
+
+    if (renderChildren) {
+      return renderChildren({
+        isActive,
+        value,
+        selectedId
+      });
+    }
+
+    return null;
+  }
+
   render() {
     const {
       options,
       onSelect,
       value,
-      selectedId
+      selectedId,
+      renderChildren
     } = this.props;
     const {
-      isFocus,
-      isDropDownOpen
+      isFocus
     } = this.state;
     const searchUIExtraProps = {
-      isFocus: isFocus || isDropDownOpen,
+      isFocus: isFocus,
       onFocus: this.handleTextBoxFocus,
       onBlur: this.handleTextBoxBlur,
-      getRef: this.handleGetTextBoxRef
+      getRef: this.handleGetTextBoxRef,
+      value: value,
+      renderChildren: renderChildren ? this.handleRenderChildren : null
     };
     return options ? /*#__PURE__*/React.createElement(ToggleDropDown, {
       value: value,
@@ -95,9 +105,7 @@ export default class Search extends Component {
       needTick: true,
       isArrow: false,
       isToggleStateNeeded: true,
-      selectedId: selectedId,
-      onDropDownOpen: this.handleDropDownOpen,
-      onDropDownClose: this.handleDropDownClose
+      selectedId: selectedId
     }, /*#__PURE__*/React.createElement(SearchUI, { ...this.props,
       ...searchUIExtraProps
     })) : /*#__PURE__*/React.createElement(SearchUI, { ...this.props,
@@ -171,15 +179,27 @@ class SearchUI extends Component {
       activeClass,
       isFocus,
       onFocus,
-      onBlur
+      onBlur,
+      renderChildren,
+      isActive,
+      customStyle
     } = this.props;
+    const isInActiveState = isFocus || isActive;
+    const isFocusWidth = isFocus || searchStr || isActive;
+    const style = mergeStyle(defaultStyle, customStyle);
     return /*#__PURE__*/React.createElement(Container, {
       isCover: false,
       alignBox: "row",
       align: "vertical",
-      className: `${style.searchStyle} ${isBoxed ? style.boxStyle : ''} ${isFocus ? `${style.active} ${activeClass ? activeClass : ''} ` : ''} ${searchStr || isFocus ? style.focusWidth : ''}`
-    }, options && /*#__PURE__*/React.createElement(Container, {
-      className: `${style.drpSearchBox} ${isFocus ? style.lineActive : ''}`,
+      className: `
+          ${style.wrapper} ${isBoxed ? style.boxType : style.borderType} 
+          ${isInActiveState ? `${style.active} ${activeClass || ''}` : ''}
+          ${isFocusWidth ? style.focusWidth : ''}
+        `
+    }, renderChildren && options ? renderChildren({
+      isActive
+    }) : options ? /*#__PURE__*/React.createElement(Container, {
+      className: `${style.drpSearchBox} ${isInActiveState ? style.lineActive : ''}`,
       isCover: false,
       align: "vertical",
       alignBox: "row",
@@ -191,17 +211,13 @@ class SearchUI extends Component {
       name: "ZD-down",
       size: "7",
       iconClass: style.iconArrow
-    })), isSearchIconNeed && /*#__PURE__*/React.createElement(Box, {
-      className: style.searchIconBox
-    }, /*#__PURE__*/React.createElement(Icon, {
+    })) : isSearchIconNeed ? /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-search",
-      size: "11"
-    })), /*#__PURE__*/React.createElement(Box, {
+      size: "11",
+      iconClass: style.searchIcon
+    }) : null, /*#__PURE__*/React.createElement(Box, {
       flexible: true
     }, /*#__PURE__*/React.createElement(TextBoxIcon, {
-      customClass: {
-        customTextBox: `${isBoxed ? style.inputBox : ''}`
-      },
       customProps: {
         TextBoxProps: {
           'data-a11y-autofocus': true
@@ -219,7 +235,8 @@ class SearchUI extends Component {
       size: "small",
       inputRef: getRef,
       onClear: this.handleClear,
-      onClearMouseDown: cancelBubblingEffect
+      onClearMouseDown: cancelBubblingEffect,
+      needBorder: false
     })));
   }
 

package/es/lookup/header/Search/props/defaultProps.js

@@ -1,5 +1,6 @@
 export const SearchUI_defaultProps = {
   activeClass: '',
   isBoxed: false,
-  isSearchIconNeed: false
+  isSearchIconNeed: false,
+  isActive: false
 };

package/es/lookup/header/Search/props/propTypes.js

@@ -24,5 +24,9 @@ export const SearchUI_propTypes = {
   options: PropTypes.array,
   placeHolder: PropTypes.string,
   searchStr: PropTypes.string,
-  title: PropTypes.string
+  title: PropTypes.string,
+  renderChildren: PropTypes.func,
+  isActive: PropTypes.bool,
+  renderChildren: PropTypes.func,
+  customStyle: PropTypes.object
 };

package/es/utils/editorUtils.js

@@ -1,5 +1,4 @@
-const ATTACHMENT_FILE_NAME_SIZE_LIMIT = 200; // editorUtils
-
+// editorUtils
 export function editorContentValidate(editorObj) {
   let content = editorObj && editorObj.getContent && editorObj.getContent() || '';
 
@@ -48,12 +47,13 @@ export function encodeForHtml(str) {
   return str;
 } // attachment
 
-export function isFileNameSizeInvalid(fileName) {
-  return fileName.length > ATTACHMENT_FILE_NAME_SIZE_LIMIT;
+export function isFileNameSizeInvalid(fileName, fileNameMaxCharacters) {
+  return fileName.length > fileNameMaxCharacters;
 }
-export function isImageFormat(fileName) {
+export function isImageFormat(fileName, allowedFileExtensions) {
   let extension = getExtensionFromFileName(fileName);
-  return /jpeg|jpg|png|gif|bmp|ico/i.test(extension);
+  const isValidExtension = allowedFileExtensions.includes(extension);
+  return isValidExtension;
 }
 export function getExtensionFromFileName(fileName) {
   if (fileName && fileName.indexOf('.') != -1) {

package/es/v1/AttachmentViewer/AttachmentImage.js

@@ -2,8 +2,11 @@
 
 /** * Libraries ** */
 import React, { useRef, useEffect, useState } from 'react';
+import { useEffectCallOnlyAfterState } from '@zohodesk/hooks';
+import { Container } from '@zohodesk/components/es/Layout';
 import { AttachmentImage_defaultProps } from "./props/defaultProps";
 import { AttachmentImage_propTypes } from "./props/propTypes";
+import { checkImageValidity } from "../../AttachmentViewer/utils";
 import Image from "../Image/Image";
 /** * CSS ** */
 
@@ -11,48 +14,66 @@ import style from "../../AttachmentViewer/AttachmentViewer.module.css";
 
 const AttachmentImage = props => {
   const {
-    isImage,
     onLoad,
+    onError,
     src,
     onClick,
     alt,
     dataId,
     id,
-    className,
-    isCover
+    customClass,
+    isCover,
+    children
   } = props;
-  const imageEle = useRef();
+  const {
+    customImageClass = '',
+    customChildrenClass = ''
+  } = customClass;
   const [isLoading, setLoading] = useState(true);
+  const [isImageValid, setImageValidity] = useState(false);
 
-  const imgLoad = () => {
-    setLoading(false);
-    onLoad && onLoad();
-  };
+  function handleImageValidation() {
+    checkImageValidity(src).then(isValid => {
+      setImageValidity(isValid);
+      setLoading(false);
+    });
+  }
 
   useEffect(() => {
-    if (isImage) {
-      const image = imageEle.current;
-      image.addEventListener('load', imgLoad);
-    } else {
-      setLoading(false);
-    }
+    handleImageValidation();
   }, []);
+  useEffectCallOnlyAfterState(() => {
+    setLoading(true);
+    handleImageValidation();
+  }, [src]);
+
+  function renderImage() {
+    return /*#__PURE__*/React.createElement(Image, {
+      htmlId: id,
+      dataId: isImageValid ? dataId : `${dataId}_alt`,
+      src: src,
+      onClick: onClick,
+      className: customImageClass,
+      alt: alt,
+      isCover: isCover,
+      onLoad: onLoad,
+      onError: onError
+    });
+  }
+
   return /*#__PURE__*/React.createElement(React.Fragment, null, isLoading ? /*#__PURE__*/React.createElement("div", {
     className: `${style.spinLoad}`,
     "data-id": `${dataId}_loader`,
     "data-test-id": `${dataId}_loader`
   }, /*#__PURE__*/React.createElement("div", {
     className: style.loader
-  })) : null, /*#__PURE__*/React.createElement(Image, {
+  })) : isImageValid ? renderImage() : children ? /*#__PURE__*/React.createElement(Container, {
+    align: "both",
     htmlId: id,
-    eleRef: imageEle,
-    dataId: dataId,
-    src: src,
-    onClick: onClick,
-    className: `${isLoading ? style.hide : ''} ${className}`,
-    alt: alt,
-    isCover: isCover
-  }));
+    dataId: `${dataId}_custom`,
+    className: customChildrenClass
+  }, children) : renderImage() //alt ui
+  );
 };
 
 AttachmentImage.propTypes = AttachmentImage_propTypes;