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

package/README.md

@@ -2,16 +2,14 @@
 
 Dot UI is a customizable React component library built to deliver a clean, accessible, and developer-friendly UI experience. It offers a growing set of reusable components designed to align with modern design systems and streamline application development across projects.
 
-# 1.5.7 
-- **InputFieldline**  
- - changed the handling of conditional logic for padding and size properties.
- - `size` default prop declaration removed.
+# 1.5.8
 
-- **TextBoxIcon**  
- - added support for `InputFieldLineProps` via the customProps object.
+- Memoized **Portal** logic to improve performance.
 
-- **Select**  
- - Removed the size prop from InputFieldLine usage, as it is unused.
+# 1.5.7
+
+- **ListContainer, ListItem, ListItemWithIcon**
+  - `danger` value supported for the **palette** prop.
 
 # 1.5.6
 

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

@@ -183,6 +183,8 @@
 	--zdt_listitem_active_border: var(--zdt_cta_primary_border);
 	--zdt_listitem_primary_bg: var(--dot_listItemActive);
 	--zdt_listitem_secondary_bg: var(--zdtm_cta_primary_bg_default);
+	--zdt_listitem_danger_bg: rgba(255, 107, 107, 0.05);
+	--zdt_listitem_danger_text: hsla(0, 100.00%, calc(70.98% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_listitem_secondary_text: hsla(0, 0.00%, calc(12.94% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	
 	/* ribbon */

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

@@ -183,6 +183,8 @@
 	--zdt_listitem_active_border: var(--zdt_cta_primary_border);
 	--zdt_listitem_primary_bg: var(--dot_listItemActive);
 	--zdt_listitem_secondary_bg: var(--zdtm_cta_primary_bg_default);
+	--zdt_listitem_danger_bg: rgb(253,243,243);
+	--zdt_listitem_danger_text: hsla(0, 71.91%, calc(53.92% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_listitem_secondary_text: hsla(0, 0.00%, calc(100.00% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	
 	/* ribbon */

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

@@ -183,6 +183,8 @@
 	--zdt_listitem_active_border: var(--zdt_cta_primary_border);
 	--zdt_listitem_primary_bg: var(--dot_listItemActive);
 	--zdt_listitem_secondary_bg: var(--zdtm_cta_primary_bg_default);
+	--zdt_listitem_danger_bg: rgba(255, 107, 107, 0.05);
+	--zdt_listitem_danger_text: hsla(0, 100.00%, calc(70.98% + var(--zdc_default_inverse_lower)), calc(1 + var(--zdc_alpha_low)));
 	--zdt_listitem_secondary_text: hsla(0, 0.00%, calc(12.94% + var(--zdc_default_inverse)), calc(1 + var(--zdc_alpha_high)));
 	
 	/* ribbon */

package/es/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/es/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/es/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/es/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/es/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/es/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/es/ListItem/ListItemWithAvatar.js

@@ -124,11 +124,13 @@ export default class ListItemWithAvatar extends React.PureComponent {
       title: null,
       customProps: ListItemProps,
       ...ContainerProps
+    }, /*#__PURE__*/React.createElement(Box, {
+      className: style.contentWrapper
     }, name || imgSrc ? /*#__PURE__*/React.createElement(Box, {
       className: `${style.leftAvatar} ${lhsAlignContent !== 'center' ? `${style.lhsBox}` : ''}`
     }, /*#__PURE__*/React.createElement(Box, {
       align: lhsAlignContent,
-      className: style[`lhsBox_${size}`]
+      className: style.lhsBoxInner
     }, isTeam ? /*#__PURE__*/React.createElement(AvatarTeam, {
       name: name,
       size: "small",
@@ -174,7 +176,7 @@ export default class ListItemWithAvatar extends React.PureComponent {
     }, /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-ticknew",
       size: "8"
-    })) : null);
+    })) : null));
   }
 
 }

package/es/ListItem/ListItemWithCheckBox.js

@@ -100,12 +100,14 @@ export default class ListItemWithCheckBox extends React.Component {
       title: null,
       customProps: ListItemProps,
       ...ContainerProps
+    }, /*#__PURE__*/React.createElement(Box, {
+      className: style.contentWrapper
     }, /*#__PURE__*/React.createElement(Box, {
       className: `${style.iconBox} ${style.lhsBox} ${style[`lhsJustifyContent_${lhsJustifyContent}`]}`,
       dataId: `${dataId ? dataId : value}_checkBox`
     }, /*#__PURE__*/React.createElement(Box, {
       align: lhsAlignContent,
-      className: lhsAlignContent !== 'center' ? style[`lhsBox_${size}`] : ''
+      className: lhsAlignContent !== 'center' ? style.lhsBoxInner : ''
     }, /*#__PURE__*/React.createElement(CheckBox, {
       checked: checked,
       a11y: {
@@ -130,7 +132,7 @@ export default class ListItemWithCheckBox extends React.Component {
     }, renderNode(renderValueRightPlaceholderNode)) : null), secondaryValue ? /*#__PURE__*/React.createElement(Box, {
       "data-title": isDisabled ? null : secondaryValue,
       className: `${style.secondaryField} ${needMultiLineText ? style.multiLine : style.secondaryValue}`
-    }, secondaryValue) : null));
+    }, secondaryValue) : null)));
   }
 
 }

package/es/ListItem/ListItemWithIcon.js

@@ -116,6 +116,8 @@ export default class ListItemWithIcon extends React.Component {
       title: null,
       customProps: ListItemProps,
       ...ContainerProps
+    }, /*#__PURE__*/React.createElement(Box, {
+      className: style.contentWrapper
     }, iconName && /*#__PURE__*/React.createElement(Box, {
       "aria-hidden": true,
       align: lhsAlignContent,
@@ -123,7 +125,7 @@ export default class ListItemWithIcon extends React.Component {
       dataId: dataId ? `${dataId}_Icon` : `${value.toLowerCase().replace("'", '_')}_Icon`
     }, /*#__PURE__*/React.createElement(Box, {
       align: lhsAlignContent,
-      className: lhsAlignContent !== 'center' ? style[`lhsBox_${size}`] : ''
+      className: lhsAlignContent !== 'center' ? style.lhsBoxInner : ''
     }, /*#__PURE__*/React.createElement(Icon, {
       iconClass: iconClass,
       name: iconName,
@@ -154,7 +156,7 @@ export default class ListItemWithIcon extends React.Component {
     }, /*#__PURE__*/React.createElement(Icon, {
       name: "ZD-ticknew",
       size: "8"
-    })) : null);
+    })) : null));
   }
 
 }

package/es/ListItem/ListItemWithRadio.js

@@ -101,13 +101,15 @@ export default class ListItemWithRadio extends React.Component {
       title: null,
       customProps: ListItemProps,
       ...ContainerProps
+    }, /*#__PURE__*/React.createElement(Box, {
+      className: style.contentWrapper
     }, /*#__PURE__*/React.createElement(Box, {
       align: lhsAlignContent,
       className: `${style.iconBox} ${style.lhsBox} ${style[`lhsJustifyContent_${lhsJustifyContent}`]}`,
       dataId: `${dataId}_radio`
     }, /*#__PURE__*/React.createElement(Box, {
       align: lhsAlignContent,
-      className: lhsAlignContent !== 'center' ? style[`lhsBox_${size}`] : ''
+      className: lhsAlignContent !== 'center' ? style.lhsBoxInner : ''
     }, /*#__PURE__*/React.createElement(Radio, {
       checked: checked,
       id: id,
@@ -133,7 +135,7 @@ export default class ListItemWithRadio extends React.Component {
     }, renderNode(renderValueRightPlaceholderNode)) : null), secondaryValue ? /*#__PURE__*/React.createElement(Box, {
       "data-title": isDisabled ? null : secondaryValue,
       className: `${style.secondaryField} ${needMultiLineText ? style.multiLine : style.secondaryValue}`
-    }, secondaryValue) : null));
+    }, secondaryValue) : null)));
   }
 
 }

package/es/ListItem/props/propTypes.js

@@ -17,7 +17,7 @@ export const ListContainer_Props = {
   onClick: PropTypes.func,
   onMouseEnter: PropTypes.func,
   onMouseOver: PropTypes.func,
-  palette: PropTypes.oneOf(['default', 'primary', 'secondary', 'dark']),
+  palette: PropTypes.oneOf(['default', 'primary', 'secondary', 'dark', 'danger']),
   size: PropTypes.oneOf(['small', 'medium', 'large']),
   target: PropTypes.oneOf(['blank', 'self']),
   title: PropTypes.string,
@@ -48,7 +48,7 @@ export const ListItem_Props = {
   needTick: PropTypes.bool,
   onClick: PropTypes.func,
   onMouseEnter: PropTypes.func,
-  palette: PropTypes.oneOf(['default', 'primary', 'secondary', 'dark']),
+  palette: PropTypes.oneOf(['default', 'primary', 'secondary', 'dark', 'danger']),
   size: PropTypes.oneOf(['small', 'medium', 'large']),
   target: PropTypes.oneOf(['blank', 'self']),
   title: PropTypes.string,
@@ -172,7 +172,7 @@ export const ListItemWithIcon_Props = {
   needTick: PropTypes.bool,
   onClick: PropTypes.func,
   onMouseEnter: PropTypes.func,
-  palette: PropTypes.string,
+  palette: PropTypes.oneOf(['default', 'primary', 'secondary', 'dark', 'danger']),
   size: PropTypes.string,
   title: PropTypes.string,
   value: PropTypes.string,

package/es/Modal/Portal/Portal.js

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useCallback, useMemo } from "react";
 import BasePortal from '@zohodesk/dotkit/es/react/components/Portal/Portal';
 import { getLibraryConfig } from "../../Provider/Config";
 import { defaultProps } from "./props/defaultProps";
@@ -8,13 +8,11 @@ export default function Portal(_ref) {
     children,
     portalId
   } = _ref;
-  const portalPrefix = getLibraryConfig("portalPrefix");
+  const getPortalContainer = useCallback(() => {
+    const getConfigPortalContainer = getLibraryConfig('getPortalContainer');
 
-  const getPortalContainer = () => {
-    const getPortalContainer = getLibraryConfig('getPortalContainer');
-
-    if (getPortalContainer && typeof getPortalContainer === 'function') {
-      const portal = getPortalContainer();
+    if (getConfigPortalContainer && typeof getConfigPortalContainer === 'function') {
+      const portal = getConfigPortalContainer();
 
       if (portal) {
         return portal;
@@ -22,10 +20,13 @@ export default function Portal(_ref) {
     }
 
     return null;
-  };
-
+  }, []);
+  const memoizedPortalId = useMemo(() => {
+    const portalPrefix = getLibraryConfig("portalPrefix");
+    return `${portalPrefix ? `${portalPrefix}` : ''}${portalId}`;
+  }, [portalId]);
   return /*#__PURE__*/React.createElement(BasePortal, {
-    portalId: `${portalPrefix ? `${portalPrefix}` : ''}${portalId}`,
+    portalId: memoizedPortalId,
     getFallbackElement: getPortalContainer
   }, children);
 }

package/es/MultiSelect/AdvancedGroupMultiSelect.js

@@ -889,8 +889,12 @@ class AdvancedGroupMultiSelect extends React.Component {
       autoComplete,
       getTargetRef,
       isFocus,
-      limit
+      limit,
+      customProps
     } = this.props;
+    const {
+      SuggestionsProps = {}
+    } = customProps;
     let {
       clearText = MULTISELECT_I18N_KEYS.clearText,
       limitReachedMessage = MULTISELECT_I18N_KEYS.limitReachedMessage
@@ -1059,7 +1063,7 @@ class AdvancedGroupMultiSelect extends React.Component {
           a11y: {
             role: 'heading'
           }
-        })), /*#__PURE__*/React.createElement(Suggestions, {
+        })), /*#__PURE__*/React.createElement(Suggestions, { ...SuggestionsProps,
           suggestions: suggestions,
           selectedOptions: selectedOptionIds,
           getRef: this.suggestionItemRef,

package/es/MultiSelect/MultiSelect.js

@@ -1095,9 +1095,9 @@ export class MultiSelectComponent extends React.Component {
       isLoading,
       selectAllText,
       needSelectAll,
-      customProps,
       isVirtualizerEnabled,
-      limit
+      limit,
+      customProps
     } = this.props;
     const {
       selectedOptions,

package/es/MultiSelect/Suggestions.js

@@ -193,18 +193,23 @@ export default class Suggestions extends React.PureComponent {
       htmlId,
       a11y,
       getVirtualizerPublicMethods,
-      setVirtualizerContainerRefFunction
+      setVirtualizerContainerRefFunction,
+      customClass
     } = this.props;
     const {
       ariaParentRole,
       ariaMultiselectable
     } = a11y;
+    const {
+      containerClass = ''
+    } = customClass;
     return /*#__PURE__*/React.createElement(Container, {
       isCover: false,
       role: ariaParentRole,
       id: htmlId,
       tabindex: "0",
-      "aria-multiselectable": ariaMultiselectable
+      "aria-multiselectable": ariaMultiselectable,
+      className: containerClass
     }, /*#__PURE__*/React.createElement(Box, {
       dataId: `${dataId}`,
       className: className ? className : ''

package/es/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/es/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/es/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/es/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/es/MultiSelect/props/defaultProps.js

@@ -38,6 +38,7 @@ export const AdvancedGroupMultiSelect_defaultProps = {
   palette: 'default',
   isLoading: false,
   dataSelectorId: 'advancedGroupMultiSelect',
+  customProps: {},
   allowValueFallback: true
 };
 export const AdvancedMultiSelect_defaultProps = {
@@ -169,5 +170,6 @@ export const SelectedOptions_defaultProps = {
 export const Suggestions_defaultProps = {
   a11y: {},
   isVirtualizerEnabled: false,
+  customClass: {},
   needMultiLineText: false
 };