@zohodesk/components 1.0.0-temp-199.5 → 1.0.0-temp-215

package/lib/DropBox/DropBoxElement/css/DropBoxElement.module.css

@@ -73,19 +73,19 @@
 }
 
 /* shadow */
-.top_shadow {
+[data-boxdirection="top"].shadow {
     --dropbox_box_shadow: var(--zd_bs_dropbox_top);
 }
 
-.left_shadow {
+[data-boxdirection="left"].shadow {
     --dropbox_box_shadow: var(--zd_bs_dropbox_left);
 }
 
-.right_shadow {
+[data-boxdirection="right"].shadow {
     --dropbox_box_shadow: var(--zd_bs_dropbox_right);
 }
 
-.bottom_shadow {
+[data-boxdirection="bottom"].shadow {
     --dropbox_box_shadow: var(--zd_bs_dropbox_bottom);
 }
 
@@ -158,37 +158,37 @@
     transform: translateY(-50%);
 }
 
-/* space for arrow */
-.arrowtop {
+/* space for arrow using data-boxdirection attribute*/
+[data-boxdirection="top"].arrow {
     padding-bottom: var(--zd_size10) ;
 }
 
-.arrowright {
+[data-boxdirection="right"].arrow {
     padding-left: var(--zd_size10) ;
 }
 
-.arrowleft {
+[data-boxdirection="left"].arrow {
     padding-right: var(--zd_size10) ;
 }
 
-.arrowbottom {
+[data-boxdirection="bottom"].arrow {
     padding-top: var(--zd_size10) ;
 }
 
-/* space from target */
-.paddingSpace_top {
+/* space from target using data-boxdirection attribute*/
+[data-boxdirection="top"].paddingSpace {
     padding-bottom: var(--zd_size5) ;
 }
 
-.paddingSpace_right {
+[data-boxdirection="right"].paddingSpace {
     padding-left: var(--zd_size5) ;
 }
 
-.paddingSpace_left {
+[data-boxdirection="left"].paddingSpace {
     padding-right: var(--zd_size5) ;
 }
 
-.paddingSpace_bottom {
+[data-boxdirection="bottom"].paddingSpace {
     padding-top: var(--zd_size5) ;
 }
 
@@ -219,101 +219,102 @@
     composes: arrow;
 }
 
-.top .start,
-.top .end,
-.top .mid {
+[data-boxdirection="top"].boxDirection.start,
+[data-boxdirection="top"].boxDirection.end,
+[data-boxdirection="top"].boxDirection.mid {
     bottom: calc( var(--zd_size17) * -1 ) ;
 }
 
-.top .start {
+[data-boxdirection="top"].boxDirection.start {
     left: var(--zd_size28) ;
 }
 
-.top .end {
+[data-boxdirection="top"].boxDirection.end {
     right: var(--zd_size28) ;
     transform: rotate(180deg) translateX(-50%);
 }
 
-.top .mid {
+[data-boxdirection="top"].boxDirection.mid {
     left: 50% ;
 }
 
-.top .start,
-.top .mid {
+[data-boxdirection="top"].boxDirection.start,
+[data-boxdirection="top"].boxDirection.mid {
     transform: rotate(180deg) translateX(50%);
 }
 
-.bottom .start,
-.bottom .end,
-.bottom .mid {
+[data-boxdirection="bottom"].boxDirection.start,
+[data-boxdirection="bottom"].boxDirection.end,
+[data-boxdirection="bottom"].boxDirection.mid {
     top: calc( var(--zd_size17) * -1 ) ;
 }
 
-.bottom .start {
+[data-boxdirection="bottom"].boxDirection.start {
     left: var(--zd_size28) ;
 }
 
-.bottom .mid {
+[data-boxdirection="bottom"].boxDirection.mid {
     left: 50% ;
 }
 
-.bottom .end {
+[data-boxdirection="bottom"].boxDirection.end {
     right: var(--zd_size28) ;
     transform: translateX(50%);
 }
 
-.bottom .mid,
-.bottom .start {
+[data-boxdirection="bottom"].boxDirection.mid,
+[data-boxdirection="bottom"].boxDirection.start {
     transform: translateX(-50%);
 }
 
-.left .start,
-.left .mid,
-.left .end {
+[data-boxdirection="left"].boxDirection.start,
+[data-boxdirection="left"].boxDirection.mid,
+[data-boxdirection="left"].boxDirection.end {
     right: calc( var(--zd_size17) * -1 ) ;
 }
 
-.left .start {
+[data-boxdirection="left"].boxDirection.start {
     top: var(--zd_size28) ;
 }
 
-.left .end {
+[data-boxdirection="left"].boxDirection.end {
     transform: rotate(90deg) translateX(50%);
     bottom: var(--zd_size28) ;
 }
 
-.left .mid {
+[data-boxdirection="left"].boxDirection.mid {
     top: 50% ;
 }
 
-.left .start,
-.left .mid {
+[data-boxdirection="left"].boxDirection.start,
+[data-boxdirection="left"].boxDirection.mid {
     transform: rotate(90deg) translateX(-50%);
 }
 
-.right .start,
-.right .mid,
-.right .end {
+[data-boxdirection="right"].boxDirection.start,
+[data-boxdirection="right"].boxDirection.mid,
+[data-boxdirection="right"].boxDirection.end {
     left: calc( var(--zd_size17) * -1 ) ;
 }
 
-.right .start {
+[data-boxdirection="right"].boxDirection.start {
     top: var(--zd_size28) ;
 }
 
-.right .mid {
+[data-boxdirection="right"].boxDirection.mid {
     top: 50% ;
 }
 
-.right .start,
-.right .mid {
+[data-boxdirection="right"].boxDirection.start,
+[data-boxdirection="right"].boxDirection.mid {
     transform: rotate(-90deg) translateX(50%);
 }
 
-.right .end {
+[data-boxdirection="right"].boxDirection.end {
     bottom: var(--zd_size28) ;
     transform: rotate(-90deg) translateX(-50%);
 }
+[data-visible="hidden"],
 .hidden {
     visibility: hidden;
     opacity: 0;
@@ -321,7 +322,7 @@
     pointer-events: none;
 }
 
-.hidden .subContainer {
+[data-visible="hidden"] .subContainer, .hidden .subContainer {
     box-shadow: none;
 }
 
@@ -342,17 +343,21 @@
     composes: animationBasic;
     composes: fadeIn modeForward from '../../../common/animation.module.css';
 }
+
 .scaleIn {
     composes: animationBasic;
     composes: scaleIn from '../../../common/animation.module.css';
 }
+
 .bounce {
     composes: animationBasic;
 }
+
 [dir=ltr] .bounce {
     animation-name: animation;
     animation-timing-function: cubic-bezier(0.4, 1, 0.65, 1.1);
 }
+
 [dir=rtl] .bounce {
     animation-name: animation;
     animation-timing-function: cubic-bezier(0.4, 1, 0.65, 1.1);
@@ -414,7 +419,7 @@
 }
 
 .closeBar {
-  /*  Variable:Ignore  */
+    /*  Variable:Ignore  */
     height: 6px;
     width: 20% ;
     border-radius: 5px;

package/lib/DropBox/DropBoxElement/css/cssJSLogic.js

@@ -55,8 +55,8 @@ function cssJSLogic(_ref) {
       customMobileDropBoxWrap = _customClass$customMo2 === void 0 ? '' : _customClass$customMo2;
   var animationValue = animationStyle === 'default' ? 'fadeInScale' : animationStyle; // const {needBoxStyle,boxstyle} = useDropboxPosCalc(props)
 
-  var boxClassName = (0, _utils.compileClassNames)((_compileClassNames = {}, _defineProperty(_compileClassNames, style.main, true), _defineProperty(_compileClassNames, style.hidden, !isActive), _defineProperty(_compileClassNames, style.responsive, !!isModel), _defineProperty(_compileClassNames, customMobileDropBoxWrap, !!isModel), _defineProperty(_compileClassNames, customDropBoxWrap, !isModel), _defineProperty(_compileClassNames, style.container, isAbsolute && !isModel), _defineProperty(_compileClassNames, style[boxPosition], isAbsolute && !isModel), _defineProperty(_compileClassNames, style.fixedContainer, !isAbsolute && !isModel), _defineProperty(_compileClassNames, style[size], size && !isModel), _defineProperty(_compileClassNames, style[boxDirection], !isModel && isActive && isArrow), _defineProperty(_compileClassNames, style["arrow".concat(boxDirection)], !isModel && isActive && isArrow && isAbsolute), _defineProperty(_compileClassNames, style["paddingSpace_".concat(boxDirection)], !isModel && isActive && !isArrow && isPadding), _compileClassNames));
-  var subContainerClass = (0, _utils.compileClassNames)((_compileClassNames2 = {}, _defineProperty(_compileClassNames2, style.subContainer, true), _defineProperty(_compileClassNames2, customMobileDropBox, !!isModel), _defineProperty(_compileClassNames2, style.mobRadius, !!isModel), _defineProperty(_compileClassNames2, style.slideUp, !!isModel && isActive), _defineProperty(_compileClassNames2, customDropBox, !isModel), _defineProperty(_compileClassNames2, style["".concat(boxDirection, "_shadow")], !isModel), _defineProperty(_compileClassNames2, style.boxPadding, !isModel && isBoxPaddingNeed), _defineProperty(_compileClassNames2, style.radius, !isModel && isRadius), _defineProperty(_compileClassNames2, style[animationValue], !isModel && isAnimate && !isReducedMotion && isActive && !!animationStyle), _compileClassNames2));
+  var boxClassName = (0, _utils.compileClassNames)((_compileClassNames = {}, _defineProperty(_compileClassNames, style.main, true), _defineProperty(_compileClassNames, style.hidden, !isActive), _defineProperty(_compileClassNames, style.responsive, !!isModel), _defineProperty(_compileClassNames, customMobileDropBoxWrap, !!isModel), _defineProperty(_compileClassNames, customDropBoxWrap, !isModel), _defineProperty(_compileClassNames, style.container, isAbsolute && !isModel), _defineProperty(_compileClassNames, style[boxPosition], isAbsolute && !isModel), _defineProperty(_compileClassNames, style.fixedContainer, !isAbsolute && !isModel), _defineProperty(_compileClassNames, style[size], size && !isModel), _defineProperty(_compileClassNames, style["boxDirection"], !isModel && isActive && isArrow), _defineProperty(_compileClassNames, style["arrow"], !isModel && isActive && isArrow && isAbsolute), _defineProperty(_compileClassNames, style["paddingSpace"], !isModel && isActive && !isArrow && isPadding), _compileClassNames));
+  var subContainerClass = (0, _utils.compileClassNames)((_compileClassNames2 = {}, _defineProperty(_compileClassNames2, style.subContainer, true), _defineProperty(_compileClassNames2, customMobileDropBox, !!isModel), _defineProperty(_compileClassNames2, style.mobRadius, !!isModel), _defineProperty(_compileClassNames2, style.slideUp, !!isModel && isActive), _defineProperty(_compileClassNames2, customDropBox, !isModel), _defineProperty(_compileClassNames2, style["shadow"], !isModel), _defineProperty(_compileClassNames2, style.boxPadding, !isModel && isBoxPaddingNeed), _defineProperty(_compileClassNames2, style.radius, !isModel && isRadius), _defineProperty(_compileClassNames2, style[animationValue], !isModel && isAnimate && !isReducedMotion && isActive && !!animationStyle), _compileClassNames2));
   var inlineStyle = !isModel ? isAbsolute ? needBoxStyle && boxstyle : positionsOffset && positionsOffset[boxPosition] || {} : {};
 
   if (zIndexStyle) {

package/lib/ListItem/ListItem.js

@@ -150,7 +150,7 @@ var ListItem = /*#__PURE__*/function (_React$Component) {
         autoHover: autoHover,
         needTick: needTick,
         needBorder: needBorder,
-        customClass: "".concat(needMultiLineText ? _ListItemModule["default"].txtAlignBaseLine + ' ' + _ListItemModule["default"].autoHeight : '', " ").concat(customListItem),
+        customClass: customListItem,
         dataId: dataIdString,
         dataSelectorId: "".concat(dataSelectorId),
         isLink: isLink,
@@ -171,7 +171,7 @@ var ListItem = /*#__PURE__*/function (_React$Component) {
         adjust: true,
         className: _ListItemModule["default"].children
       }, children) : null, needTick && active ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-        className: "".concat(_ListItemModule["default"].tickIcon, " ").concat(tickIconPalette, " ").concat(customTickIcon, " ").concat(needMultiLineText ? _ListItemModule["default"].tickIconCenter : ''),
+        className: "".concat(_ListItemModule["default"].tickIcon, " ").concat(tickIconPalette, " ").concat(customTickIcon),
         "aria-hidden": ariaHidden,
         dataId: "".concat(dataIdString, "_tickIcon"),
         dataSelectorId: "".concat(dataSelectorId, "_tickIcon")

package/lib/ListItem/ListItem.module.css

@@ -17,9 +17,8 @@
 }[dir=ltr] .varClass {
   --listitem_avatar_margin: 0 var(--zd_size15) 0 0;
 }[dir=rtl] .varClass {
-  --listitem_avatar_margin: 0 var(--zd_size15) 0 0;
+  --listitem_avatar_margin: 0 0 0 var(--zd_size15);
 }
-
 .list {
   composes: varClass;
   position: relative;
@@ -35,84 +34,62 @@
   border-color: var(--listitem_border_color);
   cursor: pointer;
 }
-
 .list, .default, .secondary {
   background-color: var(--listitem_bg_color);
 }
-
 [dir=ltr] .withBorder {
-  --listitem_border_width: 0 0 0 1px
-    /*rtl: 0 1px 0 0*/
-  ;
+  --listitem_border_width: 0 0 0 1px /*rtl: 0 1px 0 0*/;
 }
-
 [dir=rtl] .withBorder {
-  --listitem_border_width: 0 0 0 1px  ;
+  --listitem_border_width: 0 1px 0 0;
 }
-
 .active {
   --listitem_border_color: var(--zdt_listitem_active_border);
 }
-
 [dir=ltr] .small {
   --listitem_padding: var(--zd_size7) var(--zd_size3) var(--zd_size7) var(--zd_size5);
 }
-
 [dir=rtl] .small {
-  --listitem_padding: var(--zd_size7) var(--zd_size3) var(--zd_size7) var(--zd_size5);
+  --listitem_padding: var(--zd_size7) var(--zd_size5) var(--zd_size7) var(--zd_size3);
 }
-
 .medium {
   --listitem_padding: var(--zd_size7) var(--zd_size20);
   --listitem_min_height: var(--zd_size35);
 }
-
 .large {
   --listitem_height: var(--zd_size48);
 }
-
 [dir=ltr] .large {
   --listitem_padding: var(--zd_size10) var(--zd_size3) var(--zd_size10) var(--zd_size25);
 }
-
 [dir=rtl] .large {
-  --listitem_padding: var(--zd_size10) var(--zd_size3) var(--zd_size10) var(--zd_size25);
+  --listitem_padding: var(--zd_size10) var(--zd_size25) var(--zd_size10) var(--zd_size3);
 }
-
 .value,
 .children {
   composes: dotted from '../common/common.module.css';
 }
-
-.value {
+.value, .multiLineValue {
   line-height: 1.5385;
 }
-
-.multiLineValue {
-  line-height: 1.5385;
+.multiLineValue{
   word-break: break-word;
-  -webkit-line-clamp: 3;
-  composes: clamp from '../common/common.module.css';
+  composes: clamp from '../common/common.module.css'
 }
-
 .iconBox {
   width: var(--zd_size20) ;
   text-align: center;
 }
-
 [dir=ltr] .iconBox {
   margin-right: var(--zd_size10) ;
 }
-
 [dir=rtl] .iconBox {
   margin-left: var(--zd_size10) ;
 }
-
 .iconBox,
 .leftAvatar {
   font-size: 0 ;
 }
-
 .leftAvatar {
   margin: var(--listitem_avatar_margin);
 }
@@ -120,78 +97,61 @@
 .defaultHover, .primaryHover, .secondaryHover, .darkHover {
   background-color: var(--listitem_highlight_bg_color);
 }
-
 .activewithBorder {
   --listitem_border_color: var(--zdt_listitem_active_border);
 }
-
 [dir=ltr] .activewithBorder {
-  --listitem_border_width: 0 0 0 1px
-    /*rtl: 0 1px 0 0*/
-  ;
+  --listitem_border_width: 0 0 0 1px /*rtl: 0 1px 0 0*/;
 }
-
 [dir=rtl] .activewithBorder {
-  --listitem_border_width: 0 0 0 1px  ;
+  --listitem_border_width: 0 1px 0 0;
 }
 
 .defaultHover,
 .defaultEffect:hover
-
 /* .defaultEffect:focus  */
-  {
+{
   --listitem_bg_color: var(--zdt_listitem_highlight_bg);
 }
-
 .primaryHover,
 .primaryEffect:hover
-
 /* .primaryEffect:focus */
-  {
+ {
   --listitem_bg_color: var(--zdt_listitem_primary_bg);
   --listitem_highlight_bg_color: var(--zdt_listitem_primary_bg);
 }
-
 .secondaryHover,
 .secondaryEffect:hover
-
 /* .secondaryEffect:focus  */
-  {
+{
   --listitem_bg_color: var(--zdt_listitem_secondary_bg);
   --listitem_highlight_bg_color: var(--zdt_listitem_secondary_bg);
   --listitem_text_color: var(--zdt_listitem_secondary_text);
 }
-
 .darkHover,
 .darkEffect:hover
-
 /* .darkEffect:focus */
-  {
+ {
   --listitem_bg_color: var(--zdt_listitem_dark_effect_bg);
   --listitem_highlight_bg_color: var(--zdt_listitem_dark_effect_bg);
 }
-
 .activedefault, .activeprimary, .activesecondary, .activedark {
   background-color: var(--listitem_active_bg_color);
 }
-
 .activedefault,
 .activedefault:hover,
 .activeprimary,
 .activeprimary:hover {
   --listitem_active_bg_color: var(--zdt_listitem_primary_bg);
 }
-
 .activesecondary {
   --listitem_active_bg_color: var(--zdt_listitem_secondary_bg);
   --listitem_text_color: var(--zdt_listitem_secondary_text);
 }
-
 .dark {
   --listitem_bg_color: var(--zdt_listitem_dark_bg);
   --listitem_text_color: var(--zdt_listitem_dark_text);
 }
-
 .activedark {
   --listitem_active_bg_color: var(--zdt_listitem_dark_active_bg);
 }
@@ -210,63 +170,36 @@
 [dir=rtl] .tickIcon, [dir=rtl] .defaultTick, [dir=rtl] .darkTick {
   left: var(--zd_size20) ;
 }
-
 .defaultTick {
   --listitem_tickicon_color: var(--zdt_listitem_default_tickicon);
 }
-
 .darkTick {
   --listitem_tickicon_color: var(--zdt_listitem_dark_tickicon);
 }
-
-.defaultTick>i {
+.defaultTick > i {
   display: block;
 }
-
 [dir=ltr] .smallwithTick {
   --listitem_padding: var(--zd_size7) var(--zd_size39) var(--zd_size7) var(--zd_size5);
 }
-
 [dir=rtl] .smallwithTick {
-  --listitem_padding: var(--zd_size7) var(--zd_size39) var(--zd_size7) var(--zd_size5);
+  --listitem_padding: var(--zd_size7) var(--zd_size5) var(--zd_size7) var(--zd_size39);
 }
-
 [dir=ltr] .mediumwithTick {
   --listitem_padding: var(--zd_size7) var(--zd_size39) var(--zd_size7) var(--zd_size20);
 }
-
 [dir=rtl] .mediumwithTick {
-  --listitem_padding: var(--zd_size7) var(--zd_size39) var(--zd_size7) var(--zd_size20);
+  --listitem_padding: var(--zd_size7) var(--zd_size20) var(--zd_size7) var(--zd_size39);
 }
-
 [dir=ltr] .largewithTick {
   --listitem_padding: var(--zd_size10) var(--zd_size39) var(--zd_size10) var(--zd_size25);
 }
-
 [dir=rtl] .largewithTick {
-  --listitem_padding: var(--zd_size10) var(--zd_size39) var(--zd_size10) var(--zd_size25);
+  --listitem_padding: var(--zd_size10) var(--zd_size25) var(--zd_size10) var(--zd_size39);
 }
-
 .responsiveHeight {
   --listitem_min_height: var(--zd_size45);
   font-size: var(--zd_font_size15) ;
   padding-top: var(--zd_size10) ;
   padding-bottom: var(--zd_size10) ;
 }
-
-.autoHeight {
-  height: auto ;
-}
-
-.tickIconCenter {
-  top: 50% ;
-  transform: translateY(-50%);
-}
-
-.txtAlignBaseLine {
-  align-items: baseline;
-}
-
-.alignSelfTop {
-  align-self: start;
-}

package/lib/ListItem/ListItemWithAvatar.js

@@ -158,7 +158,7 @@ var ListItemWithAvatar = /*#__PURE__*/function (_React$PureComponent) {
         autoHover: autoHover,
         needTick: needTick,
         needBorder: needBorder,
-        customClass: "".concat(needMultiLineText ? _ListItemModule["default"].autoHeight : '', " ").concat(customListItem),
+        customClass: customListItem,
         dataId: "".concat(dataIdString, "_ListItemWithAvatar"),
         dataSelectorId: "".concat(dataSelectorId),
         onClick: this.handleClick,
@@ -168,7 +168,7 @@ var ListItemWithAvatar = /*#__PURE__*/function (_React$PureComponent) {
         title: null,
         customProps: ListItemProps
       }, ContainerProps), name || imgSrc ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-        className: "".concat(needMultiLineText ? _ListItemModule["default"].alignSelfTop : '', " ").concat(_ListItemModule["default"].leftAvatar)
+        className: _ListItemModule["default"].leftAvatar
       }, isTeam ? /*#__PURE__*/_react["default"].createElement(_AvatarTeam["default"], {
         name: name,
         size: "small",
@@ -195,7 +195,7 @@ var ListItemWithAvatar = /*#__PURE__*/function (_React$PureComponent) {
         "data-title": isDisabled ? null : title,
         className: needMultiLineText ? _ListItemModule["default"].multiLineValue : _ListItemModule["default"].value
       }, value) : null, needTick && active ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-        className: "".concat(_ListItemModule["default"].tickIcon, " ").concat(needMultiLineText ? _ListItemModule["default"].tickIconCenter : ''),
+        className: _ListItemModule["default"].tickIcon,
         "aria-hidden": ariaHidden,
         dataId: "".concat(dataIdString, "_tickIcon"),
         dataSelectorId: "".concat(dataSelectorId, "_tickIcon")

package/lib/ListItem/ListItemWithIcon.js

@@ -147,7 +147,7 @@ var ListItemWithIcon = /*#__PURE__*/function (_React$Component) {
         autoHover: autoHover,
         needTick: needTick,
         needBorder: needBorder,
-        customClass: "".concat(needMultiLineText ? _ListItemModule["default"].autoHeight : '', " ").concat(needMultiLineText && iconClass && !iconName ? _ListItemModule["default"].txtAlignBaseLine : '', " ").concat(customClass),
+        customClass: customClass,
         dataId: dataIdString,
         dataSelectorId: dataSelectorId,
         isLink: isLink,
@@ -176,7 +176,7 @@ var ListItemWithIcon = /*#__PURE__*/function (_React$Component) {
         "data-title": isDisabled ? null : title,
         dataId: "".concat(dataIdString, "_Text")
       }, value), needTick && active ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
-        className: "".concat(_ListItemModule["default"].tickIcon, " ").concat(needMultiLineText ? _ListItemModule["default"].tickIconCenter : ''),
+        className: _ListItemModule["default"].tickIcon,
         "aria-hidden": ariaHidden,
         dataId: "".concat(dataIdString, "_tickIcon"),
         dataSelectorId: "".concat(dataSelectorId, "_tickIcon")

package/lib/ListItem/__tests__/__snapshots__/ListItemWithCheckBox.spec.js.snap

@@ -21,7 +21,7 @@ exports[`ListItemWithCheckBox rendering the defult props 1`] = `
         aria-checked="false"
         aria-hidden="true"
         class="container pointer primary 
-          inflex rowdir vCenter"
+           inflex rowdir vCenter"
         data-id="checkBox"
         data-selector-id="container"
         data-test-id="checkBox"
@@ -29,7 +29,7 @@ exports[`ListItemWithCheckBox rendering the defult props 1`] = `
         tabindex="-1"
       >
         <div
-          class="boxContainer medium  filled shrinkOff"
+          class="boxContainer medium  filled  shrinkOff"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"

package/lib/ListItem/__tests__/__snapshots__/ListItemWithRadio.spec.js.snap

@@ -30,7 +30,7 @@ exports[`ListItemWithRadio rendering the defult props 1`] = `
       >
         <div
           class="radio  
-            hoverprimary medium filled centerPathprimary  shrinkOff"
+            hoverprimary medium filled centerPathprimary   shrinkOff"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"

package/lib/MultiSelect/AdvancedGroupMultiSelect.js

@@ -53,8 +53,6 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
@@ -968,8 +966,7 @@ var AdvancedGroupMultiSelect = /*#__PURE__*/function (_React$Component) {
           needEffect = _this$props8.needEffect,
           autoComplete = _this$props8.autoComplete,
           getTargetRef = _this$props8.getTargetRef,
-          customProps = _this$props8.customProps;
-      var suggestionsProps = customProps.suggestionsProps;
+          isFocus = _this$props8.isFocus;
       var _i18nKeys = i18nKeys,
           _i18nKeys$clearText = _i18nKeys.clearText,
           clearText = _i18nKeys$clearText === void 0 ? 'Clear all' : _i18nKeys$clearText;
@@ -997,6 +994,7 @@ var AdvancedGroupMultiSelect = /*#__PURE__*/function (_React$Component) {
       var setAriaId = this.getNextAriaId();
       var ariaErrorId = this.getNextAriaId();
       var isShowClearIcon = !isReadOnly && !isDisabled && selectedGroupOptions.length > 1;
+      var isEditable = !(isReadOnly || isDisabled);
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(_MultiSelectModule["default"].wrapper, " ").concat(isDisabled ? _MultiSelectModule["default"].disabled : '', " ").concat(needEffect && !(isDisabled || isReadOnly) ? _MultiSelectModule["default"].effect : ''),
         "data-id": "".concat(isDisabled ? "".concat(dataId, "_disabled") : isReadOnly ? "".concat(dataId, "_readOnly") : dataId),
@@ -1013,7 +1011,7 @@ var AdvancedGroupMultiSelect = /*#__PURE__*/function (_React$Component) {
       }, children) : /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         align: "vertical",
         alignBox: "row",
-        className: "".concat(_MultiSelectModule["default"].container, " ").concat(_MultiSelectModule["default"][size], " ").concat(isActive && needBorder ? _MultiSelectModule["default"].active : '', " ").concat(needBorder ? _MultiSelectModule["default"].hasBorder : '', " ").concat(_MultiSelectModule["default"]["borderColor_".concat(borderColor)], " ").concat(customClass),
+        className: "".concat(_MultiSelectModule["default"].container, " ").concat(_MultiSelectModule["default"][size], " ").concat(isActive && needBorder || isEditable && isFocus && needBorder ? _MultiSelectModule["default"].active : '', " ").concat(needBorder ? _MultiSelectModule["default"].hasBorder : '', " ").concat(_MultiSelectModule["default"]["borderColor_".concat(borderColor)], " ").concat(customClass),
         eleRef: this.selectedOptionContainerRef,
         wrap: "wrap"
       }, /*#__PURE__*/_react["default"].createElement(_SelectedOptions["default"], {
@@ -1132,7 +1130,7 @@ var AdvancedGroupMultiSelect = /*#__PURE__*/function (_React$Component) {
             a11y: {
               role: 'heading'
             }
-          })), /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], _extends({
+          })), /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], {
             suggestions: suggestions,
             selectedOptions: selectedOptionIds,
             getRef: _this5.suggestionItemRef,
@@ -1145,7 +1143,7 @@ var AdvancedGroupMultiSelect = /*#__PURE__*/function (_React$Component) {
               role: 'option'
             },
             dataId: "".concat(dataId, "_Options")
-          }, suggestionsProps)));
+          }));
         }) : /*#__PURE__*/_react["default"].createElement(_EmptyState["default"], {
           options: revampedGroups,
           searchString: searchStr,