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

package/README.md

@@ -2,6 +2,10 @@
 
 In this Library, we Provide Some Basic Components to Build Your Application
 
+# 1.9.12
+
+- DUMMY_ARRAY import path issue fixed in DotProvider DefaultProps
+
 # 1.9.11
 
 - padding, margin based css properties migrated to padding-inline,padding-block, margin-inline, margin-block 
@@ -24,6 +28,10 @@ In this Library, we Provide Some Basic Components to Build Your Application
 
 # 1.9.8
 
+- **AttachmentViewer** Provide a method in the AttachmentViewer component to handle updates to existing attachment list items. 
+
+# 1.9.8
+
 - **DotProvider** - Variables package handled and separated the component & variable import files
 - **Dependency**: @zohodesk/variables@1.3.0 , @zohodesk/components@1.6.6
 

package/assets/Appearance/dark/mode/Dot_DarkMode.module.css

@@ -259,8 +259,6 @@
 	
 	/* status dropdown */
 	--zdt_statusdropdown_line_border:var(--zdt_cta_grey_15_border);
-	--zdt_statusdropdown_wrapper_container_border:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(100.00% + var(--zdc_default_inverse_low)), calc( 0.2 + var(--zdc_alpha_low)));
-	--zdt_statusdropdown_wrapper_container_bg:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 100.00%,  0.03);
 	
 	/* status listitem */
 	--zdt_statuslistitem_list_text:hsla(210, calc(var(--zd-saturation, 1) * 7.41%), calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));

package/assets/Appearance/light/mode/Dot_LightMode.module.css

@@ -259,8 +259,6 @@
 	
 	/* status dropdown */
 	--zdt_statusdropdown_line_border:var(--zdt_cta_grey_15_border);
-	--zdt_statusdropdown_wrapper_container_border:hsla(218, calc(var(--zd-saturation, 1) * 42.22%), calc(91.18% + var(--zdc_default_inverse_low)), calc(1 + var(--zdc_alpha_low)));
-	--zdt_statusdropdown_wrapper_container_bg:hsla(216, calc(var(--zd-saturation, 1) * 38.46%), 97.45%, 1);
 	
 	/* status listitem */
 	--zdt_statuslistitem_list_text:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(0.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));

package/assets/Appearance/pureDark/mode/Dot_PureDarkMode.module.css

@@ -259,8 +259,6 @@
 	
 	/* status dropdown */
 	--zdt_statusdropdown_line_border:var(--zdt_cta_grey_15_border);
-	--zdt_statusdropdown_wrapper_container_border:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), calc(100.00% + var(--zdc_default_inverse_low)), calc( 0.2 + var(--zdc_alpha_low)));
-	--zdt_statusdropdown_wrapper_container_bg:hsla(0, calc(var(--zd-saturation, 1) * 0.00%), 100.00%,  0.03);
 	
 	/* status listitem */
 	--zdt_statuslistitem_list_text:hsla(210, calc(var(--zd-saturation, 1) * 7.41%), calc(89.41% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));

package/es/AttachmentViewer/AttachmentViewer.js

@@ -48,6 +48,47 @@ export default class AttachmentViewer extends Component {
     this.handleMenuValidation = this.handleMenuValidation.bind(this);
     this.getPreviewIconData = this.getPreviewIconData.bind(this);
     this.renderIframe = this.renderIframe.bind(this);
+    this.updateItem = this.updateItem.bind(this);
+  }
+
+  updateItem(idOrIndex, changes) {
+    if (!changes || typeof changes !== 'object') {
+      return false;
+    }
+
+    const {
+      data
+    } = this.state;
+    const targetIdx = typeof idOrIndex === 'number' ? idOrIndex : data.findIndex(item => item && item.id === idOrIndex);
+
+    if (targetIdx < 0 || targetIdx >= data.length) {
+      return false;
+    }
+
+    this.setState(prevState => {
+      const nextData = prevState.data.slice();
+      nextData[targetIdx] = { ...nextData[targetIdx],
+        ...changes
+      };
+      let nextDataList = prevState.dataList;
+
+      if (targetIdx < prevState.dataList.length) {
+        nextDataList = prevState.dataList.slice();
+        nextDataList[targetIdx] = { ...nextDataList[targetIdx],
+          ...changes
+        };
+      }
+
+      return {
+        data: nextData,
+        dataList: nextDataList
+      };
+    }, () => {
+      if (this.state.selectedIndex === targetIdx) {
+        this.handleMenuValidation();
+      }
+    });
+    return true;
   }
 
   isImageFileType(fileName) {
@@ -80,8 +121,9 @@ export default class AttachmentViewer extends Component {
       selectedIndex
     } = this.state;
     let indexChanged = previewObj.selectedIndex != prevProps.previewObj.selectedIndex;
+    const attachmentPreviewUrlChanged = previewObj.previewData[0]?.viewUrl !== prevState.data[0]?.viewUrl; // Triggers an update if the previewed attachment is edited by the Attachment Annotator.
 
-    if (previewObj.previewData.length != prevProps.previewObj.previewData.length || indexChanged) {
+    if (previewObj.previewData.length != prevProps.previewObj.previewData.length || indexChanged || attachmentPreviewUrlChanged) {
       let objChanged = previewObj.previewData.some((value, index) => {
         return shallowDiff(value, prevProps.previewObj[index]);
       });
@@ -100,7 +142,7 @@ export default class AttachmentViewer extends Component {
       }
     }
 
-    if (prevState.selectedIndex != selectedIndex) {
+    if (prevState.selectedIndex != selectedIndex || attachmentPreviewUrlChanged) {
       this.handleMenuValidation();
     }
   }
@@ -424,9 +466,10 @@ export default class AttachmentViewer extends Component {
         $ui_weight: "semibold"
       }, previewUnsupportedText), downloadUrl ? /*#__PURE__*/React.createElement(Link, {
         href: downloadUrl,
+        download: true,
+        downloadName: name,
         className: style.downloadLink,
-        hasReload: true,
-        download: true
+        hasReload: true
       }, /*#__PURE__*/React.createElement(Button, {
         palette: "primaryFilled",
         text: downloadText
@@ -449,7 +492,9 @@ export default class AttachmentViewer extends Component {
       i18nKeys,
       isActive,
       dataId,
-      customProps
+      customProps,
+      showCount,
+      renderCustomIcons
     } = this.props;
     const {
       avatarProps = {}
@@ -495,7 +540,7 @@ export default class AttachmentViewer extends Component {
         "data-title": selectedAttachment.name,
         dataId: "attachName",
         id: ariaId
-      }, selectedAttachment.name), /*#__PURE__*/React.createElement(Box, {
+      }, selectedAttachment.name), showCount && /*#__PURE__*/React.createElement(Box, {
         flexible: true,
         className: style.count,
         dataId: "attachCountContainer"
@@ -507,7 +552,11 @@ export default class AttachmentViewer extends Component {
         align: uptoTablet ? 'bottom' : 'center',
         wrap: "wrap",
         isCover: false
-      }, canZoom ? isZoomed ? /*#__PURE__*/React.createElement("div", {
+      }, typeof renderCustomIcons === 'function' && renderCustomIcons({
+        selectedAttachment,
+        selectedIndex,
+        totalLen
+      }), canZoom ? isZoomed ? /*#__PURE__*/React.createElement("div", {
         className: uptoTablet ? style.mobileMenu : style.menu,
         onClick: this.zoomOut.bind(this, selectedIndex),
         "data-id": "zoomOut",
@@ -555,6 +604,7 @@ export default class AttachmentViewer extends Component {
         className: uptoTablet ? style.mobileMenu : style.menu
       }, /*#__PURE__*/React.createElement(Link, {
         href: downloadUrl,
+        downloadName: selectedAttachment.name,
         target: "_parent",
         hasReload: true,
         download: true,

package/es/AttachmentViewer/AttachmentViewer.module.css

@@ -1,5 +1,5 @@
 .header {
-    height: var(--zd_size40) ;
+    height: var(--zd_size48) ;
     position: relative;
     z-index: 1;
     padding-block:0 ;

package/es/AttachmentViewer/props/defaultProps.js

@@ -12,5 +12,6 @@ export const AttachmentViewer_defaultProps = {
   isActive: false,
   dataId: 'AttachmentViewer',
   i18nKeys: {},
-  customProps: {}
+  customProps: {},
+  showCount: true
 };

package/es/AttachmentViewer/props/propTypes.js

@@ -44,5 +44,7 @@ export const AttachmentViewer_propTypes = {
   renderUnSupportedElement: PropTypes.func,
   customProps: PropTypes.shape({
     avatarProps: PropTypes.exact(AvatarProps)
-  })
+  }),
+  showCount: PropTypes.bool,
+  renderCustomIcons: PropTypes.func
 };

package/es/DotProvider/props/defaultProps.js

@@ -1,5 +1,5 @@
 import { THEME_APPEARANCE_LIGHT, THEME_COLOR_BLUE } from "../utils/constants";
-import { DUMMY_ARRAY } from '@zohodesk/utils';
+import { DUMMY_ARRAY } from '@zohodesk/utils/es/constantProps/constant';
 export const defaultProps = {
   themeAppearance: THEME_APPEARANCE_LIGHT,
   themeColor: THEME_COLOR_BLUE,

package/es/Link/Link.js

@@ -61,7 +61,8 @@ export default class Link extends React.Component {
       rel,
       dataId,
       customProps,
-      ariaLabel
+      ariaLabel,
+      downloadName
     } = this.props;
     let {
       isLink,
@@ -71,10 +72,10 @@ export default class Link extends React.Component {
     let option = {};
 
     if (download) {
-      option.download = true;
+      option.download = downloadName || true;
     }
 
-    let ignoreKeys = ['children', 'href', 'target', 'urlData', 'urlName', 'className', 'title', 'download', 'rel', 'dataId', 'hasReload', 'customProps', 'option', 'ariaLabel'];
+    let ignoreKeys = ['children', 'href', 'target', 'urlData', 'urlName', 'className', 'title', 'download', 'downloadName', 'rel', 'dataId', 'hasReload', 'customProps', 'option', 'ariaLabel'];
     let others = Object.keys(this.props).filter(key => ignoreKeys.indexOf(key) == -1).reduce((res, key) => {
       res[key] = this.props[key];
       return res;

package/es/Link/props/propTypes.js

@@ -13,6 +13,7 @@ export const propTypes = {
   customProps: PropTypes.object,
   onClick: PropTypes.func,
   download: PropTypes.bool,
+  downloadName: PropTypes.string,
   ariaLabel: PropTypes.string,
   key: PropTypes.string
 };

package/es/common/dot_boxShadow.module.css

@@ -40,6 +40,4 @@
     --zd_bs_onboarding_close_icon: var(--zd_bs_contrast_outline, 0px 2px 15px var(--zd-shadow-saturation, rgba(0, 0, 0, 0.09)));
     --zd_bs_onboarding_gradient: var(--zd_bs_contrast_outline, 0px 20px 30px 0px var(--zdt_onboarding_bg_box_shadow));
     --zd_bs_onboarding_primary_button: var(--zd_bs_contrast_outline, 0px 4px 20px 0px var(--zdt_onboarding_primary_button_shadow));
-/* status dropdown */
-    --zd_bs_statusdropdown_wrapper_container: var(--zd_bs_contrast_outline, 3px 3px 26px 0 var(--zdt_texteditor_menu_after_box_shadow));
 }

package/es/form/fields/SelectField/SelectField.js

@@ -97,8 +97,7 @@ export default class SelectField extends PureComponent {
       onFocus,
       iconOnHover,
       customProps,
-      renderLabelProps,
-      renderSuggestedStatus
+      renderLabelProps
     } = this.props;
     const {
       LabelProps = {},
@@ -168,8 +167,7 @@ export default class SelectField extends PureComponent {
       iconOnHover: iconOnHover,
       title: title
     }, SelectProps, {
-      ariaLabelledby: uniqueId,
-      renderSuggestedStatus: renderSuggestedStatus
+      ariaLabelledby: uniqueId
     }), children ? children : null)), validationMessage && /*#__PURE__*/React.createElement(ValidationMessage, _extends({
       text: validationMessage,
       palette: validationPalette,

package/es/form/fields/SelectField/props/propTypes.js

@@ -45,7 +45,6 @@ export const propTypes = {
     ValidationMessageProps1: PropTypes.object,
     ValidationMessageProps2: PropTypes.object
   }),
-  renderSuggestedStatus: PropTypes.node,
   htmlId: PropTypes.string,
   ...FieldCommonPropTypes
 };

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,
-      renderSuggestedStatus
+      customClass
     } = this.props;
     const {
-      dropBoxClass = '',
-      suggestedStatusWrapper = ''
+      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} ${renderSuggestedStatus ? style.dropBoxWithSuggestedStatus : ''}`
+          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 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;
-      })());
+      }, /*#__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_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-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);
 }
-
-.suggestedStatusContainer {
-  margin-block-end: var(--zd_size6) ;
-  margin-inline: var(--zd_size1) ;
-}
-
-.dropBoxWithSuggestedStatus {
-  border-radius: 7px;
-}