@zohodesk/dot 1.0.0-temp-229.2 → 1.0.0-temp-230.2

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

@@ -13,7 +13,6 @@ import StatusListItem from "../StatusListItem/StatusListItem";
 import commonStyle from '@zohodesk/components/es/common/common.module.css';
 import ResponsiveDropBox from '@zohodesk/components/es/ResponsiveDropBox/ResponsiveDropBox';
 import { ResponsiveReceiver } from '@zohodesk/components/es/Responsive/CustomResponsive';
-import Flex from '@zohodesk/layout/es/Flex/Flex';
 import { getUniqueId } from '@zohodesk/components/es/Provider/IdProvider';
 import btnStyle from '@zohodesk/components/es/semantic/Button/semanticButton.module.css';
 import style from "./StatusDropdown.module.css";
@@ -31,11 +30,6 @@ export class StatusDropdown extends React.Component {
     this.searchList = this.searchList.bind(this);
     this.handleScroll = this.handleScroll.bind(this);
     this.emptySearchSVG = this.emptySearchSVG.bind(this);
-    this.getSearchA11y = this.getSearchA11y.bind(this);
-    this.getHeadingA11y = this.getHeadingA11y.bind(this);
-    this.getListItemA11y = this.getListItemA11y.bind(this);
-    this.getTextBoxIconCustomProps = this.getTextBoxIconCustomProps.bind(this);
-    this.handleListItemClick = this.handleListItemClick.bind(this);
     this.getAriaId = getUniqueId(this);
   }
 
@@ -130,44 +124,6 @@ export class StatusDropdown extends React.Component {
     };
   }
 
-  getSearchA11y() {
-    return {
-      ariaHaspopup: this.props.isSearch ? 'listbox' : 'menu',
-      ariaExpanded: this.props.isPopupReady,
-      role: 'combobox',
-      ariaActivedescendant: this.props.isPopupReady ? this.props.value : '',
-      ariaOwns: this.getAriaId()
-    };
-  }
-
-  getHeadingA11y() {
-    return {
-      role: 'heading'
-    };
-  }
-
-  getListItemA11y(isActive, listItemText) {
-    return {
-      role: this.props.isSearch ? 'option' : 'menuitem',
-      ariaSelected: isActive,
-      ariaLabel: listItemText
-    };
-  }
-
-  getTextBoxIconCustomProps() {
-    return {
-      TextBoxProps: {
-        'data-a11y-autofocus': true
-      }
-    };
-  }
-
-  handleListItemClick(item) {
-    return e => {
-      this.onSelect(item, e);
-    };
-  }
-
   render() {
     let {
       options
@@ -223,12 +179,10 @@ export class StatusDropdown extends React.Component {
       renderTargetElement,
       renderFooterElement,
       a11y = {},
-      customClass,
-      renderCustomDropBoxHeader
+      customClass
     } = this.props;
     const {
-      dropBoxClass = '',
-      customDropBoxHeader = ''
+      dropBoxClass = ''
     } = customClass;
     const {
       tabIndex = 0,
@@ -241,9 +195,6 @@ export class StatusDropdown extends React.Component {
     } = this.state;
     let containerClass = `${className ? className : ''} ${isPopupReady ? activeStyle ? activeStyle : '' : showIconOnHover ? style.hoverIcon : ''} ${isDisabled ? commonStyle.disabled : isReadOnly ? style.readOnly : !isEditable ? style.cursorDefault : !showOnHover ? `${style.cursor} ${hoverStyle ? hoverStyle : ''}` : `${hoverStyle ? hoverStyle : ''} ${style.cursorDefault}`}`;
     let ariaTitleId = this.getAriaId();
-    let textBoxA11y = this.getSearchA11y();
-    let headingA11y = this.getHeadingA11y();
-    let textBoxIconCustomProps = this.getTextBoxIconCustomProps();
     return /*#__PURE__*/React.createElement("div", {
       className: style.posRel,
       onMouseEnter: showOnHover && !isDisabled && !isReadOnly && isEditable ? this.handleTogglePopup : undefined,
@@ -300,8 +251,8 @@ export class StatusDropdown extends React.Component {
         isAnimate: true,
         getRef: getContainerRef,
         customClass: {
-          customDropBoxWrap: `${style.dropBoxContainer} `,
-          customDropBox: `${dropBoxClass} ${renderCustomDropBoxHeader ? style.dropBoxWithCustomHeader : ''}`
+          customDropBoxWrap: style.dropBoxContainer,
+          customDropBox: dropBoxClass
         },
         needResponsive: needResponsive,
         isResponsivePadding: true,
@@ -319,74 +270,81 @@ export class StatusDropdown extends React.Component {
             isFetchingOptions: isFetchingOptions
           }
         }
-      }, (() => {
-        const dropdownContent = /*#__PURE__*/React.createElement(React.Fragment, null, isSearch ? /*#__PURE__*/React.createElement(Box, {
-          className: style.search
-        }, /*#__PURE__*/React.createElement(TextBoxIcon, {
-          placeHolder: placeHolderText,
-          onChange: this.handleChange,
-          value: searchString,
-          onClear: this.onSearchClear,
-          size: searchBoxSize,
-          customProps: textBoxIconCustomProps,
-          a11y: textBoxA11y,
-          dataId: `${dataId}_search`
-        })) : null, title && options.length != 0 && /*#__PURE__*/React.createElement(Box, {
-          className: style.title
-        }, /*#__PURE__*/React.createElement(DropDownHeading, {
-          htmlId: ariaTitleId,
-          text: title,
-          a11y: headingA11y
-        })), /*#__PURE__*/React.createElement(Box, {
-          scroll: "vertical",
-          flexible: true,
-          shrink: true,
-          dataId: `${dataId}_list`,
-          preventParentScroll: "vertical",
-          className: `${tabletMode ? style.responsivemaxHgt : style.maxHgt}`,
-          onScroll: this.handleScroll,
-          role: isSearch ? 'listbox' : 'menu',
-          tabindex: "-1",
-          isScrollAttribute: true
-        }, options.length != 0 && isDataLoaded ? /*#__PURE__*/React.createElement(React.Fragment, null, options.map((item, i) => {
-          const listItemText = item[keyName];
-          const isActive = value === listItemText;
-          return /*#__PURE__*/React.createElement(StatusListItem, {
-            key: item[idName] || i,
-            dataId: `dataid_${i}`,
-            value: listItemText,
-            id: item[idName],
-            active: isActive,
-            onClick: this.handleListItemClick(item),
-            index: i,
-            needTick: needTick,
-            needBorder: false,
-            bulletColor: item[statusColor],
-            title: listItemText,
-            needMultiLineText: needMultiLineText,
-            autoHover: true,
-            a11y: this.getListItemA11y(isActive, listItemText)
-          });
-        }), isFetchingOptions && /*#__PURE__*/React.createElement(Container, {
-          isCover: false,
-          align: "both"
-        }, /*#__PURE__*/React.createElement(Loader, null))) : isDataLoaded ? /*#__PURE__*/React.createElement(CommonEmptyState, {
-          className: style.svgWrapper,
-          title: searchErrorText || 'No results',
-          description: searchEmptyHint,
-          size: "small",
-          getEmptyState: this.emptySearchSVG
-        }) : /*#__PURE__*/React.createElement("div", {
-          className: style.loader
-        }, /*#__PURE__*/React.createElement(Loader, null))), renderFooterElement ? renderFooterElement : null);
-        return renderCustomDropBoxHeader ? /*#__PURE__*/React.createElement("div", {
-          className: style.dropBoxListContainer
-        }, /*#__PURE__*/React.createElement(Flex, {
-          $ui_className: `${customDropBoxHeader} ${style.customDropBoxHeaderContainer}`
-        }, renderCustomDropBoxHeader), /*#__PURE__*/React.createElement("div", {
-          className: style.dropdownOptions
-        }, dropdownContent)) : dropdownContent;
-      })());
+      }, /*#__PURE__*/React.createElement(React.Fragment, null, isSearch ? /*#__PURE__*/React.createElement(Box, {
+        className: style.search
+      }, /*#__PURE__*/React.createElement(TextBoxIcon, {
+        placeHolder: placeHolderText,
+        onChange: this.handleChange,
+        value: searchString,
+        onClear: this.onSearchClear,
+        size: searchBoxSize,
+        customProps: {
+          TextBoxProps: {
+            'data-a11y-autofocus': true
+          }
+        },
+        a11y: {
+          ariaHaspopup: isSearch ? 'listbox' : 'menu',
+          ariaExpanded: isPopupReady,
+          role: 'combobox',
+          ariaActivedescendant: isPopupReady ? value : '',
+          ariaOwns: ariaTitleId
+        },
+        dataId: `${dataId}_search`
+      })) : null, title && options.length != 0 && /*#__PURE__*/React.createElement(Box, {
+        className: style.title
+      }, /*#__PURE__*/React.createElement(DropDownHeading, {
+        htmlId: ariaTitleId,
+        text: title,
+        a11y: {
+          role: 'heading'
+        }
+      })), /*#__PURE__*/React.createElement(Box, {
+        scroll: "vertical",
+        flexible: true,
+        shrink: true,
+        dataId: `${dataId}_list`,
+        preventParentScroll: "vertical",
+        className: `${tabletMode ? style.responsivemaxHgt : style.maxHgt}`,
+        onScroll: this.handleScroll,
+        role: isSearch ? 'listbox' : 'menu',
+        tabindex: "-1",
+        isScrollAttribute: true
+      }, options.length != 0 && isDataLoaded ? /*#__PURE__*/React.createElement(React.Fragment, null, options.map((item, i) => {
+        const listItemText = item[keyName];
+        const isActive = value === listItemText;
+        return /*#__PURE__*/React.createElement(StatusListItem, {
+          key: i,
+          dataId: `dataid_${i}`,
+          value: listItemText,
+          id: item[idName],
+          active: isActive,
+          onClick: this.onSelect.bind(this, item),
+          index: i,
+          needTick: needTick,
+          needBorder: false,
+          bulletColor: item[statusColor],
+          title: listItemText,
+          needMultiLineText: needMultiLineText,
+          autoHover: true,
+          a11y: {
+            role: isSearch ? 'option' : 'menuitem',
+            ariaSelected: isActive,
+            ariaLabel: listItemText
+          }
+        });
+      }), isFetchingOptions && /*#__PURE__*/React.createElement(Container, {
+        isCover: false,
+        align: "both"
+      }, /*#__PURE__*/React.createElement(Loader, null))) : isDataLoaded ? /*#__PURE__*/React.createElement(CommonEmptyState, {
+        className: style.svgWrapper,
+        title: searchErrorText || 'No results',
+        description: searchEmptyHint,
+        size: "small",
+        getEmptyState: this.emptySearchSVG
+      }) : /*#__PURE__*/React.createElement("div", {
+        className: style.loader
+      }, /*#__PURE__*/React.createElement(Loader, null))), renderFooterElement ? renderFooterElement : null));
     }) : null);
   }
 

package/es/list/status/StatusDropdown/StatusDropdown.module.css

@@ -1,130 +1,83 @@
 .container {
   max-width: 100% ;
 }
-
-.dropBoxListContainer {
-  border-radius: 7px;
-  padding: var(--zd_size10) ;
-  border: 1px solid var(--zdt_statusdropdown_wrapper_container_border);
-  background: var(--zdt_statusdropdown_wrapper_container_bg);
-  box-shadow: var(--zd_bs_statusdropdown_wrapper_container);
-}
-
-.dropdownOptions {
-  padding-inline: var(--zd_size1) ;
-  padding-block: var(--zd_size1) ;
-  background-color: var(--zdt_statusdropdown_wrapper_dropdown_bg);
-  border: 1px solid var(--zdt_statusdropdown_wrapper_container_border);
-  border-radius: 7px;
-}
-
 .posRel {
   position: relative;
 }
-
 .maxHgt {
   max-height: var(--zd_size265) ;
   padding-block: var(--zd_size10) ;
-  padding-inline: 0 ;
+  padding-inline:0 ;
 }
-
-.responsivemaxHgt {
+.responsivemaxHgt{
   padding-block: var(--zd_size10) 0 ;
-  padding-inline: 0 ;
+  padding-inline:0 ;
 }
-
 .title {
   padding-block-start: var(--zd_size6) ;
 }
-
 .default_arrow,
 .overlay_arrow {
   padding-inline: var(--zd_size5) 0 ;
-  padding-block: 0 ;
+  padding-block:0 ;
 }
-
 .overlay_arrow {
   position: absolute;
   top: 50% ;
   transform: translateY(-50%) perspective(1px);
 }
-
 [dir=ltr] .overlay_arrow {
   left: 100% ;
 }
-
 [dir=rtl] .overlay_arrow {
   right: 100% ;
 }
-
 .hoverIcon .arrow {
   opacity: 0;
   visibility: hidden;
 }
-
 .hoverIcon:hover .arrow {
   opacity: 1;
   visibility: visible;
 }
-
 .value {
   composes: dotted from '~@zohodesk/components/es/common/common.module.css';
 }
-
 .search {
   padding-block: var(--zd_size6) 0 ;
-  padding-inline: var(--zd_size20) ;
+  padding-inline:var(--zd_size20) ;
 }
-
 .svgWrapper {
   padding-block-end: var(--zd_size25) ;
 }
-
 .readOnly {
   cursor: no-drop;
 }
-
 .cursorDefault {
   cursor: default;
 }
-
 .cursor {
   cursor: pointer;
 }
-
 [dir=ltr] .dropBoxContainer {
   text-align: left;
 }
-
 [dir=rtl] .dropBoxContainer {
   text-align: right;
 }
-
 .iconBox {
   margin-inline-end: var(--zd_size4) ;
 }
-
-.iconBox>i {
+.iconBox > i {
   display: block;
 }
-
 .loader {
   width: var(--zd_size40) ;
   margin: 0 auto ;
 }
-
 .seperatedLine {
   height: var(--zd_size1) ;
   margin-block: var(--zd_size9) var(--zd_size10) ;
-  margin-inline: 0 ;
+  margin-inline:0 ;
   border-bottom: 1px solid var(--zdt_statusdropdown_line_border);
 }
-
-.customDropBoxHeaderContainer {
-  margin-block-end: var(--zd_size6) ;
-  margin-inline: var(--zd_size1) ;
-}
-
-.dropBoxWithCustomHeader {
-  border-radius: 7px;
-}

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

@@ -19,6 +19,5 @@ export const defaultProps = {
   isFetchingOptions: false,
   isAbsolutePositioningNeeded: true,
   isRestrictScroll: false,
-  customClass: {},
-  renderCustomDropBoxHeader: null
+  customClass: {}
 };

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

@@ -59,6 +59,5 @@ export const propTypes = {
   targetOffset: PropTypes.object,
   customClass: PropTypes.shape({
     dropBoxClass: PropTypes.string
-  }),
-  renderCustomDropBoxHeader: PropTypes.node
+  })
 };

package/lib/AttachmentViewer/AttachmentImage.js

@@ -92,7 +92,8 @@ var AttachmentImage = /*#__PURE__*/function (_Component) {
           isCover = _this$props.isCover,
           customClass = _this$props.customClass,
           onLoad = _this$props.onLoad,
-          onError = _this$props.onError;
+          onError = _this$props.onError,
+          imageRef = _this$props.imageRef;
       var isImageValid = this.state.isImageValid;
       var _customClass$customIm = customClass.customImageClass,
           customImageClass = _customClass$customIm === void 0 ? '' : _customClass$customIm;
@@ -104,6 +105,7 @@ var AttachmentImage = /*#__PURE__*/function (_Component) {
         className: customImageClass,
         alt: alt,
         isCover: isCover,
+        eleRef: imageRef,
         onLoad: onLoad,
         onError: onError
       });