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

package/lib/DotProvider/libraryChunks/themes/component/yellow/Yellow_Dark_Component.js

@@ -1,3 +1,5 @@
 "use strict";
 
-require("@zohodesk/components/assets/Appearance/dark/themes/yellow/yellow_ComponentTheme_DarkTheme.module.css");
+require("@zohodesk/components/assets/Appearance/dark/themes/yellow/yellow_ComponentTheme_DarkTheme.module.css");
+
+require("@zohodesk/components/assets/Appearance/dark/themes/yellow/yellow_componentsCTA_DarkModifyCategory.module.css");

package/lib/DotProvider/libraryChunks/themes/component/yellow/Yellow_Light_Component.js

@@ -1,3 +1,5 @@
 "use strict";
 
-require("@zohodesk/components/assets/Appearance/light/themes/yellow/yellow_ComponentTheme_LightTheme.module.css");
+require("@zohodesk/components/assets/Appearance/light/themes/yellow/yellow_ComponentTheme_LightTheme.module.css");
+
+require("@zohodesk/components/assets/Appearance/light/themes/yellow/yellow_componentsCTA_LightModifyCategory.module.css");

package/lib/DotProvider/libraryChunks/themes/component/yellow/Yellow_PureDark_Component.js

@@ -1,3 +1,5 @@
 "use strict";
 
-require("@zohodesk/components/assets/Appearance/pureDark/themes/yellow/yellow_ComponentTheme_PureDarkTheme.module.css");
+require("@zohodesk/components/assets/Appearance/pureDark/themes/yellow/yellow_ComponentTheme_PureDarkTheme.module.css");
+
+require("@zohodesk/components/assets/Appearance/pureDark/themes/yellow/yellow_componentsCTA_PureDarkModifyCategory.module.css");

package/lib/DotProvider/libraryChunks/themes/dot/blue/Blue_Dark_Dot.js

@@ -1,3 +1,5 @@
 "use strict";
 
+require("./../../../../../../assets/Appearance/dark/themes/blue/blue_DotCTA_DarkModifyCategory.module.css");
+
 require("./../../../../../../assets/Appearance/dark/themes/blue/blue_DotTheme_DarkTheme.module.css");

package/lib/DotProvider/libraryChunks/themes/dot/blue/Blue_Light_Dot.js

@@ -1,3 +1,5 @@
 "use strict";
 
+require("./../../../../../../assets/Appearance/light/themes/blue/blue_DotCTA_LightModifyCategory.module.css");
+
 require("./../../../../../../assets/Appearance/light/themes/blue/blue_DotTheme_LightTheme.module.css");

package/lib/DotProvider/libraryChunks/themes/dot/blue/Blue_PureDark_Dot.js

@@ -1,3 +1,5 @@
 "use strict";
 
+require("./../../../../../../assets/Appearance/pureDark/themes/blue/blue_DotCTA_PureDarkModifyCategory.module.css");
+
 require("./../../../../../../assets/Appearance/pureDark/themes/blue/blue_DotTheme_PureDarkTheme.module.css");

package/lib/DotProvider/libraryChunks/themes/dot/green/Green_Dark_Dot.js

@@ -1,3 +1,5 @@
 "use strict";
 
+require("./../../../../../../assets/Appearance/dark/themes/green/green_DotCTA_DarkModifyCategory.module.css");
+
 require("./../../../../../../assets/Appearance/dark/themes/green/green_DotTheme_DarkTheme.module.css");

package/lib/DotProvider/libraryChunks/themes/dot/green/Green_Light_Dot.js

@@ -1,3 +1,5 @@
 "use strict";
 
+require("./../../../../../../assets/Appearance/light/themes/green/green_DotCTA_LightModifyCategory.module.css");
+
 require("./../../../../../../assets/Appearance/light/themes/green/green_DotTheme_LightTheme.module.css");

package/lib/DotProvider/libraryChunks/themes/dot/green/Green_PureDark_Dot.js

@@ -1,3 +1,5 @@
 "use strict";
 
+require("./../../../../../../assets/Appearance/pureDark/themes/green/green_DotCTA_PureDarkModifyCategory.module.css");
+
 require("./../../../../../../assets/Appearance/pureDark/themes/green/green_DotTheme_PureDarkTheme.module.css");

package/lib/DotProvider/libraryChunks/themes/dot/orange/Orange_Dark_Dot.js

@@ -1,3 +1,5 @@
 "use strict";
 
+require("./../../../../../../assets/Appearance/dark/themes/orange/orange_DotCTA_DarkModifyCategory.module.css");
+
 require("./../../../../../../assets/Appearance/dark/themes/orange/orange_DotTheme_DarkTheme.module.css");

package/lib/DotProvider/libraryChunks/themes/dot/orange/Orange_Light_Dot.js

@@ -1,3 +1,5 @@
 "use strict";
 
+require("./../../../../../../assets/Appearance/light/themes/orange/orange_DotCTA_LightModifyCategory.module.css");
+
 require("./../../../../../../assets/Appearance/light/themes/orange/orange_DotTheme_LightTheme.module.css");

package/lib/DotProvider/libraryChunks/themes/dot/orange/Orange_PureDark_Dot.js

@@ -1,3 +1,5 @@
 "use strict";
 
+require("./../../../../../../assets/Appearance/pureDark/themes/orange/orange_DotCTA_PureDarkModifyCategory.module.css");
+
 require("./../../../../../../assets/Appearance/pureDark/themes/orange/orange_DotTheme_PureDarkTheme.module.css");

package/lib/DotProvider/libraryChunks/themes/dot/red/Red_Dark_Dot.js

@@ -1,3 +1,5 @@
 "use strict";
 
+require("./../../../../../../assets/Appearance/dark/themes/red/red_DotCTA_DarkModifyCategory.module.css");
+
 require("./../../../../../../assets/Appearance/dark/themes/red/red_DotTheme_DarkTheme.module.css");

package/lib/DotProvider/libraryChunks/themes/dot/red/Red_Light_Dot.js

@@ -1,3 +1,5 @@
 "use strict";
 
+require("./../../../../../../assets/Appearance/light/themes/red/red_DotCTA_LightModifyCategory.module.css");
+
 require("./../../../../../../assets/Appearance/light/themes/red/red_DotTheme_LightTheme.module.css");

package/lib/DotProvider/libraryChunks/themes/dot/red/Red_PureDark_Dot.js

@@ -1,3 +1,5 @@
 "use strict";
 
+require("./../../../../../../assets/Appearance/pureDark/themes/red/red_DotCTA_PureDarkModifyCategory.module.css");
+
 require("./../../../../../../assets/Appearance/pureDark/themes/red/red_DotTheme_PureDarkTheme.module.css");

package/lib/DotProvider/libraryChunks/themes/dot/yellow/Yellow_Dark_Dot.js

@@ -1,3 +1,5 @@
 "use strict";
 
+require("./../../../../../../assets/Appearance/dark/themes/yellow/yellow_DotCTA_DarkModifyCategory.module.css");
+
 require("./../../../../../../assets/Appearance/dark/themes/yellow/yellow_DotTheme_DarkTheme.module.css");

package/lib/DotProvider/libraryChunks/themes/dot/yellow/Yellow_Light_Dot.js

@@ -1,3 +1,5 @@
 "use strict";
 
+require("./../../../../../../assets/Appearance/light/themes/yellow/yellow_DotCTA_LightModifyCategory.module.css");
+
 require("./../../../../../../assets/Appearance/light/themes/yellow/yellow_DotTheme_LightTheme.module.css");

package/lib/DotProvider/libraryChunks/themes/dot/yellow/Yellow_PureDark_Dot.js

@@ -1,3 +1,5 @@
 "use strict";
 
+require("./../../../../../../assets/Appearance/pureDark/themes/yellow/yellow_DotCTA_PureDarkModifyCategory.module.css");
+
 require("./../../../../../../assets/Appearance/pureDark/themes/yellow/yellow_DotTheme_PureDarkTheme.module.css");

package/lib/DotProvider/props/defaultProps.js

@@ -7,7 +7,7 @@ exports.defaultProps = void 0;
 
 var _constants = require("../utils/constants");
 
-var _utils = require("@zohodesk/utils");
+var _constant = require("@zohodesk/utils/es/constantProps/constant");
 
 var defaultProps = {
   themeAppearance: _constants.THEME_APPEARANCE_LIGHT,
@@ -16,7 +16,7 @@ var defaultProps = {
   baseFontUnit: '16px',
   zoomUnitVariable: '--zd_baseUnit',
   fontUnitVariable: '--zd_baseFontUnit',
-  excludeFeatures: _utils.DUMMY_ARRAY,
+  excludeFeatures: _constant.DUMMY_ARRAY,
   themeAppearanceAttr: 'data-mode',
   themeColorAttr: 'data-theme'
 };

package/lib/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/lib/form/fields/SelectField/SelectField.js

@@ -145,8 +145,7 @@ var SelectField = /*#__PURE__*/function (_PureComponent) {
           onFocus = _this$props3.onFocus,
           iconOnHover = _this$props3.iconOnHover,
           customProps = _this$props3.customProps,
-          renderLabelProps = _this$props3.renderLabelProps,
-          renderSuggestedStatus = _this$props3.renderSuggestedStatus;
+          renderLabelProps = _this$props3.renderLabelProps;
       var _customProps$LabelPro = customProps.LabelProps,
           LabelProps = _customProps$LabelPro === void 0 ? {} : _customProps$LabelPro,
           _customProps$SelectPr = customProps.SelectProps,
@@ -217,8 +216,7 @@ var SelectField = /*#__PURE__*/function (_PureComponent) {
         iconOnHover: iconOnHover,
         title: title
       }, SelectProps, {
-        ariaLabelledby: uniqueId,
-        renderSuggestedStatus: renderSuggestedStatus
+        ariaLabelledby: uniqueId
       }), children ? children : null)), validationMessage && /*#__PURE__*/_react["default"].createElement(_ValidationMessage["default"], _extends({
         text: validationMessage,
         palette: validationPalette,

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

@@ -62,7 +62,6 @@ var propTypes = _objectSpread({
     ValidationMessageProps1: _propTypes["default"].object,
     ValidationMessageProps2: _propTypes["default"].object
   }),
-  renderSuggestedStatus: _propTypes["default"].node,
   htmlId: _propTypes["default"].string
 }, _FieldCommonPropTypes.FieldCommonPropTypes);
 

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

@@ -37,8 +37,6 @@ var _ResponsiveDropBox = _interopRequireDefault(require("@zohodesk/components/es
 
 var _CustomResponsive = require("@zohodesk/components/es/Responsive/CustomResponsive");
 
-var _Flex = _interopRequireDefault(require("@zohodesk/layout/es/Flex/Flex"));
-
 var _IdProvider = require("@zohodesk/components/es/Provider/IdProvider");
 
 var _semanticButtonModule = _interopRequireDefault(require("@zohodesk/components/es/semantic/Button/semanticButton.module.css"));
@@ -89,11 +87,6 @@ var StatusDropdown = /*#__PURE__*/function (_React$Component) {
     _this.searchList = _this.searchList.bind(_assertThisInitialized(_this));
     _this.handleScroll = _this.handleScroll.bind(_assertThisInitialized(_this));
     _this.emptySearchSVG = _this.emptySearchSVG.bind(_assertThisInitialized(_this));
-    _this.getSearchA11y = _this.getSearchA11y.bind(_assertThisInitialized(_this));
-    _this.getHeadingA11y = _this.getHeadingA11y.bind(_assertThisInitialized(_this));
-    _this.getListItemA11y = _this.getListItemA11y.bind(_assertThisInitialized(_this));
-    _this.getTextBoxIconCustomProps = _this.getTextBoxIconCustomProps.bind(_assertThisInitialized(_this));
-    _this.handleListItemClick = _this.handleListItemClick.bind(_assertThisInitialized(_this));
     _this.getAriaId = (0, _IdProvider.getUniqueId)(_assertThisInitialized(_this));
     return _this;
   }
@@ -194,55 +187,10 @@ var StatusDropdown = /*#__PURE__*/function (_React$Component) {
         }])
       };
     }
-  }, {
-    key: "getSearchA11y",
-    value: function getSearchA11y() {
-      return {
-        ariaHaspopup: this.props.isSearch ? 'listbox' : 'menu',
-        ariaExpanded: this.props.isPopupReady,
-        role: 'combobox',
-        ariaActivedescendant: this.props.isPopupReady ? this.props.value : '',
-        ariaOwns: this.getAriaId()
-      };
-    }
-  }, {
-    key: "getHeadingA11y",
-    value: function getHeadingA11y() {
-      return {
-        role: 'heading'
-      };
-    }
-  }, {
-    key: "getListItemA11y",
-    value: function getListItemA11y(isActive, listItemText) {
-      return {
-        role: this.props.isSearch ? 'option' : 'menuitem',
-        ariaSelected: isActive,
-        ariaLabel: listItemText
-      };
-    }
-  }, {
-    key: "getTextBoxIconCustomProps",
-    value: function getTextBoxIconCustomProps() {
-      return {
-        TextBoxProps: {
-          'data-a11y-autofocus': true
-        }
-      };
-    }
-  }, {
-    key: "handleListItemClick",
-    value: function handleListItemClick(item) {
-      var _this2 = this;
-
-      return function (e) {
-        _this2.onSelect(item, e);
-      };
-    }
   }, {
     key: "render",
     value: function render() {
-      var _this3 = this;
+      var _this2 = this;
 
       var options = this.state.options;
       var _this$props4 = this.props,
@@ -300,12 +248,9 @@ var StatusDropdown = /*#__PURE__*/function (_React$Component) {
           renderFooterElement = _this$props4.renderFooterElement,
           _this$props4$a11y = _this$props4.a11y,
           a11y = _this$props4$a11y === void 0 ? {} : _this$props4$a11y,
-          customClass = _this$props4.customClass,
-          renderSuggestedStatus = _this$props4.renderSuggestedStatus;
+          customClass = _this$props4.customClass;
       var _customClass$dropBoxC = customClass.dropBoxClass,
-          dropBoxClass = _customClass$dropBoxC === void 0 ? '' : _customClass$dropBoxC,
-          _customClass$suggeste = customClass.suggestedStatusWrapper,
-          suggestedStatusWrapper = _customClass$suggeste === void 0 ? '' : _customClass$suggeste;
+          dropBoxClass = _customClass$dropBoxC === void 0 ? '' : _customClass$dropBoxC;
       var _a11y$tabIndex = a11y.tabIndex,
           tabIndex = _a11y$tabIndex === void 0 ? 0 : _a11y$tabIndex,
           ariaLabelledby = a11y.ariaLabelledby,
@@ -314,9 +259,6 @@ var StatusDropdown = /*#__PURE__*/function (_React$Component) {
       var searchString = this.state.searchString;
       var containerClass = "".concat(className ? className : '', " ").concat(isPopupReady ? activeStyle ? activeStyle : '' : showIconOnHover ? _StatusDropdownModule["default"].hoverIcon : '', " ").concat(isDisabled ? _commonModule["default"].disabled : isReadOnly ? _StatusDropdownModule["default"].readOnly : !isEditable ? _StatusDropdownModule["default"].cursorDefault : !showOnHover ? "".concat(_StatusDropdownModule["default"].cursor, " ").concat(hoverStyle ? hoverStyle : '') : "".concat(hoverStyle ? hoverStyle : '', " ").concat(_StatusDropdownModule["default"].cursorDefault));
       var ariaTitleId = this.getAriaId();
-      var textBoxA11y = this.getSearchA11y();
-      var headingA11y = this.getHeadingA11y();
-      var textBoxIconCustomProps = this.getTextBoxIconCustomProps();
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: _StatusDropdownModule["default"].posRel,
         onMouseEnter: showOnHover && !isDisabled && !isReadOnly && isEditable ? this.handleTogglePopup : undefined,
@@ -371,13 +313,13 @@ var StatusDropdown = /*#__PURE__*/function (_React$Component) {
           isAnimate: true,
           getRef: getContainerRef,
           customClass: {
-            customDropBoxWrap: "".concat(_StatusDropdownModule["default"].dropBoxContainer, " "),
-            customDropBox: "".concat(dropBoxClass, " ").concat(renderSuggestedStatus ? _StatusDropdownModule["default"].dropBoxWithSuggestedStatus : '')
+            customDropBoxWrap: _StatusDropdownModule["default"].dropBoxContainer,
+            customDropBox: dropBoxClass
           },
           needResponsive: needResponsive,
           isResponsivePadding: true,
           needFocusScope: true,
-          onClose: _this3.handleTogglePopup,
+          onClose: _this2.handleTogglePopup,
           dataId: "".concat(dataId, "_dropbox"),
           isAbsolutePositioningNeeded: isAbsolutePositioningNeeded,
           isRestrictScroll: isRestrictScroll,
@@ -390,75 +332,81 @@ var StatusDropdown = /*#__PURE__*/function (_React$Component) {
               isFetchingOptions: isFetchingOptions
             }
           }
-        }, function () {
-          var dropdownContent = /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, isSearch ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-            className: _StatusDropdownModule["default"].search
-          }, /*#__PURE__*/_react["default"].createElement(_TextBoxIcon["default"], {
-            placeHolder: placeHolderText,
-            onChange: _this3.handleChange,
-            value: searchString,
-            onClear: _this3.onSearchClear,
-            size: searchBoxSize,
-            customProps: textBoxIconCustomProps,
-            a11y: textBoxA11y,
-            dataId: "".concat(dataId, "_search")
-          })) : null, title && options.length != 0 && /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-            className: _StatusDropdownModule["default"].title
-          }, /*#__PURE__*/_react["default"].createElement(_DropDownHeading["default"], {
-            htmlId: ariaTitleId,
-            text: title,
-            a11y: headingA11y
-          })), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-            scroll: "vertical",
-            flexible: true,
-            shrink: true,
-            dataId: "".concat(dataId, "_list"),
-            preventParentScroll: "vertical",
-            className: "".concat(tabletMode ? _StatusDropdownModule["default"].responsivemaxHgt : _StatusDropdownModule["default"].maxHgt),
-            onScroll: _this3.handleScroll,
-            role: isSearch ? 'listbox' : 'menu',
-            tabindex: "-1",
-            isScrollAttribute: true
-          }, options.length != 0 && isDataLoaded ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, options.map(function (item, i) {
-            var listItemText = item[keyName];
-            var isActive = value === listItemText;
-            return /*#__PURE__*/_react["default"].createElement(_StatusListItem["default"], {
-              key: item[idName] || i,
-              dataId: "dataid_".concat(i),
-              value: listItemText,
-              id: item[idName],
-              active: isActive,
-              onClick: _this3.handleListItemClick(item),
-              index: i,
-              needTick: needTick,
-              needBorder: false,
-              bulletColor: item[statusColor],
-              title: listItemText,
-              needMultiLineText: needMultiLineText,
-              autoHover: true,
-              a11y: _this3.getListItemA11y(isActive, listItemText)
-            });
-          }), isFetchingOptions && /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
-            isCover: false,
-            align: "both"
-          }, /*#__PURE__*/_react["default"].createElement(_Loader["default"], null))) : isDataLoaded ? /*#__PURE__*/_react["default"].createElement(_CommonEmptyState["default"], {
-            className: _StatusDropdownModule["default"].svgWrapper,
-            title: searchErrorText || 'No results',
-            description: searchEmptyHint,
-            size: "small",
-            getEmptyState: _this3.emptySearchSVG
-          }) : /*#__PURE__*/_react["default"].createElement("div", {
-            className: _StatusDropdownModule["default"].loader
-          }, /*#__PURE__*/_react["default"].createElement(_Loader["default"], null))), renderFooterElement ? renderFooterElement : null);
-
-          return renderSuggestedStatus ? /*#__PURE__*/_react["default"].createElement("div", {
-            className: _StatusDropdownModule["default"].dropBoxListContainer
-          }, /*#__PURE__*/_react["default"].createElement(_Flex["default"], {
-            $ui_className: "".concat(suggestedStatusWrapper, " ").concat(_StatusDropdownModule["default"].suggestedStatusContainer)
-          }, renderSuggestedStatus), /*#__PURE__*/_react["default"].createElement("div", {
-            className: _StatusDropdownModule["default"].dropdownOptions
-          }, dropdownContent)) : dropdownContent;
-        }());
+        }, /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, isSearch ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+          className: _StatusDropdownModule["default"].search
+        }, /*#__PURE__*/_react["default"].createElement(_TextBoxIcon["default"], {
+          placeHolder: placeHolderText,
+          onChange: _this2.handleChange,
+          value: searchString,
+          onClear: _this2.onSearchClear,
+          size: searchBoxSize,
+          customProps: {
+            TextBoxProps: {
+              'data-a11y-autofocus': true
+            }
+          },
+          a11y: {
+            ariaHaspopup: isSearch ? 'listbox' : 'menu',
+            ariaExpanded: isPopupReady,
+            role: 'combobox',
+            ariaActivedescendant: isPopupReady ? value : '',
+            ariaOwns: ariaTitleId
+          },
+          dataId: "".concat(dataId, "_search")
+        })) : null, title && options.length != 0 && /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+          className: _StatusDropdownModule["default"].title
+        }, /*#__PURE__*/_react["default"].createElement(_DropDownHeading["default"], {
+          htmlId: ariaTitleId,
+          text: title,
+          a11y: {
+            role: 'heading'
+          }
+        })), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+          scroll: "vertical",
+          flexible: true,
+          shrink: true,
+          dataId: "".concat(dataId, "_list"),
+          preventParentScroll: "vertical",
+          className: "".concat(tabletMode ? _StatusDropdownModule["default"].responsivemaxHgt : _StatusDropdownModule["default"].maxHgt),
+          onScroll: _this2.handleScroll,
+          role: isSearch ? 'listbox' : 'menu',
+          tabindex: "-1",
+          isScrollAttribute: true
+        }, options.length != 0 && isDataLoaded ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, options.map(function (item, i) {
+          var listItemText = item[keyName];
+          var isActive = value === listItemText;
+          return /*#__PURE__*/_react["default"].createElement(_StatusListItem["default"], {
+            key: i,
+            dataId: "dataid_".concat(i),
+            value: listItemText,
+            id: item[idName],
+            active: isActive,
+            onClick: _this2.onSelect.bind(_this2, 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["default"].createElement(_Layout.Container, {
+          isCover: false,
+          align: "both"
+        }, /*#__PURE__*/_react["default"].createElement(_Loader["default"], null))) : isDataLoaded ? /*#__PURE__*/_react["default"].createElement(_CommonEmptyState["default"], {
+          className: _StatusDropdownModule["default"].svgWrapper,
+          title: searchErrorText || 'No results',
+          description: searchEmptyHint,
+          size: "small",
+          getEmptyState: _this2.emptySearchSVG
+        }) : /*#__PURE__*/_react["default"].createElement("div", {
+          className: _StatusDropdownModule["default"].loader
+        }, /*#__PURE__*/_react["default"].createElement(_Loader["default"], null))), renderFooterElement ? renderFooterElement : null));
       }) : null);
     }
   }]);

package/lib/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;
-}

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

@@ -25,7 +25,6 @@ var defaultProps = {
   isFetchingOptions: false,
   isAbsolutePositioningNeeded: true,
   isRestrictScroll: false,
-  customClass: {},
-  renderSuggestedStatus: null
+  customClass: {}
 };
 exports.defaultProps = defaultProps;

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

@@ -30,7 +30,7 @@ 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, "renderTargetElement", _propTypes2["default"].func), _defineProperty(_propTypes, "renderFooterElement", _propTypes2["default"].node), _defineProperty(_propTypes, "renderSuggestedStatus", _propTypes2["default"].node), _defineProperty(_propTypes, "targetOffset", _propTypes2["default"].object), _defineProperty(_propTypes, "customClass", _propTypes2["default"].shape({
+}, _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), _defineProperty(_propTypes, "customClass", _propTypes2["default"].shape({
   dropBoxClass: _propTypes2["default"].string
 })), _propTypes);
 exports.propTypes = propTypes;