@zohodesk/dot 1.0.0-temp-228.2 → 1.0.0-temp-229

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

@@ -13,6 +13,7 @@ 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";
@@ -30,6 +31,11 @@ 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);
   }
 
@@ -124,6 +130,44 @@ 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
@@ -179,10 +223,12 @@ export class StatusDropdown extends React.Component {
       renderTargetElement,
       renderFooterElement,
       a11y = {},
-      customClass
+      customClass,
+      renderSuggestedStatus
     } = this.props;
     const {
-      dropBoxClass = ''
+      dropBoxClass = '',
+      suggestedStatusWrapper = ''
     } = customClass;
     const {
       tabIndex = 0,
@@ -195,6 +241,9 @@ 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,
@@ -251,8 +300,8 @@ export class StatusDropdown extends React.Component {
         isAnimate: true,
         getRef: getContainerRef,
         customClass: {
-          customDropBoxWrap: style.dropBoxContainer,
-          customDropBox: dropBoxClass
+          customDropBoxWrap: `${style.dropBoxContainer} `,
+          customDropBox: `${dropBoxClass} ${renderSuggestedStatus ? style.dropBoxWithSuggestedStatus : ''}`
         },
         needResponsive: needResponsive,
         isResponsivePadding: true,
@@ -270,81 +319,74 @@ export class StatusDropdown extends React.Component {
             isFetchingOptions: isFetchingOptions
           }
         }
-      }, /*#__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));
+      }, (() => {
+        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 renderSuggestedStatus ? /*#__PURE__*/React.createElement("div", {
+          className: style.dropBoxListContainer
+        }, /*#__PURE__*/React.createElement(Flex, {
+          $ui_className: `${suggestedStatusWrapper} ${style.suggestedStatusContainer}`
+        }, renderSuggestedStatus), /*#__PURE__*/React.createElement("div", {
+          className: style.dropdownOptions
+        }, dropdownContent)) : dropdownContent;
+      })());
     }) : null);
   }
 

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

@@ -1,83 +1,130 @@
 .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_commentList_normal_bg);
+  border: 1px solid var(--zdt_statusdropdown_wrapper_container_border);
+  border-radius: 7px;
+}
+
 .posRel {
   position: relative;
 }
+
 .maxHgt {
   max-height: var(--zd_size265) ;
-  padding: var(--zd_size10) 0 ;
+  padding-block: var(--zd_size10) ;
+  padding-inline: 0 ;
 }
-.responsivemaxHgt{
-  padding: var(--zd_size10) 0 0 ;
+
+.responsivemaxHgt {
+  padding-block: var(--zd_size10) 0 ;
+  padding-inline: 0 ;
 }
+
 .title {
-  padding-top: var(--zd_size6) ;
+  padding-block-start: var(--zd_size6) ;
 }
-[dir=ltr] .default_arrow, [dir=ltr] .overlay_arrow {
-  padding: 0 0 0 var(--zd_size5) ;
-}
-[dir=rtl] .default_arrow, [dir=rtl] .overlay_arrow {
-  padding: 0 var(--zd_size5) 0 0 ;
+
+.default_arrow,
+.overlay_arrow {
+  padding-inline: var(--zd_size5) 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: var(--zd_size6) var(--zd_size20) 0 ;
+  padding-block: var(--zd_size6) 0 ;
+  padding-inline: var(--zd_size20) ;
 }
+
 .svgWrapper {
-  padding-bottom: var(--zd_size25) ;
+  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;
 }
-[dir=ltr] .iconBox {
-  margin-right: var(--zd_size4) ;
-}
-[dir=rtl] .iconBox {
-  margin-left: var(--zd_size4) ;
+
+.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 ;
   border-bottom: 1px solid var(--zdt_statusdropdown_line_border);
-  margin: var(--zd_size9) 0 var(--zd_size10) ;
+}
+
+.suggestedStatusContainer {
+  margin-block-end: var(--zd_size6) ;
+  margin-inline: var(--zd_size1) ;
+}
+
+.dropBoxWithSuggestedStatus {
+  border-radius: 7px;
 }

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

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

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

@@ -56,6 +56,7 @@ export const propTypes = {
   positionsOffset: PropTypes.object,
   renderTargetElement: PropTypes.func,
   renderFooterElement: PropTypes.node,
+  renderSuggestedStatus: PropTypes.node,
   targetOffset: PropTypes.object,
   customClass: PropTypes.shape({
     dropBoxClass: PropTypes.string

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

@@ -19,24 +19,19 @@
 [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) ;
+.small {
+  padding-block: var(--zd_size7) ;
+  padding-inline:var(--zd_size3) var(--zd_size5) ;
 }
 .medium {
-  padding: var(--zd_size7) var(--zd_size20) ;
+  padding-block: var(--zd_size7) ;
+  padding-inline:var(--zd_size20) ;
 }
 .large {
+  padding-block: var(--zd_size10) ;
+  padding-inline:var(--zd_size25) var(--zd_size3) ;
   --statuslistitem_min_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 {
   line-height: 1.5385;
 }
@@ -88,11 +83,8 @@
 .tickIcon > i {
   display: block;
 }
-[dir=ltr] .active.withTick {
-  padding-right: var(--zd_size39) ;
-}
-[dir=rtl] .active.withTick {
-  padding-left: var(--zd_size39) ;
+.active.withTick {
+  padding-inline-end: var(--zd_size39) ;
 }
 .contentWrapper {
   composes: dflex flexrow alignVertical from '~@zohodesk/components/es/common/common.module.css';
@@ -129,4 +121,4 @@
 }
 .green.statusType::after {
   background-color: var(--zdt_statuslistitem_green_bg);
-}
+}

package/es/lookup/EmptyPage/LookupEmptyPage.module.css

@@ -3,12 +3,13 @@
 }
 
 .image {
-  margin: var(--zd_size20) auto ;
+  margin-block: var(--zd_size20) ;
+  margin-inline:auto ;
 }
 
 .contentDiv {
   font-size: var(--zd_font_size20) ;
   font-weight: var(--zd-fw-semibold);
   composes: ftsmooth from '~@zohodesk/components/es/common/common.module.css';
-  margin-top: var(--zd_size15) ;
-}
+  margin-block-start: var(--zd_size15) ;
+}

package/es/lookup/Lookup/Lookup.module.css

@@ -8,8 +8,8 @@
 }
 
 .container {
+  padding-block-end: var(--zd_size10) ;
   font-size: var(--zd_font_size16) ;
-  padding-bottom: var(--zd_size10) ;
 }
 
 .box {
@@ -46,4 +46,4 @@
 
 .fullSize {
   max-width: 90% ;
-}
+}

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

@@ -26,38 +26,25 @@
 .drpSearchBox {
   position: relative;
   height: var(--zd_size28) ;
+  padding-inline-start: var(--zd_size12) ;
   cursor: pointer;
 }
-[dir=ltr] .drpSearchBox {
-  padding-left: var(--zd_size12) ;
+.searchIcon {
+  padding-inline-end: var(--zd_size8) ;
 }
-[dir=rtl] .drpSearchBox {
-  padding-right: var(--zd_size12) ;
-}
-[dir=ltr] .searchIcon {
-  padding-right: var(--zd_size8) ;
-}
-[dir=rtl] .searchIcon {
-  padding-left: var(--zd_size8) ;
-}
-[dir=ltr] .searchIconBox {
-  padding-left: var(--zd_size12) ;
-}
-[dir=rtl] .searchIconBox {
-  padding-right: var(--zd_size12) ;
+.searchIconBox {
+  padding-inline-start: var(--zd_size12) ;
 }
 .active, .boxStyle.active, .lineActive.drpSearchBox::after {
   border-color: var(--zdt_lookupsearch_boxstyle_activer_border);
 }
-[dir=ltr] .iconArrow {
-  margin-left: var(--zd_size6) ;
-}
-[dir=rtl] .iconArrow {
-  margin-right: var(--zd_size6) ;
+.iconArrow {
+  margin-inline-start: var(--zd_size6) ;
 }
 .separator {
   width: var(--zd_size1) ;
   height: var(--zd_size16) ;
-  margin: 0 var(--zd_size12) ;
+  margin-inline: var(--zd_size12) ;
+  margin-block:0 ;
   background-color: var(--zdt_lookupsearch_boxstyle_border);
-}
+}

package/es/lookup/header/TicketHeader/TicketHeader.module.css

@@ -1,5 +1,6 @@
 .dropdown {
-  margin: 0 var(--zd_size20) ;
+  margin-inline: var(--zd_size20) ;
+  margin-block:0 ;
 }
 /* Responsive */
 [dir=ltr] .small .searchContainer {
@@ -20,4 +21,4 @@
 .extraSmall .container {
   flex-direction: column;
 }
-.menuWrapper{display: inline-block;}
+.menuWrapper{display: inline-block;}

package/es/lookup/header/ViewDropDown/ViewDropDown.module.css

@@ -12,10 +12,11 @@
 
 .emptyState {
   font-size: var(--zd_font_size14) ;
+  padding-block: var(--zd_size12) ;
+  padding-inline:var(--zd_size15) ;
   color: var(--zdt_viewdropdown_empty_text);
   font-weight: var(--zd-fw-semibold);
   composes: ftsmooth from '~@zohodesk/components/es/common/common.module.css';
-  padding: var(--zd_size12) var(--zd_size15) ;
 }
 
 .hide {
@@ -27,7 +28,8 @@
 }
 
 .listItemContainer {
-  padding: var(--zd_size10) 0 ;
+  padding-block: var(--zd_size10) ;
+  padding-inline:0 ;
 }
 
 /* Label Style */
@@ -40,22 +42,16 @@
 
 .labelText {
   font-size: var(--zd_font_size12) ;
+  margin-inline-end: var(--zd_size5) ;
   max-width: var(--zd_size180) ;
   composes: dotted from '~@zohodesk/components/es/common/common.module.css';
 }
 
-[dir=ltr] .labelText {
-  margin-right: var(--zd_size5) ;
-}
-
-[dir=rtl] .labelText {
-  margin-left: var(--zd_size5) ;
-}
-
 .labelCnt:hover .arrowIcon {
   color: var(--zdt_viewdropdown_hover_label_text);
 }
 
 .loader {
-  padding: var(--zd_size12) var(--zd_size15) ;
-}
+  padding-block: var(--zd_size12) ;
+  padding-inline:var(--zd_size15) ;
+}

package/es/lookup/header/lookupHeaderCommon.module.css

@@ -1,10 +1,8 @@
 .container {
   min-height: var(--zd_size51) ;
   position: relative;
-}[dir=ltr] .container {
-  padding: 0 var(--zd_size30) 0 var(--zd_size10) ;
-}[dir=rtl] .container {
-  padding: 0 var(--zd_size10) 0 var(--zd_size30) ;
+  padding-inline:var(--zd_size10) var(--zd_size30) ;
+  padding-block:0 ;
 }
 .default {
   background-color: var(--zdt_lookupheader_default_bg);
@@ -14,8 +12,10 @@
   background-color: var(--zdt_lookupheader_white_bg);
   border-bottom: solid 1px var(--zdt_lookupheader_white_border);
 }
-.searchContainer, .title {
-  margin: 0 var(--zd_size20) ;
+.searchContainer,
+.title {
+  margin-inline: var(--zd_size20) ;
+  margin-block:0 ;
 }
 [dir=ltr] .searchContainer {
   text-align: right;
@@ -30,7 +30,8 @@
   composes: middleY from '~@zohodesk/components/es/common/common.module.css'; */
 }
 .para {
+  margin-inline: var(--zd_size20) ;
+  margin-block:0 ;
   font-size: var(--zd_font_size12) ;
   color: var(--zdt_lookupheader_para_text);
-  margin: 0 var(--zd_size20) ;
 }

package/es/lookup/header/lookupHeaderCommonResponsive.module.css

@@ -1,15 +1,11 @@
 /* Responsive */
 .extraSmall {
+  padding-block: var(--zd_size12) ;
+  padding-inline:0 var(--zd_size45) ;
   justify-content: normal;
   flex-direction: column;
   align-items: flex-start;
 }
-[dir=ltr] .extraSmall {
-  padding: var(--zd_size12) var(--zd_size45) var(--zd_size12) 0 ;
-}
-[dir=rtl] .extraSmall {
-  padding: var(--zd_size12) 0 var(--zd_size12) var(--zd_size45) ;
-}
 
 [dir=ltr] .extraSmall .searchContainer {
   text-align: left;

package/es/setup/header/Button/HeaderButton.module.css

@@ -1,5 +1,3 @@
-[dir=ltr] .container {
-  margin-right: var(--zd_size15) ;
-}[dir=rtl] .container {
-  margin-left: var(--zd_size15) ;
+.container {
+  margin-inline-end: var(--zd_size15) ;
 }