@zohodesk/components 1.0.0-temp-248.1 → 1.0.0-temp-199.21

package/es/shared/InputFieldLine/props/defaultProps.js

@@ -8,6 +8,7 @@ export default {
   dataId: '',
   customClass: '',
   customProps: {},
+  size: 'medium',
   borderColor: 'default',
   border: 'bottom',
   a11yAttributes: {},

package/lib/ColorSelect/__tests__/__snapshots__/ColorMultiSelect.spec.js.snap

@@ -25,7 +25,7 @@ exports[`ColorMultiSelect Should render the default selected value 1`] = `
           "
         />
         <div
-          class="varClass customContainer    effect     container custmInputWrapper  flex rowdir"
+          class="varClass customContainer   effect     container custmInputWrapper  flex rowdir"
           data-selector-id="textBoxIcon"
         >
           <div
@@ -210,7 +210,7 @@ exports[`ColorMultiSelect Should render the selected value 1`] = `
           "
         />
         <div
-          class="varClass customContainer    effect     container custmInputWrapper  flex rowdir"
+          class="varClass customContainer   effect     container custmInputWrapper  flex rowdir"
           data-selector-id="textBoxIcon"
         >
           <div
@@ -311,7 +311,7 @@ exports[`ColorMultiSelect rendering the defult props 1`] = `
           "
         />
         <div
-          class="varClass customContainer    effect     container custmInputWrapper  flex rowdir"
+          class="varClass customContainer   effect     container custmInputWrapper  flex rowdir"
           data-selector-id="textBoxIcon"
         >
           <div
@@ -394,7 +394,7 @@ exports[`ColorMultiSelect renders with renderCustomColorIndicator 1`] = `
           "
         />
         <div
-          class="varClass customContainer    effect     container custmInputWrapper  flex rowdir"
+          class="varClass customContainer   effect     container custmInputWrapper  flex rowdir"
           data-selector-id="textBoxIcon"
         >
           <div
@@ -477,7 +477,7 @@ exports[`ColorMultiSelect renders with renderCustomSelectedValue 1`] = `
           "
         />
         <div
-          class="varClass customContainer    effect     container custmInputWrapper  flex rowdir"
+          class="varClass customContainer   effect     container custmInputWrapper  flex rowdir"
           data-selector-id="textBoxIcon"
         >
           <div

package/lib/ColorSelect/__tests__/__snapshots__/ColorSingleSelect.spec.js.snap

@@ -18,7 +18,7 @@ exports[`ColorSingleSelect Should render the default selected value 1`] = `
         aria-haspopup="listbox"
         aria-owns="3"
         aria-readonly="false"
-        class="varClass customContainer medium padding_medium border_bottom effect borderColor_default hasBorder    flex rowdir scrolly"
+        class="varClass customContainer medium border_bottom effect borderColor_default hasBorder    flex rowdir"
         data-selector-id="container"
         data-title=""
         role="button"
@@ -96,7 +96,7 @@ exports[`ColorSingleSelect Should render the selected value 1`] = `
         aria-haspopup="listbox"
         aria-owns="6"
         aria-readonly="false"
-        class="varClass customContainer medium padding_medium border_bottom effect borderColor_default hasBorder    flex rowdir scrolly"
+        class="varClass customContainer medium border_bottom effect borderColor_default hasBorder    flex rowdir"
         data-selector-id="container"
         data-title=""
         role="button"
@@ -170,7 +170,7 @@ exports[`ColorSingleSelect rendering the defult props 1`] = `
         aria-haspopup="listbox"
         aria-owns="1"
         aria-readonly="false"
-        class="varClass customContainer medium padding_medium border_bottom effect borderColor_default hasBorder    flex rowdir scrolly"
+        class="varClass customContainer medium border_bottom effect borderColor_default hasBorder    flex rowdir"
         data-selector-id="container"
         data-title=""
         role="button"
@@ -233,7 +233,7 @@ exports[`ColorSingleSelect rendering with isDefaultSelectValue is false 1`] = `
         aria-haspopup="listbox"
         aria-owns="9"
         aria-readonly="false"
-        class="varClass customContainer medium padding_medium border_bottom effect borderColor_default hasBorder    flex rowdir scrolly"
+        class="varClass customContainer medium border_bottom effect borderColor_default hasBorder    flex rowdir"
         data-selector-id="container"
         data-title=""
         role="button"
@@ -298,7 +298,7 @@ exports[`ColorSingleSelect renders with renderCustomColorIndicator 1`] = `
         aria-haspopup="listbox"
         aria-owns="11"
         aria-readonly="false"
-        class="varClass customContainer medium padding_medium border_bottom effect borderColor_default hasBorder    flex rowdir scrolly"
+        class="varClass customContainer medium border_bottom effect borderColor_default hasBorder    flex rowdir"
         data-selector-id="container"
         data-title=""
         role="button"
@@ -376,7 +376,7 @@ exports[`ColorSingleSelect renders with renderCustomSelectedValue 1`] = `
         aria-haspopup="listbox"
         aria-owns="14"
         aria-readonly="false"
-        class="varClass customContainer medium padding_medium border_bottom effect borderColor_default hasBorder    flex rowdir scrolly"
+        class="varClass customContainer medium border_bottom effect borderColor_default hasBorder    flex rowdir"
         data-selector-id="container"
         data-title=""
         role="button"

package/lib/DateTime/__tests__/__snapshots__/DateTime.spec.js.snap

@@ -618,7 +618,7 @@ exports[`DateTime rendering the isActive is true and isDefaultPosition is true 1
                 data-test-id="hourField"
               >
                 <div
-                  class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container input  flex rowdir"
+                  class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container input  flex rowdir"
                   data-selector-id="textBoxIcon"
                 >
                   <div
@@ -713,7 +713,7 @@ exports[`DateTime rendering the isActive is true and isDefaultPosition is true 1
                 data-test-id="minuteField"
               >
                 <div
-                  class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container input  flex rowdir"
+                  class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container input  flex rowdir"
                   data-selector-id="textBoxIcon"
                 >
                   <div
@@ -808,7 +808,7 @@ exports[`DateTime rendering the isActive is true and isDefaultPosition is true 1
                 data-test-id="ampmField"
               >
                 <div
-                  class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container input  flex rowdir"
+                  class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container input  flex rowdir"
                   data-selector-id="textBoxIcon"
                 >
                   <div

package/lib/DateTime/__tests__/__snapshots__/DateWidget.spec.js.snap

@@ -11,7 +11,7 @@ exports[`DateWidget rendering the defult props 1`] = `
       data-test-id="dateWidget_widget"
     >
       <div
-        class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container placeHolder  flex rowdir"
+        class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container placeHolder  flex rowdir"
         data-selector-id="textBoxIcon"
       >
         <div

package/lib/DateTime/__tests__/__snapshots__/Time.spec.js.snap

@@ -27,7 +27,7 @@ exports[`Time rendering the defult props 1`] = `
           data-test-id="hourField"
         >
           <div
-            class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container input  flex rowdir"
+            class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container input  flex rowdir"
             data-selector-id="textBoxIcon"
           >
             <div
@@ -120,7 +120,7 @@ exports[`Time rendering the defult props 1`] = `
           data-test-id="minuteField"
         >
           <div
-            class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container input  flex rowdir"
+            class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container input  flex rowdir"
             data-selector-id="textBoxIcon"
           >
             <div
@@ -213,7 +213,7 @@ exports[`Time rendering the defult props 1`] = `
           data-test-id="ampmField"
         >
           <div
-            class="varClass customContainer   border_bottom effect borderColor_default hasBorder    container input  flex rowdir"
+            class="varClass customContainer  border_bottom effect borderColor_default hasBorder    container input  flex rowdir"
             data-selector-id="textBoxIcon"
           >
             <div

package/lib/ListItem/ListItem.module.css

@@ -1,3 +1,4 @@
+/* css:lineheight-validation:ignore */
 .varClass {
   /* listitem default variables */
   --listitem_font_size: var(--zd_font_size13);
@@ -15,9 +16,14 @@
 
   /* listitem tick icon default variables */
   --listitem_tickicon_color: var(--zdt_listitem_default_tickicon);
-}[dir=ltr] .varClass {
+
+  /* multiLine value for list item */
+  --listitem_multiline_lineheight: 1.5385;
+}
+[dir=ltr] .varClass {
   --listitem_avatar_margin: 0 var(--zd_size15) 0 0;
-}[dir=rtl] .varClass {
+}
+[dir=rtl] .varClass {
   --listitem_avatar_margin: 0 0 0 var(--zd_size15);
 }
 .list {
@@ -76,8 +82,9 @@
 [dir=rtl] .beforeChild{
   margin-left: var(--zd_size10) ;
 }
+  /* css:lineheight-validation:ignore */
 .value, .multiLineValue {
-  line-height: 1.5385;
+  line-height: var(--listitem_multiline_lineheight);
 }
 .multiLineValue,.multiLine{
  composes: lineClamp from '../common/common.module.css';
@@ -115,28 +122,20 @@
   composes: justifyFend from '../common/common.module.css';
 }
 
+.contentWrapper {
+  composes: dflex flexrow alignVertical from '../common/common.module.css';
+  width: 100% ;
+}
 .lhsBox {
   composes: dflex from '../common/common.module.css';
   align-self: stretch;
 }
-.lhsBox_small,
-.lhsBox_medium,
-.lhsBox_large{
-  composes: varClass;
-  --listitem_doubleline_content_height: calc(var(--listitem_font_size) * 2 );
-  height: 100% ;
+.lhsBoxInner{
   composes: dflex alignVertical from '../common/common.module.css';
+  height: 100% ;
+  max-height: calc((var(--listitem_font_size) * var(--listitem_multiline_lineheight)) * 2 );
 }
-.lhsBox_small {
-  max-height: calc(var(--listitem_doubleline_content_height) + var(--zd_size7)); /* 7px = listitem min-height - (top + bottom padding) - doubleLine content height */
-}
-.lhsBox_medium {
-  max-height: calc(var(--listitem_doubleline_content_height) + var(--zd_size8)); /* 8px = listitem min-height - (top + bottom padding) - doubleLine content height */
-}
-.lhsBox_large {
-  max-height: calc(var(--listitem_doubleline_content_height) + var(--zd_size15)); /* 15px = listitem min-height - (top + bottom padding) - doubleLine content height */
-}
-.defaultHover, .primaryHover, .secondaryHover, .darkHover {
+.defaultHover, .primaryHover, .dangerHover, .secondaryHover, .darkHover {
   background-color: var(--listitem_highlight_bg_color);
 }
 .activewithBorder {
@@ -155,6 +154,13 @@
 {
   --listitem_bg_color: var(--zdt_listitem_highlight_bg);
 }
+.activedanger,
+.dangerHover,
+.dangerEffect:hover {
+  --listitem_bg_color: var(--zdt_listitem_danger_bg);
+  --listitem_highlight_bg_color: var(--zdt_listitem_danger_bg);
+  --listitem_text_color: var(--zdt_listitem_danger_text)
+}
 .primaryHover,
 .primaryEffect:hover
 /* .primaryEffect:focus */
@@ -177,7 +183,7 @@
   --listitem_bg_color: var(--zdt_listitem_dark_effect_bg);
   --listitem_highlight_bg_color: var(--zdt_listitem_dark_effect_bg);
 }
-.activedefault, .activeprimary, .activesecondary, .activedark {
+.activedefault, .activeprimary, .activedanger, .activesecondary, .activedark {
   background-color: var(--listitem_active_bg_color);
 }
 .activedefault,
@@ -186,6 +192,10 @@
 .activeprimary:hover {
   --listitem_active_bg_color: var(--zdt_listitem_primary_bg);
 }
+.activedanger,
+.activedanger:hover {
+  --listitem_active_bg_color: var(--zdt_listitem_danger_bg);
+}
 .activesecondary {
   --listitem_active_bg_color: var(--zdt_listitem_secondary_bg);
   --listitem_text_color: var(--zdt_listitem_secondary_text);

package/lib/ListItem/ListItemWithAvatar.js

@@ -178,11 +178,13 @@ var ListItemWithAvatar = /*#__PURE__*/function (_React$PureComponent) {
         disableTitle: disableTitle,
         title: null,
         customProps: ListItemProps
-      }, ContainerProps), name || imgSrc ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+      }, ContainerProps), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+        className: _ListItemModule["default"].contentWrapper
+      }, name || imgSrc ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         className: "".concat(_ListItemModule["default"].leftAvatar, " ").concat(lhsAlignContent !== 'center' ? "".concat(_ListItemModule["default"].lhsBox) : '')
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         align: lhsAlignContent,
-        className: _ListItemModule["default"]["lhsBox_".concat(size)]
+        className: _ListItemModule["default"].lhsBoxInner
       }, isTeam ? /*#__PURE__*/_react["default"].createElement(_AvatarTeam["default"], _extends({
         name: name,
         size: "small",
@@ -226,7 +228,7 @@ var ListItemWithAvatar = /*#__PURE__*/function (_React$PureComponent) {
       }, /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
         name: "ZD-ticknew",
         size: "8"
-      })) : null);
+      })) : null));
     }
   }]);
 

package/lib/ListItem/ListItemWithCheckBox.js

@@ -160,11 +160,13 @@ var ListItemWithCheckBox = /*#__PURE__*/function (_React$Component) {
         title: null,
         customProps: ListItemProps
       }, ContainerProps), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+        className: _ListItemModule["default"].contentWrapper
+      }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         className: "".concat(_ListItemModule["default"].iconBox, " ").concat(_ListItemModule["default"].lhsBox, " ").concat(_ListItemModule["default"]["lhsJustifyContent_".concat(lhsJustifyContent)]),
         dataId: "".concat(dataId ? dataId : value, "_checkBox")
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         align: lhsAlignContent,
-        className: lhsAlignContent !== 'center' ? _ListItemModule["default"]["lhsBox_".concat(size)] : ''
+        className: lhsAlignContent !== 'center' ? _ListItemModule["default"].lhsBoxInner : ''
       }, /*#__PURE__*/_react["default"].createElement(_CheckBox["default"], {
         checked: checked,
         a11y: {
@@ -189,7 +191,7 @@ var ListItemWithCheckBox = /*#__PURE__*/function (_React$Component) {
       }, (0, _utils.renderNode)(renderValueRightPlaceholderNode)) : null), secondaryValue ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         "data-title": isDisabled ? null : secondaryValue,
         className: "".concat(_ListItemModule["default"].secondaryField, " ").concat(needMultiLineText ? _ListItemModule["default"].multiLine : _ListItemModule["default"].secondaryValue)
-      }, secondaryValue) : null));
+      }, secondaryValue) : null)));
     }
   }]);
 

package/lib/ListItem/ListItemWithIcon.js

@@ -166,14 +166,16 @@ var ListItemWithIcon = /*#__PURE__*/function (_React$Component) {
         disableTitle: disableTitle,
         title: null,
         customProps: ListItemProps
-      }, ContainerProps), iconName && /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+      }, ContainerProps), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+        className: _ListItemModule["default"].contentWrapper
+      }, iconName && /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         "aria-hidden": true,
         align: lhsAlignContent,
         className: "".concat(_ListItemModule["default"].iconBox, " ").concat(_ListItemModule["default"].lhsBox, " ").concat(_ListItemModule["default"]["lhsJustifyContent_".concat(lhsJustifyContent)]),
         dataId: dataId ? "".concat(dataId, "_Icon") : "".concat(value.toLowerCase().replace("'", '_'), "_Icon")
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         align: lhsAlignContent,
-        className: lhsAlignContent !== 'center' ? _ListItemModule["default"]["lhsBox_".concat(size)] : ''
+        className: lhsAlignContent !== 'center' ? _ListItemModule["default"].lhsBoxInner : ''
       }, /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
         iconClass: iconClass,
         name: iconName,
@@ -204,7 +206,7 @@ var ListItemWithIcon = /*#__PURE__*/function (_React$Component) {
       }, /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
         name: "ZD-ticknew",
         size: "8"
-      })) : null);
+      })) : null));
     }
   }]);
 

package/lib/ListItem/ListItemWithRadio.js

@@ -161,12 +161,14 @@ var ListItemWithRadio = /*#__PURE__*/function (_React$Component) {
         title: null,
         customProps: ListItemProps
       }, ContainerProps), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+        className: _ListItemModule["default"].contentWrapper
+      }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         align: lhsAlignContent,
         className: "".concat(_ListItemModule["default"].iconBox, " ").concat(_ListItemModule["default"].lhsBox, " ").concat(_ListItemModule["default"]["lhsJustifyContent_".concat(lhsJustifyContent)]),
         dataId: "".concat(dataId, "_radio")
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         align: lhsAlignContent,
-        className: lhsAlignContent !== 'center' ? _ListItemModule["default"]["lhsBox_".concat(size)] : ''
+        className: lhsAlignContent !== 'center' ? _ListItemModule["default"].lhsBoxInner : ''
       }, /*#__PURE__*/_react["default"].createElement(_Radio["default"], {
         checked: checked,
         id: id,
@@ -192,7 +194,7 @@ var ListItemWithRadio = /*#__PURE__*/function (_React$Component) {
       }, (0, _utils.renderNode)(renderValueRightPlaceholderNode)) : null), secondaryValue ? /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         "data-title": isDisabled ? null : secondaryValue,
         className: "".concat(_ListItemModule["default"].secondaryField, " ").concat(needMultiLineText ? _ListItemModule["default"].multiLine : _ListItemModule["default"].secondaryValue)
-      }, secondaryValue) : null));
+      }, secondaryValue) : null)));
     }
   }]);
 

package/lib/ListItem/props/propTypes.js

@@ -33,7 +33,7 @@ var ListContainer_Props = {
   onClick: _propTypes["default"].func,
   onMouseEnter: _propTypes["default"].func,
   onMouseOver: _propTypes["default"].func,
-  palette: _propTypes["default"].oneOf(['default', 'primary', 'secondary', 'dark']),
+  palette: _propTypes["default"].oneOf(['default', 'primary', 'secondary', 'dark', 'danger']),
   size: _propTypes["default"].oneOf(['small', 'medium', 'large']),
   target: _propTypes["default"].oneOf(['blank', 'self']),
   title: _propTypes["default"].string,
@@ -65,7 +65,7 @@ var ListItem_Props = {
   needTick: _propTypes["default"].bool,
   onClick: _propTypes["default"].func,
   onMouseEnter: _propTypes["default"].func,
-  palette: _propTypes["default"].oneOf(['default', 'primary', 'secondary', 'dark']),
+  palette: _propTypes["default"].oneOf(['default', 'primary', 'secondary', 'dark', 'danger']),
   size: _propTypes["default"].oneOf(['small', 'medium', 'large']),
   target: _propTypes["default"].oneOf(['blank', 'self']),
   title: _propTypes["default"].string,
@@ -163,7 +163,7 @@ var ListItemWithIcon_Props = {
   needTick: _propTypes["default"].bool,
   onClick: _propTypes["default"].func,
   onMouseEnter: _propTypes["default"].func,
-  palette: _propTypes["default"].string,
+  palette: _propTypes["default"].oneOf(['default', 'primary', 'secondary', 'dark', 'danger']),
   size: _propTypes["default"].string,
   title: _propTypes["default"].string,
   value: _propTypes["default"].string,

package/lib/Modal/Portal/Portal.js

@@ -1,11 +1,13 @@
 "use strict";
 
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = Portal;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _Portal = _interopRequireDefault(require("@zohodesk/dotkit/es/react/components/Portal/Portal"));
 
@@ -17,16 +19,18 @@ var _propTypes = require("./props/propTypes");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
 function Portal(_ref) {
   var children = _ref.children,
       portalId = _ref.portalId;
-  var portalPrefix = (0, _Config.getLibraryConfig)("portalPrefix");
+  var getPortalContainer = (0, _react.useCallback)(function () {
+    var getConfigPortalContainer = (0, _Config.getLibraryConfig)('getPortalContainer');
 
-  var getPortalContainer = function getPortalContainer() {
-    var getPortalContainer = (0, _Config.getLibraryConfig)('getPortalContainer');
-
-    if (getPortalContainer && typeof getPortalContainer === 'function') {
-      var portal = getPortalContainer();
+    if (getConfigPortalContainer && typeof getConfigPortalContainer === 'function') {
+      var portal = getConfigPortalContainer();
 
       if (portal) {
         return portal;
@@ -34,10 +38,13 @@ function Portal(_ref) {
     }
 
     return null;
-  };
-
+  }, []);
+  var memoizedPortalId = (0, _react.useMemo)(function () {
+    var portalPrefix = (0, _Config.getLibraryConfig)("portalPrefix");
+    return "".concat(portalPrefix ? "".concat(portalPrefix) : '').concat(portalId);
+  }, [portalId]);
   return /*#__PURE__*/_react["default"].createElement(_Portal["default"], {
-    portalId: "".concat(portalPrefix ? "".concat(portalPrefix) : '').concat(portalId),
+    portalId: memoizedPortalId,
     getFallbackElement: getPortalContainer
   }, children);
 }

package/lib/MultiSelect/AdvancedGroupMultiSelect.js

@@ -55,6 +55,8 @@ 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."); }
@@ -979,7 +981,10 @@ var AdvancedGroupMultiSelect = /*#__PURE__*/function (_React$Component) {
           autoComplete = _this$props9.autoComplete,
           getTargetRef = _this$props9.getTargetRef,
           isFocus = _this$props9.isFocus,
-          limit = _this$props9.limit;
+          limit = _this$props9.limit,
+          customProps = _this$props9.customProps;
+      var _customProps$Suggesti = customProps.SuggestionsProps,
+          SuggestionsProps = _customProps$Suggesti === void 0 ? {} : _customProps$Suggesti;
       var _i18nKeys = i18nKeys,
           _i18nKeys$clearText = _i18nKeys.clearText,
           clearText = _i18nKeys$clearText === void 0 ? _constants.MULTISELECT_I18N_KEYS.clearText : _i18nKeys$clearText,
@@ -1145,7 +1150,7 @@ var AdvancedGroupMultiSelect = /*#__PURE__*/function (_React$Component) {
             a11y: {
               role: 'heading'
             }
-          })), /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], {
+          })), /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], _extends({}, SuggestionsProps, {
             suggestions: suggestions,
             selectedOptions: selectedOptionIds,
             getRef: _this5.suggestionItemRef,
@@ -1160,7 +1165,7 @@ var AdvancedGroupMultiSelect = /*#__PURE__*/function (_React$Component) {
             limit: limit,
             limitReachedMessage: limitReachedMessage,
             dataId: "".concat(dataId, "_Options")
-          }));
+          })));
         }) : /*#__PURE__*/_react["default"].createElement(_EmptyState["default"], {
           options: revampedGroups,
           searchString: searchStr,

package/lib/MultiSelect/MultiSelect.js

@@ -1171,9 +1171,9 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
           isLoading = _this$props15.isLoading,
           selectAllText = _this$props15.selectAllText,
           needSelectAll = _this$props15.needSelectAll,
-          customProps = _this$props15.customProps,
           isVirtualizerEnabled = _this$props15.isVirtualizerEnabled,
-          limit = _this$props15.limit;
+          limit = _this$props15.limit,
+          customProps = _this$props15.customProps;
       var _this$state9 = this.state,
           selectedOptions = _this$state9.selectedOptions,
           searchStr = _this$state9.searchStr,

package/lib/MultiSelect/Suggestions.js

@@ -247,15 +247,19 @@ var Suggestions = /*#__PURE__*/function (_React$PureComponent) {
           htmlId = _this$props2.htmlId,
           a11y = _this$props2.a11y,
           getVirtualizerPublicMethods = _this$props2.getVirtualizerPublicMethods,
-          setVirtualizerContainerRefFunction = _this$props2.setVirtualizerContainerRefFunction;
+          setVirtualizerContainerRefFunction = _this$props2.setVirtualizerContainerRefFunction,
+          customClass = _this$props2.customClass;
       var ariaParentRole = a11y.ariaParentRole,
           ariaMultiselectable = a11y.ariaMultiselectable;
+      var _customClass$containe = customClass.containerClass,
+          containerClass = _customClass$containe === void 0 ? '' : _customClass$containe;
       return /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
         isCover: false,
         role: ariaParentRole,
         id: htmlId,
         tabindex: "0",
-        "aria-multiselectable": ariaMultiselectable
+        "aria-multiselectable": ariaMultiselectable,
+        className: containerClass
       }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
         dataId: "".concat(dataId),
         className: className ? className : ''

package/lib/MultiSelect/__tests__/__snapshots__/AdvancedGroupMultiSelect.spec.js.snap

@@ -25,7 +25,7 @@ exports[`AdvancedGroupMultiSelect rendering the defult props 1`] = `
               "
         />
         <div
-          class="varClass customContainer    effect     container custmInputWrapper  flex rowdir"
+          class="varClass customContainer   effect     container custmInputWrapper  flex rowdir"
           data-selector-id="textBoxIcon"
         >
           <div

package/lib/MultiSelect/__tests__/__snapshots__/AdvancedMultiSelect.spec.js.snap

@@ -25,7 +25,7 @@ exports[`AdvancedMultiSelect rendering the defult props 1`] = `
               "
         />
         <div
-          class="varClass customContainer    effect     container custmInputWrapper  flex rowdir"
+          class="varClass customContainer   effect     container custmInputWrapper  flex rowdir"
           data-selector-id="textBoxIcon"
         >
           <div
@@ -96,7 +96,7 @@ exports[`AdvancedMultiSelect rendering the options array with objects and string
               "
         />
         <div
-          class="varClass customContainer    effect     container custmInputWrapper  flex rowdir"
+          class="varClass customContainer   effect     container custmInputWrapper  flex rowdir"
           data-selector-id="textBoxIcon"
         >
           <div
@@ -342,7 +342,7 @@ exports[`AdvancedMultiSelect rendering the options array with only objects using
               "
         />
         <div
-          class="varClass customContainer    effect     container custmInputWrapper  flex rowdir"
+          class="varClass customContainer   effect     container custmInputWrapper  flex rowdir"
           data-selector-id="textBoxIcon"
         >
           <div

package/lib/MultiSelect/__tests__/__snapshots__/MultiSelect.spec.js.snap

@@ -25,7 +25,7 @@ exports[`MultiSelect Should render with renderCustomSelectedValue 1`] = `
           "
         />
         <div
-          class="varClass customContainer    effect     container custmInputWrapper  flex rowdir"
+          class="varClass customContainer   effect     container custmInputWrapper  flex rowdir"
           data-selector-id="textBoxIcon"
         >
           <div
@@ -108,7 +108,7 @@ exports[`MultiSelect rendering the defult props 1`] = `
           "
         />
         <div
-          class="varClass customContainer    effect     container custmInputWrapper  flex rowdir"
+          class="varClass customContainer   effect     container custmInputWrapper  flex rowdir"
           data-selector-id="textBoxIcon"
         >
           <div
@@ -341,7 +341,7 @@ exports[`MultiSelect rendering with limit feature 1`] = `
           "
         />
         <div
-          class="varClass customContainer    effect     container custmInputWrapper  flex rowdir"
+          class="varClass customContainer   effect     container custmInputWrapper  flex rowdir"
           data-selector-id="textBoxIcon"
         >
           <div

package/lib/MultiSelect/__tests__/__snapshots__/MultiSelectWithAvatar.spec.js.snap

@@ -25,7 +25,7 @@ exports[`MultiSelectWithAvatar rendering the defult props 1`] = `
           "
         />
         <div
-          class="varClass customContainer    effect     container custmInputWrapper  flex rowdir"
+          class="varClass customContainer   effect     container custmInputWrapper  flex rowdir"
           data-selector-id="textBoxIcon"
         >
           <div

package/lib/MultiSelect/props/defaultProps.js

@@ -46,6 +46,7 @@ var AdvancedGroupMultiSelect_defaultProps = {
   palette: 'default',
   isLoading: false,
   dataSelectorId: 'advancedGroupMultiSelect',
+  customProps: {},
   allowValueFallback: true
 };
 exports.AdvancedGroupMultiSelect_defaultProps = AdvancedGroupMultiSelect_defaultProps;
@@ -184,6 +185,7 @@ exports.SelectedOptions_defaultProps = SelectedOptions_defaultProps;
 var Suggestions_defaultProps = {
   a11y: {},
   isVirtualizerEnabled: false,
+  customClass: {},
   needMultiLineText: false
 };
 exports.Suggestions_defaultProps = Suggestions_defaultProps;