@zohodesk/dot 1.7.16 → 1.7.18

package/lib/avatar/AvatarIcon/AvatarIcon.module.css

@@ -57,5 +57,5 @@
 }
 
 .avatar_align_center {
-  composes: tcenter from '~@zohodesk/components/lib/common/common.module.css';
+  composes: tcenter from '~@zohodesk/components/es/common/common.module.css';
 }

package/lib/avatar/AvatarStatus/AvatarStatus.module.css

@@ -1,11 +1,11 @@
 .container {
   position: relative;
-  composes: dInflex from '~@zohodesk/components/lib/common/common.module.css';
+  composes: dInflex from '~@zohodesk/components/es/common/common.module.css';
   vertical-align: middle;
 }
 .state {
   position: absolute;
-  composes: rounded from '~@zohodesk/components/lib/common/common.module.css';
+  composes: rounded from '~@zohodesk/components/es/common/common.module.css';
   display: inline-block;
 }
 .circle.state {

package/lib/avatar/AvatarThread/AvatarThread.module.css

@@ -1,12 +1,12 @@
 .container {
   position: relative;
-  composes: dInflex from '~@zohodesk/components/lib/common/common.module.css';
+  composes: dInflex from '~@zohodesk/components/es/common/common.module.css';
   vertical-align: middle;
   border-radius: 50%;
 }
 
 .thread {
-  composes: rounded from '~@zohodesk/components/lib/common/common.module.css';
+  composes: rounded from '~@zohodesk/components/es/common/common.module.css';
   position: absolute;
 }
 .pointer {

package/lib/avatar/AvatarUser/AvatarUser.module.css

@@ -1,6 +1,6 @@
 .container {
   position: relative;
-  composes: dInflex from '~@zohodesk/components/lib/common/common.module.css';
+  composes: dInflex from '~@zohodesk/components/es/common/common.module.css';
   vertical-align: middle;
 }
 .paid,
@@ -16,7 +16,7 @@
   line-height: 0;
 }
 .paid {
-  composes: middle from '~@zohodesk/components/lib/common/common.module.css';
+  composes: middle from '~@zohodesk/components/es/common/common.module.css';
 }
 [dir=ltr] .paid {
   left: 50% ;
@@ -37,7 +37,7 @@
   height: 100% ;
   opacity: 0;
   transition: all var(--zd_transition3);
-  composes: dflex alignHorizontal alignVertical from '~@zohodesk/components/lib/common/common.module.css';
+  composes: dflex alignHorizontal alignVertical from '~@zohodesk/components/es/common/common.module.css';
   color: var(--zdt_avataruser_delete_text);
   cursor: pointer;
   border-radius: 50%;

package/lib/avatar/AvatarWithTeam/AvatarWithTeam.module.css

@@ -1,5 +1,5 @@
 .container {
-  composes: dInflex from '~@zohodesk/components/lib/common/common.module.css';
+  composes: dInflex from '~@zohodesk/components/es/common/common.module.css';
   vertical-align: middle;
   position: relative;
 }

package/lib/deprecated/SelectDropdown/SelectDropdown.module.css

@@ -2,7 +2,7 @@
 .container {
   position: relative;
   line-height: var(--zd_size18);
-  composes: dInflex alignVertical from '~@zohodesk/components/lib/common/common.module.css';
+  composes: dInflex alignVertical from '~@zohodesk/components/es/common/common.module.css';
   padding: var(--zd_size3) var(--zd_size15) ;
   cursor: pointer;
 }
@@ -18,7 +18,7 @@
 .departName {
   font-size: var(--zd_font_size13) ;
   color: var(--zdt_selectdropdown_departname_text);
-  composes: flexgrow dotted offSelection from '~@zohodesk/components/lib/common/common.module.css';
+  composes: flexgrow dotted offSelection from '~@zohodesk/components/es/common/common.module.css';
 }
 .departIcon {
   color: var(--zdt_selectdropdown_departicon);

package/lib/dropdown/ToggleDropDown/ToggleDropDown.js

@@ -19,7 +19,7 @@ var _Popup = _interopRequireDefault(require("@zohodesk/components/lib/Popup/Popu
 
 var _Layout = require("@zohodesk/components/lib/Layout");
 
-var _ListItem = _interopRequireDefault(require("@zohodesk/components/lib/ListItem/ListItem"));
+var _ListItem = _interopRequireDefault(require("@zohodesk/components/es/ListItem/ListItem"));
 
 var _ListItemWithIcon = _interopRequireDefault(require("@zohodesk/components/lib/ListItem/ListItemWithIcon"));
 
@@ -281,8 +281,10 @@ var ToggleDropDown = /*#__PURE__*/function (_Component) {
           keyName = _this$props6.keyName,
           isGroupDropDown = _this$props6.isGroupDropDown,
           groupOptionsKey = _this$props6.groupOptionsKey,
-          groupNameKey = _this$props6.groupNameKey;
+          groupNameKey = _this$props6.groupNameKey,
+          searchFields = _this$props6.searchFields;
       searchValue = searchValue.trim().toLowerCase();
+      searchFields.push(keyName !== 'value' ? keyName : 'value');
       var result = [];
 
       if (isGroupDropDown) {
@@ -292,8 +294,15 @@ var ToggleDropDown = /*#__PURE__*/function (_Component) {
           var name = group[groupNameKey];
           var groupOptions = group[groupOptionsKey];
           var datas = groupOptions.filter(function (list) {
-            var value = list[keyName];
-            return value.toLowerCase().includes(searchValue);
+            return searchFields.some(function (key) {
+              var val = list[key];
+
+              if (val === null || val === undefined) {
+                return false;
+              } else {
+                return val.toLowerCase().includes(searchValue);
+              }
+            });
           });
 
           if (datas.length) {
@@ -309,7 +318,15 @@ var ToggleDropDown = /*#__PURE__*/function (_Component) {
             return true;
           }
 
-          return item[keyName].toLowerCase().includes(searchValue);
+          return searchFields.some(function (key) {
+            var val = item[key];
+
+            if (val === null || val === undefined) {
+              return false;
+            } else {
+              return val.toLowerCase().includes(searchValue);
+            }
+          });
         });
 
         if (filteredOptions.length) {
@@ -783,7 +800,8 @@ var ToggleDropDown = /*#__PURE__*/function (_Component) {
                 _item$disableTitle = item.disableTitle,
                 disableTitle = _item$disableTitle === void 0 ? '' : _item$disableTitle,
                 _item$isDisabled = item.isDisabled,
-                isDisabled = _item$isDisabled === void 0 ? false : _item$isDisabled;
+                isDisabled = _item$isDisabled === void 0 ? false : _item$isDisabled,
+                secondaryValue = item.secondaryValue;
             listIndex += 1;
             return iconName ? /*#__PURE__*/_react["default"].createElement(_ListItemWithIcon["default"], _extends({
               key: listIndex,
@@ -811,7 +829,8 @@ var ToggleDropDown = /*#__PURE__*/function (_Component) {
                 role: isSearch ? 'option' : 'menuitem',
                 ariaSelected: selectedId === item[idName],
                 ariaLabel: item[keyName]
-              }
+              },
+              secondaryValue: secondaryValue
             }, ListItemWithIconProps)) : /*#__PURE__*/_react["default"].createElement(_ListItem["default"], _extends({
               key: listIndex,
               dataId: item[keyName],
@@ -835,7 +854,8 @@ var ToggleDropDown = /*#__PURE__*/function (_Component) {
                 role: isSearch ? 'option' : 'menuitem',
                 ariaSelected: selectedId === item[idName],
                 ariaLabel: item[keyName]
-              }
+              },
+              secondaryValue: secondaryValue
             }, ListItemProps));
           }));
         }), isFetchingOptions && /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
@@ -850,7 +870,8 @@ var ToggleDropDown = /*#__PURE__*/function (_Component) {
               _item$isDisabled2 = item.isDisabled,
               isDisabled = _item$isDisabled2 === void 0 ? false : _item$isDisabled2,
               _item$disableTitle2 = item.disableTitle,
-              disableTitle = _item$disableTitle2 === void 0 ? '' : _item$disableTitle2;
+              disableTitle = _item$disableTitle2 === void 0 ? '' : _item$disableTitle2,
+              secondaryValue = item.secondaryValue;
 
           if (!needDivider) {
             listIndex += 1;
@@ -886,7 +907,8 @@ var ToggleDropDown = /*#__PURE__*/function (_Component) {
               role: isSearch ? 'option' : 'menuitem',
               ariaSelected: selectedId === item[idName],
               ariaLabel: item[keyName]
-            }
+            },
+            secondaryValue: secondaryValue
           }, ListItemWithIconProps)) : /*#__PURE__*/_react["default"].createElement(_ListItem["default"], _extends({
             key: listIndex,
             dataId: item[keyName],
@@ -910,7 +932,8 @@ var ToggleDropDown = /*#__PURE__*/function (_Component) {
               role: isSearch ? 'option' : 'menuitem',
               ariaSelected: selectedId === item[idName],
               ariaLabel: item[keyName]
-            }
+            },
+            secondaryValue: secondaryValue
           }, ListItemProps)));
         }), isFetchingOptions && /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
           isCover: false,

package/lib/dropdown/ToggleDropDown/ToggleDropDown.module.css

@@ -40,7 +40,7 @@
   visibility: visible;
 }
 .value {
-  composes: dotted  offSelection from '~@zohodesk/components/lib/common/common.module.css';
+  composes: dotted  offSelection from '~@zohodesk/components/es/common/common.module.css';
 }
 .search {
   padding: var(--zd_size6) var(--zd_size20) 0 ;

package/lib/dropdown/ToggleDropDown/props/defaultProps.js

@@ -31,6 +31,7 @@ var defaultProps = {
   needMultiLineText: false,
   isAbsolutePositioningNeeded: true,
   isRestrictScroll: false,
-  customClass: {}
+  customClass: {},
+  searchFields: []
 };
 exports.defaultProps = defaultProps;

package/lib/dropdown/ToggleDropDown/props/propTypes.js

@@ -89,6 +89,7 @@ var propTypes = {
   positionsOffset: _propTypes["default"].object,
   targetOffset: _propTypes["default"].object,
   from: _propTypes["default"].string,
-  top: _propTypes["default"].number
+  top: _propTypes["default"].number,
+  searchFields: _propTypes["default"].array
 };
 exports.propTypes = propTypes;

package/lib/errorstate/EmptyStates.module.css

@@ -25,7 +25,7 @@
 .title,
 .tabletTitle,
 .mobileTitle {
-  composes: semibold from '~@zohodesk/components/lib/common/common.module.css';
+  composes: semibold from '~@zohodesk/components/es/common/common.module.css';
   letter-spacing: var(--zd_size1);
 }
 .title, .tabletTitle, .mobileTitle {

package/lib/errorstate/WillBack/WillBack.module.css

@@ -2,7 +2,7 @@
 .tabletTitle,
 .mobileTitle {
   color: var(--zdt_willback_title_text);
-  composes: bold from '~@zohodesk/components/lib/common/common.module.css';
+  composes: bold from '~@zohodesk/components/es/common/common.module.css';
 }
 .title {
   font-size: var(--zd_font_size50) ;

package/lib/form/fields/Fields.module.css

@@ -7,6 +7,9 @@
   position: relative;
   min-height: var(--zd_size25) ;
 }
+.fieldMargin_large {
+  margin-top: var(--zd_size10) ;
+}
 .fieldMargin_medium {
   margin-top: var(--zd_size5) ;
 }
@@ -15,7 +18,7 @@
 }
 .radioContainer,
 .checkbox {
-  composes: dflex alignVertical flexwrap from '~@zohodesk/components/lib/common/common.module.css';
+  composes: dflex alignVertical flexwrap from '~@zohodesk/components/es/common/common.module.css';
 }
 .checkbox {
   min-height: var(--zd_size28) ;
@@ -25,7 +28,7 @@
 }
 .lineClamp_one,
 .lineClamp_two {
-  composes: clamp from '~@zohodesk/components/lib/common/common.module.css';
+  composes: clamp from '~@zohodesk/components/es/common/common.module.css';
 }
 .lineClamp_one {
   -webkit-line-clamp: 1;
@@ -34,7 +37,7 @@
   -webkit-line-clamp: 2;
 }
 .checkboxText {
-  composes: wbreak from '~@zohodesk/components/lib/common/common.module.css';
+  composes: wbreak from '~@zohodesk/components/es/common/common.module.css';
   line-height: normal;
 }
 [dir=ltr] .checkboxText {
@@ -90,10 +93,10 @@
   width: var(--zd_size94) ;
 }
 .flex {
-  composes: dflex from '~@zohodesk/components/lib/common/common.module.css';
+  composes: dflex from '~@zohodesk/components/es/common/common.module.css';
 }
 .periodContainer {
-  composes: dflex flexrow flexwrap from '~@zohodesk/components/lib/common/common.module.css';
+  composes: dflex flexrow flexwrap from '~@zohodesk/components/es/common/common.module.css';
   width: 100% ;
   /*margin-left: var(--zd_size15);*/
 }
@@ -114,12 +117,12 @@
     color: var(--zdt_fields_newtabicon_hover_icon);
 }
 .labelContainer {
-  composes: dflex alignVertical from '~@zohodesk/components/lib/common/common.module.css';
+  composes: dflex alignVertical from '~@zohodesk/components/es/common/common.module.css';
 }
 .lockIcon,
 .infoIcon {
   color: var(--zdt_fields_lockicon_icon);
-  composes: dInflex from '~@zohodesk/components/lib/common/common.module.css';
+  composes: dInflex from '~@zohodesk/components/es/common/common.module.css';
 }
 [dir=ltr] .lockIcon, [dir=ltr] .infoIcon {
   margin-left: var(--zd_size5) ;
@@ -172,7 +175,7 @@
 .lockText {
   font-size: var(--zd_font_size13) ;
   font-style: italic;
-  composes: wbreak from '~@zohodesk/components/lib/common/common.module.css';
+  composes: wbreak from '~@zohodesk/components/es/common/common.module.css';
 }
 .labelMandatory:after {
   content: '*';
@@ -185,7 +188,7 @@
   padding-right: var(--zd_size2) ;
 }
 .ePhiTag {
-  composes: flexshrink from '~@zohodesk/components/lib/common/common.module.css';
+  composes: flexshrink from '~@zohodesk/components/es/common/common.module.css';
   color: var(--zdt_fields_phitag_text);
   font-size: var(--zd_font_size12) ;
   height: var(--zd_size18) ;

package/lib/form/fields/RadioField/RadioField.js

@@ -182,7 +182,7 @@ var RadioField = /*#__PURE__*/function (_PureComponent) {
         customClass: "".concat(_FieldsModule["default"].fieldLabel, " ").concat(isMandatory ? _FieldsModule["default"].labelMandatory : ''),
         dataId: isDisabled ? "".concat(dataId, "_label_disabled") : isMandatory ? "".concat(dataId, "_label_mandatory") : "".concat(dataId, "_label")
       }, LabelProps)), /*#__PURE__*/_react["default"].createElement("div", {
-        className: "".concat(_FieldsModule["default"].fieldContainer, " ").concat(isBoxStyle ? _FieldsModule["default"].radiosWrapper : '', " ").concat(labelName ? _FieldsModule["default"].fieldMargin_medium : '', " ").concat(_FieldsModule["default"].radioContainer)
+        className: "".concat(_FieldsModule["default"].fieldContainer, " ").concat(isBoxStyle ? _FieldsModule["default"].radiosWrapper : '', " ").concat(labelName ? isBoxStyle ? _FieldsModule["default"].fieldMargin_large : _FieldsModule["default"].fieldMargin_medium : '', " ").concat(_FieldsModule["default"].radioContainer)
       }, options.map(function (option, index) {
         var text = option.text,
             value = option.value,

package/lib/form/fields/TagsMultiSelect/TagsMultiSelect.module.css

@@ -70,7 +70,7 @@
 }
 .newTagLabel {
   color: var(--zdt_tagsmultiselect_labelt_text);
-  composes: semibold from '~@zohodesk/components/lib/common/common.module.css';
+  composes: semibold from '~@zohodesk/components/es/common/common.module.css';
 }
 [dir=ltr] .newTagLabel {
   margin-right: var(--zd_size5) ;
@@ -79,7 +79,7 @@
   margin-left: var(--zd_size5) ;
 }
 .dotted {
-  composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
+  composes: dotted from '~@zohodesk/components/es/common/common.module.css';
 }
 .dropdown {
   margin-top: var(--zd_size1) ;

package/lib/form/fields/TextEditorWrapper/TextEditorWrapper.js

@@ -110,8 +110,8 @@ var TextEditorWrapper = /*#__PURE__*/function (_Component) {
       onFocus && onFocus();
     }
   }, {
-    key: "componentWillReceiveProps",
-    value: function componentWillReceiveProps(np) {
+    key: "UNSAFE_componentWillReceiveProps",
+    value: function UNSAFE_componentWillReceiveProps(np) {
       var _this$props2 = this.props,
           id = _this$props2.id,
           value = _this$props2.value;

package/lib/form/layout/Section/ModuleFormSection.module.css

@@ -1,3 +1,3 @@
 .singleColumn {
-  composes: dflex flexrow from '~@zohodesk/components/lib/common/common.module.css';
+  composes: dflex flexrow from '~@zohodesk/components/es/common/common.module.css';
 }

package/lib/layout/SetupDetailLayout/SetupDetailLayout.module.css

@@ -32,7 +32,7 @@
   line-height: 1;
   font-family: var(--zd_semibold);
   color: var(--zdt_setupdetail_backicon);
-  composes: ftsmooth from '~@zohodesk/components/lib/common/common.module.css';
+  composes: ftsmooth from '~@zohodesk/components/es/common/common.module.css';
 }
 [dir=ltr] .title {
   padding-right: var(--zd_size12) ;
@@ -42,7 +42,7 @@
 }
 
 .rightPanel {
-  composes: justifyFend from '~@zohodesk/components/lib/common/common.module.css';
+  composes: justifyFend from '~@zohodesk/components/es/common/common.module.css';
 }
 .helpInfoCont {
   position: absolute;
@@ -106,7 +106,7 @@
   transform: translateX(0);
 }
 .close {
-  composes: disableFocus from '~@zohodesk/components/lib/common/common.module.css';
+  composes: disableFocus from '~@zohodesk/components/es/common/common.module.css';
 }
 
 .infoHeader {
@@ -127,7 +127,7 @@
 }
 
 .infoText {
-  composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
+  composes: dotted from '~@zohodesk/components/es/common/common.module.css';
   font-size: var(--zd_font_size13) ;
 }
 

package/lib/layout/SubtabLayout/SubtabLayout.module.css

@@ -72,7 +72,7 @@
 }
 
 .aside {
-  composes: justifyFend from '~@zohodesk/components/lib/common/common.module.css';
+  composes: justifyFend from '~@zohodesk/components/es/common/common.module.css';
 }
 
 .title {

package/lib/list/DotNew/DotNew.module.css

@@ -9,7 +9,7 @@
 }
 
 .container {
-  composes: dInflex alignVertical from '~@zohodesk/components/lib/common/common.module.css';
+  composes: dInflex alignVertical from '~@zohodesk/components/es/common/common.module.css';
   /* animation: dotAnimation 1.25s infinite cubic-bezier(0.66, 0.33, 0, 1);
   box-shadow: 0 0 0 0 var(--dot_catskillWhite),
     0 0 0 0 rgba(10, 115, 235, 0.6); */

package/lib/list/ListStencils/ListStencils.module.css

@@ -4,11 +4,11 @@
   padding: 0 var(--zd_size30) ;
 }
 .innerContainer {
-  composes: dflex alignVertical from '~@zohodesk/components/lib/common/common.module.css';
+  composes: dflex alignVertical from '~@zohodesk/components/es/common/common.module.css';
   border-bottom: 1px dotted var(--zdt_liststencils_innercontainer_border);
 }
 .detailsInnerColumn {
-  composes: dflex from '~@zohodesk/components/lib/common/common.module.css';
+  composes: dflex from '~@zohodesk/components/es/common/common.module.css';
 }
 [dir=ltr] .avatar {
   margin-right: var(--zd_size25) ;
@@ -21,7 +21,7 @@
   min-width: 0 ;
 }
 .primaryRow {
-  composes: flexgrow flexshrink flexbasis from '~@zohodesk/components/lib/common/common.module.css';
+  composes: flexgrow flexshrink flexbasis from '~@zohodesk/components/es/common/common.module.css';
 }
 .classic .detailsColumn {
   flex-basis: 60% ;

package/lib/list/SecondaryText/SecondaryText.module.css

@@ -45,7 +45,7 @@ display: block
 .textStyle,
 .secondaryText,
 .phoneNumber {
-  composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
+  composes: dotted from '~@zohodesk/components/es/common/common.module.css';
   max-width: 100% ;
   display: block;
 }
@@ -83,11 +83,11 @@ display: block
 .font_semibold,
 .font_bold,
 .textBold {
-  composes: ftsmooth from '~@zohodesk/components/lib/common/common.module.css';
+  composes: ftsmooth from '~@zohodesk/components/es/common/common.module.css';
 }
 .priorityText,
 .statusText {
-  composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
+  composes: dotted from '~@zohodesk/components/es/common/common.module.css';
 }
 
 .priorityText {
@@ -98,7 +98,7 @@ display: block
   font-size: var(--zd_font_size12) ;
   color: var(--zdt_secondaryText_secondaryText_text);
   max-width: 100% ;
-  composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
+  composes: dotted from '~@zohodesk/components/es/common/common.module.css';
 }
 /* HappinessRating Style */
 .happinessContainer {

package/lib/list/SecondryPanel/SecondryPanel.module.css

@@ -2,5 +2,5 @@
   max-width: 100% ;
 }
 .dottedStyle {
-  composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
+  composes: dotted from '~@zohodesk/components/es/common/common.module.css';
 }

package/lib/list/Subject/Subject.module.css

@@ -10,7 +10,7 @@
 }
 
 .dotted {
-  composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
+  composes: dotted from '~@zohodesk/components/es/common/common.module.css';
 }
 
 .font_regular {
@@ -27,7 +27,7 @@
 
 .font_semibold,
 .font_bold {
-  composes: ftsmooth from '~@zohodesk/components/lib/common/common.module.css';
+  composes: ftsmooth from '~@zohodesk/components/es/common/common.module.css';
 }
 
 .cursorPointer {

package/lib/list/TagNew/TagNew.module.css

@@ -4,7 +4,7 @@
   font-size: var(--zd_font_size13) ;
   color: var(--zdt_tagnew_default_text);
   composes: inlineFlex from '../listCommon.module.css';
-  composes: alignHorizontal from '~@zohodesk/components/lib/common/common.module.css';
+  composes: alignHorizontal from '~@zohodesk/components/es/common/common.module.css';
   transition: all var(--zd_transition2) ease 0s;
   opacity: 0;
   visibility: hidden;

package/lib/list/Thread/Thread.module.css

@@ -27,7 +27,7 @@
   right: var(--zd_size8) ;
 }
 .align_right {
-  composes: dInflex alignFend from '~@zohodesk/components/lib/common/common.module.css';
+  composes: dInflex alignFend from '~@zohodesk/components/es/common/common.module.css';
 }
 .align_right .count {
   position: relative;

package/lib/list/listCommon.module.css

@@ -4,7 +4,7 @@
 }
 
 .inlineFlex {
-  composes: dInflex alignVertical from '~@zohodesk/components/lib/common/common.module.css';
+  composes: dInflex alignVertical from '~@zohodesk/components/es/common/common.module.css';
 }
 
 [dir=ltr] .avatarMargin {
@@ -16,14 +16,14 @@
 }
 
 .subject {
-  composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
+  composes: dotted from '~@zohodesk/components/es/common/common.module.css';
   font-size: var(--zd_font_size16) ;
 }
 
 /* css:lineheight-validation:ignore */
 .secondaryPanel {
   line-height: var(--zd_size18);
-  composes: dflex alignVertical flexwrap from '~@zohodesk/components/lib/common/common.module.css';
+  composes: dflex alignVertical flexwrap from '~@zohodesk/components/es/common/common.module.css';
 }
 
 .statusColumn {

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

@@ -31,7 +31,7 @@ var _CommonEmptyState = _interopRequireDefault(require("../../../emptystate/Comm
 
 var _StatusListItem = _interopRequireDefault(require("../StatusListItem/StatusListItem"));
 
-var _commonModule = _interopRequireDefault(require("@zohodesk/components/lib/common/common.module.css"));
+var _commonModule = _interopRequireDefault(require("@zohodesk/components/es/common/common.module.css"));
 
 var _ResponsiveDropBox = _interopRequireDefault(require("@zohodesk/components/lib/ResponsiveDropBox/ResponsiveDropBox"));
 
@@ -112,8 +112,8 @@ var StatusDropdown = /*#__PURE__*/function (_React$Component) {
       togglePopup(e, boxPosition);
     }
   }, {
-    key: "componentWillReceiveProps",
-    value: function componentWillReceiveProps(nextProps) {
+    key: "UNSAFE_componentWillReceiveProps",
+    value: function UNSAFE_componentWillReceiveProps(nextProps) {
       if (nextProps.options.length != this.props.options.length) {
         this.setState({
           options: nextProps.options

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

@@ -40,7 +40,7 @@
   visibility: visible;
 }
 .value {
-  composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
+  composes: dotted from '~@zohodesk/components/es/common/common.module.css';
 }
 .search {
   padding: var(--zd_size6) var(--zd_size20) 0 ;

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

@@ -34,11 +34,11 @@
   line-height: 1.5385;
 }
 .value {
-  composes: dotted from '~@zohodesk/components/lib/common/common.module.css';
+  composes: dotted from '~@zohodesk/components/es/common/common.module.css';
 }
 .multiLineValue{
   word-break: break-word;
-  composes: clamp from '~@zohodesk/components/lib/common/common.module.css';
+  composes: clamp from '~@zohodesk/components/es/common/common.module.css';
 }
 [dir=ltr] .withBorder.active {
   border-left-color: var(--zdt_statuslistitem_default_active_border);

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

@@ -7,6 +7,6 @@
 .contentDiv {
   font-size: var(--zd_font_size20) ;
   font-family: var(--zd_semibold);
-  composes: ftsmooth from '~@zohodesk/components/lib/common/common.module.css';
+  composes: ftsmooth from '~@zohodesk/components/es/common/common.module.css';
   margin-top: var(--zd_size15) ;
 }

package/lib/lookup/Lookup/Lookup.js

@@ -110,6 +110,7 @@ var Lookup = /*#__PURE__*/function (_Component) {
           needFocusScope = _this$props.needFocusScope,
           customProps = _this$props.customProps,
           isMinHeight = _this$props.isMinHeight,
+          containerClass = _this$props.containerClass,
           lookupClass = _this$props.lookupClass;
 
       var _a11y$role = a11y.role,
@@ -150,7 +151,7 @@ var Lookup = /*#__PURE__*/function (_Component) {
       }, a11yAttributes), /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         "data-drag-container": "true",
         isCover: false,
-        className: isMinHeight ? "".concat(_LookupModule["default"].wrapper) : "".concat(_LookupModule["default"].coverwrap)
+        className: "".concat(isMinHeight ? _LookupModule["default"].wrapper : _LookupModule["default"].coverwrap, " ").concat(_LookupModule["default"].containerWidth, " ").concat(containerClass)
       }, children));
 
       return /*#__PURE__*/_react["default"].createElement(_FreezeLayer["default"], {