@zohodesk/components 1.4.17 → 1.4.18

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

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`ListItemWithRadio ListItemWithRadio with secondaryValue  text and LHS align center 1`] = `
+exports[`ListItemWithRadio ListItemWithRadio with renderValueRightPlaceholderNode & it's custom class 1`] = `
 <DocumentFragment>
   <li
     class="list medium  default     withBorder  flex rowdir vCenter"
@@ -12,13 +12,13 @@ exports[`ListItemWithRadio ListItemWithRadio with secondaryValue  text and LHS a
     tabindex="0"
   >
     <div
-      class="iconBox lhsBox lhsJustifyContent_center shrinkOff selfCenter"
+      class="iconBox lhsBox lhsJustifyContent_center shrinkOff selfStart"
       data-id="listItemWithRadioComp_radio"
       data-selector-id="box"
       data-test-id="listItemWithRadioComp_radio"
     >
       <div
-        class="shrinkOff selfCenter"
+        class="lhsBox_medium shrinkOff selfStart"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
@@ -65,19 +65,19 @@ exports[`ListItemWithRadio ListItemWithRadio with secondaryValue  text and LHS a
       </div>
     </div>
     <div
-      class="grow basis shrinkOn"
+      class="leftBox grow basis shrinkOff"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
-        class="flex cover coldir"
-        data-id="containerComponent"
-        data-selector-id="container"
-        data-test-id="containerComponent"
+        class="titleBox shrinkOff"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
       >
         <div
-          class="value shrinkOff"
+          class="value basisAuto shrinkOn"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
@@ -85,13 +85,14 @@ exports[`ListItemWithRadio ListItemWithRadio with secondaryValue  text and LHS a
           List
         </div>
         <div
-          class="secondaryField secondaryValue shrinkOff"
+          class="customValueRightPlaceholderClass shrinkOff"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
-          data-title="secondaryValue"
         >
-          secondaryValue
+          <div>
+            Custom Placeholder
+          </div>
         </div>
       </div>
     </div>
@@ -99,7 +100,7 @@ exports[`ListItemWithRadio ListItemWithRadio with secondaryValue  text and LHS a
 </DocumentFragment>
 `;
 
-exports[`ListItemWithRadio ListItemWithRadio with secondaryValue  text and LHS align end 1`] = `
+exports[`ListItemWithRadio ListItemWithRadio with renderValueRightPlaceholderNode 1`] = `
 <DocumentFragment>
   <li
     class="list medium  default     withBorder  flex rowdir vCenter"
@@ -111,13 +112,13 @@ exports[`ListItemWithRadio ListItemWithRadio with secondaryValue  text and LHS a
     tabindex="0"
   >
     <div
-      class="iconBox lhsBox lhsJustifyContent_center shrinkOff selfEnd"
+      class="iconBox lhsBox lhsJustifyContent_center shrinkOff selfStart"
       data-id="listItemWithRadioComp_radio"
       data-selector-id="box"
       data-test-id="listItemWithRadioComp_radio"
     >
       <div
-        class="lhsBox_medium shrinkOff selfEnd"
+        class="lhsBox_medium shrinkOff selfStart"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
@@ -164,19 +165,19 @@ exports[`ListItemWithRadio ListItemWithRadio with secondaryValue  text and LHS a
       </div>
     </div>
     <div
-      class="grow basis shrinkOn"
+      class="leftBox grow basis shrinkOff"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
-        class="flex cover coldir"
-        data-id="containerComponent"
-        data-selector-id="container"
-        data-test-id="containerComponent"
+        class="titleBox shrinkOff"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
       >
         <div
-          class="value shrinkOff"
+          class="value basisAuto shrinkOn"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
@@ -184,13 +185,14 @@ exports[`ListItemWithRadio ListItemWithRadio with secondaryValue  text and LHS a
           List
         </div>
         <div
-          class="secondaryField secondaryValue shrinkOff"
+          class="shrinkOff"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
-          data-title="secondaryValue"
         >
-          secondaryValue
+          <div>
+            Custom Placeholder
+          </div>
         </div>
       </div>
     </div>
@@ -198,7 +200,7 @@ exports[`ListItemWithRadio ListItemWithRadio with secondaryValue  text and LHS a
 </DocumentFragment>
 `;
 
-exports[`ListItemWithRadio ListItemWithRadio with secondaryValue 1`] = `
+exports[`ListItemWithRadio ListItemWithRadio with secondaryValue  text and LHS align center 1`] = `
 <DocumentFragment>
   <li
     class="list medium  default     withBorder  flex rowdir vCenter"
@@ -210,13 +212,13 @@ exports[`ListItemWithRadio ListItemWithRadio with secondaryValue 1`] = `
     tabindex="0"
   >
     <div
-      class="iconBox lhsBox lhsJustifyContent_center shrinkOff selfStart"
+      class="iconBox lhsBox lhsJustifyContent_center shrinkOff selfCenter"
       data-id="listItemWithRadioComp_radio"
       data-selector-id="box"
       data-test-id="listItemWithRadioComp_radio"
     >
       <div
-        class="lhsBox_medium shrinkOff selfStart"
+        class="shrinkOff selfCenter"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
@@ -263,41 +265,140 @@ exports[`ListItemWithRadio ListItemWithRadio with secondaryValue 1`] = `
       </div>
     </div>
     <div
-      class="grow basis shrinkOn"
+      class="leftBox grow basis shrinkOff"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
-        class="flex cover coldir"
-        data-id="containerComponent"
-        data-selector-id="container"
-        data-test-id="containerComponent"
+        class="titleBox shrinkOff"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
       >
         <div
-          class="value shrinkOff"
+          class="value basisAuto shrinkOn"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
         >
           List
         </div>
+      </div>
+      <div
+        class="secondaryField secondaryValue shrinkOff"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+        data-title="secondaryValue"
+      >
+        secondaryValue
+      </div>
+    </div>
+  </li>
+</DocumentFragment>
+`;
+
+exports[`ListItemWithRadio ListItemWithRadio with secondaryValue  text and LHS align end 1`] = `
+<DocumentFragment>
+  <li
+    class="list medium  default     withBorder  flex rowdir vCenter"
+    data-a11y-inset-focus="true"
+    data-id="listItemWithRadioComp"
+    data-selector-id="listItemWithRadio"
+    data-test-id="listItemWithRadioComp"
+    role="option"
+    tabindex="0"
+  >
+    <div
+      class="iconBox lhsBox lhsJustifyContent_center shrinkOff selfEnd"
+      data-id="listItemWithRadioComp_radio"
+      data-selector-id="box"
+      data-test-id="listItemWithRadioComp_radio"
+    >
+      <div
+        class="lhsBox_medium shrinkOff selfEnd"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
         <div
-          class="secondaryField secondaryValue shrinkOff"
+          aria-checked="false"
+          aria-hidden="true"
+          aria-readonly="false"
+          class="container  pointer hoverEfffect   inflex rowdir both"
+          data-id="RadioComp"
+          data-selector-id="container"
+          data-test-id="RadioComp"
+          role="radio"
+          tabindex="-1"
+        >
+          <div
+            class="radio  
+            hoverprimary medium filled centerPathprimary   shrinkOff"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <input
+              type="hidden"
+              value=""
+            />
+            <label
+              class="radioLabel pointer"
+            >
+              <svg
+                viewBox="0 0 40 40"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <circle
+                  class="rdBox"
+                  cx="20"
+                  cy="20"
+                  r="19"
+                />
+              </svg>
+            </label>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="leftBox grow basis shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div
+        class="titleBox shrinkOff"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <div
+          class="value basisAuto shrinkOn"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
-          data-title="secondaryValue"
         >
-          secondaryValue
+          List
         </div>
       </div>
+      <div
+        class="secondaryField secondaryValue shrinkOff"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+        data-title="secondaryValue"
+      >
+        secondaryValue
+      </div>
     </div>
   </li>
 </DocumentFragment>
 `;
 
-exports[`ListItemWithRadio ListItemWithRadio with secondaryValue text and LHS align start 1`] = `
+exports[`ListItemWithRadio ListItemWithRadio with secondaryValue 1`] = `
 <DocumentFragment>
   <li
     class="list medium  default     withBorder  flex rowdir vCenter"
@@ -362,35 +463,134 @@ exports[`ListItemWithRadio ListItemWithRadio with secondaryValue text and LHS al
       </div>
     </div>
     <div
-      class="grow basis shrinkOn"
+      class="leftBox grow basis shrinkOff"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
-        class="flex cover coldir"
-        data-id="containerComponent"
-        data-selector-id="container"
-        data-test-id="containerComponent"
+        class="titleBox shrinkOff"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
       >
         <div
-          class="value shrinkOff"
+          class="value basisAuto shrinkOn"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
         >
           List
         </div>
+      </div>
+      <div
+        class="secondaryField secondaryValue shrinkOff"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+        data-title="secondaryValue"
+      >
+        secondaryValue
+      </div>
+    </div>
+  </li>
+</DocumentFragment>
+`;
+
+exports[`ListItemWithRadio ListItemWithRadio with secondaryValue text and LHS align start 1`] = `
+<DocumentFragment>
+  <li
+    class="list medium  default     withBorder  flex rowdir vCenter"
+    data-a11y-inset-focus="true"
+    data-id="listItemWithRadioComp"
+    data-selector-id="listItemWithRadio"
+    data-test-id="listItemWithRadioComp"
+    role="option"
+    tabindex="0"
+  >
+    <div
+      class="iconBox lhsBox lhsJustifyContent_center shrinkOff selfStart"
+      data-id="listItemWithRadioComp_radio"
+      data-selector-id="box"
+      data-test-id="listItemWithRadioComp_radio"
+    >
+      <div
+        class="lhsBox_medium shrinkOff selfStart"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <div
+          aria-checked="false"
+          aria-hidden="true"
+          aria-readonly="false"
+          class="container  pointer hoverEfffect   inflex rowdir both"
+          data-id="RadioComp"
+          data-selector-id="container"
+          data-test-id="RadioComp"
+          role="radio"
+          tabindex="-1"
+        >
+          <div
+            class="radio  
+            hoverprimary medium filled centerPathprimary   shrinkOff"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <input
+              type="hidden"
+              value=""
+            />
+            <label
+              class="radioLabel pointer"
+            >
+              <svg
+                viewBox="0 0 40 40"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <circle
+                  class="rdBox"
+                  cx="20"
+                  cy="20"
+                  r="19"
+                />
+              </svg>
+            </label>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="leftBox grow basis shrinkOff"
+      data-id="boxComponent"
+      data-selector-id="box"
+      data-test-id="boxComponent"
+    >
+      <div
+        class="titleBox shrinkOff"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
         <div
-          class="secondaryField secondaryValue shrinkOff"
+          class="value basisAuto shrinkOn"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
-          data-title="secondaryValue"
         >
-          secondaryValue
+          List
         </div>
       </div>
+      <div
+        class="secondaryField secondaryValue shrinkOff"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+        data-title="secondaryValue"
+      >
+        secondaryValue
+      </div>
     </div>
   </li>
 </DocumentFragment>
@@ -461,19 +661,19 @@ exports[`ListItemWithRadio rendering the defult props 1`] = `
       </div>
     </div>
     <div
-      class="grow basis shrinkOn"
+      class="leftBox grow basis shrinkOff"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
-        class="flex cover coldir"
-        data-id="containerComponent"
-        data-selector-id="container"
-        data-test-id="containerComponent"
+        class="titleBox shrinkOff"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
       >
         <div
-          class="value shrinkOff"
+          class="value basisAuto shrinkOn"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"

package/lib/ListItem/props/propTypes.js

@@ -77,26 +77,29 @@ var ListItem_Props = {
   needMultiLineText: _propTypes["default"].bool,
   customClass: _propTypes["default"].shape({
     customListItem: _propTypes["default"].string,
-    customTickIcon: _propTypes["default"].string
+    customTickIcon: _propTypes["default"].string,
+    customValueRightPlaceholder: _propTypes["default"].string
   }),
   customProps: _propTypes["default"].shape({
     ListItemProps: _propTypes["default"].object
   }),
-  secondaryValue: _propTypes["default"].string
+  secondaryValue: _propTypes["default"].string,
+  renderValueRightPlaceholderNode: _propTypes["default"].oneOfType([_propTypes["default"].node, _propTypes["default"].func])
 };
 exports.ListItem_Props = ListItem_Props;
 var ListItemWithAvatar_Props = (_ListItemWithAvatar_P = {
   active: _propTypes["default"].bool,
   autoHover: _propTypes["default"].bool,
   avatarPalette: _propTypes["default"].string
-}, _defineProperty(_ListItemWithAvatar_P, "avatarPalette", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "dataId", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "dataSelectorId", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "disableTitle", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "getRef", _propTypes["default"].func), _defineProperty(_ListItemWithAvatar_P, "highlight", _propTypes["default"].bool), _defineProperty(_ListItemWithAvatar_P, "id", _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number])), _defineProperty(_ListItemWithAvatar_P, "imgSrc", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "index", _propTypes["default"].number), _defineProperty(_ListItemWithAvatar_P, "initial", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "isDisabled", _propTypes["default"].bool), _defineProperty(_ListItemWithAvatar_P, "isTeam", _propTypes["default"].bool), _defineProperty(_ListItemWithAvatar_P, "name", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "needAvatarTitle", _propTypes["default"].bool), _defineProperty(_ListItemWithAvatar_P, "needBorder", _propTypes["default"].bool), _defineProperty(_ListItemWithAvatar_P, "needTick", _propTypes["default"].bool), _defineProperty(_ListItemWithAvatar_P, "onClick", _propTypes["default"].func), _defineProperty(_ListItemWithAvatar_P, "onMouseEnter", _propTypes["default"].func), _defineProperty(_ListItemWithAvatar_P, "palette", _propTypes["default"].oneOf(['dark'])), _defineProperty(_ListItemWithAvatar_P, "size", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "title", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "value", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "secondaryValue", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "lhsAlignContent", _propTypes["default"].oneOf(['start', 'center', 'end'])), _defineProperty(_ListItemWithAvatar_P, "a11y", _propTypes["default"].shape({
+}, _defineProperty(_ListItemWithAvatar_P, "avatarPalette", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "dataId", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "dataSelectorId", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "disableTitle", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "getRef", _propTypes["default"].func), _defineProperty(_ListItemWithAvatar_P, "highlight", _propTypes["default"].bool), _defineProperty(_ListItemWithAvatar_P, "id", _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].number])), _defineProperty(_ListItemWithAvatar_P, "imgSrc", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "index", _propTypes["default"].number), _defineProperty(_ListItemWithAvatar_P, "initial", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "isDisabled", _propTypes["default"].bool), _defineProperty(_ListItemWithAvatar_P, "isTeam", _propTypes["default"].bool), _defineProperty(_ListItemWithAvatar_P, "name", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "needAvatarTitle", _propTypes["default"].bool), _defineProperty(_ListItemWithAvatar_P, "needBorder", _propTypes["default"].bool), _defineProperty(_ListItemWithAvatar_P, "needTick", _propTypes["default"].bool), _defineProperty(_ListItemWithAvatar_P, "onClick", _propTypes["default"].func), _defineProperty(_ListItemWithAvatar_P, "onMouseEnter", _propTypes["default"].func), _defineProperty(_ListItemWithAvatar_P, "palette", _propTypes["default"].oneOf(['dark'])), _defineProperty(_ListItemWithAvatar_P, "size", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "title", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "value", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "secondaryValue", _propTypes["default"].string), _defineProperty(_ListItemWithAvatar_P, "renderValueRightPlaceholderNode", _propTypes["default"].oneOfType([_propTypes["default"].node, _propTypes["default"].func])), _defineProperty(_ListItemWithAvatar_P, "lhsAlignContent", _propTypes["default"].oneOf(['start', 'center', 'end'])), _defineProperty(_ListItemWithAvatar_P, "a11y", _propTypes["default"].shape({
   role: _propTypes["default"].string,
   ariaSelected: _propTypes["default"].bool,
   ariaHidden: _propTypes["default"].bool
 })), _defineProperty(_ListItemWithAvatar_P, "customClass", _propTypes["default"].shape({
   customListItem: _propTypes["default"].string,
   customAvatar: _propTypes["default"].string,
-  customAvatarTeam: _propTypes["default"].string
+  customAvatarTeam: _propTypes["default"].string,
+  customValueRightPlaceholder: _propTypes["default"].string
 })), _defineProperty(_ListItemWithAvatar_P, "needMultiLineText", _propTypes["default"].bool), _defineProperty(_ListItemWithAvatar_P, "customProps", _propTypes["default"].shape({
   ListItemProps: _propTypes["default"].object,
   ContainerProps: _propTypes["default"].object,
@@ -123,6 +126,7 @@ var ListItemWithCheckBox_Props = {
   title: _propTypes["default"].string,
   value: _propTypes["default"].string,
   secondaryValue: _propTypes["default"].string,
+  renderValueRightPlaceholderNode: _propTypes["default"].oneOfType([_propTypes["default"].node, _propTypes["default"].func]),
   lhsAlignContent: _propTypes["default"].oneOf(['start', 'center', 'end']),
   lhsJustifyContent: _propTypes["default"].oneOf(['start', 'center', 'end']),
   a11y: _propTypes["default"].shape({
@@ -133,7 +137,8 @@ var ListItemWithCheckBox_Props = {
   customClass: _propTypes["default"].shape({
     customListItem: _propTypes["default"].string,
     customCheckBox: _propTypes["default"].string,
-    customLabel: _propTypes["default"].string
+    customLabel: _propTypes["default"].string,
+    customValueRightPlaceholder: _propTypes["default"].string
   }),
   customProps: _propTypes["default"].object
 };
@@ -161,6 +166,7 @@ var ListItemWithIcon_Props = {
   title: _propTypes["default"].string,
   value: _propTypes["default"].string,
   secondaryValue: _propTypes["default"].string,
+  renderValueRightPlaceholderNode: _propTypes["default"].oneOfType([_propTypes["default"].node, _propTypes["default"].func]),
   lhsAlignContent: _propTypes["default"].oneOf(['start', 'center', 'end']),
   lhsJustifyContent: _propTypes["default"].oneOf(['start', 'center', 'end']),
   a11y: _propTypes["default"].shape({
@@ -170,6 +176,7 @@ var ListItemWithIcon_Props = {
   }),
   needMultiLineText: _propTypes["default"].bool,
   customClass: _propTypes["default"].string,
+  customValueRightPlaceholderClass: _propTypes["default"].string,
   customProps: _propTypes["default"].shape({
     ListItemProps: _propTypes["default"].object
   }),
@@ -197,6 +204,7 @@ var ListItemWithRadio_Props = {
   title: _propTypes["default"].string,
   value: _propTypes["default"].string,
   secondaryValue: _propTypes["default"].string,
+  renderValueRightPlaceholderNode: _propTypes["default"].oneOfType([_propTypes["default"].node, _propTypes["default"].func]),
   lhsAlignContent: _propTypes["default"].oneOf(['start', 'center', 'end']),
   lhsJustifyContent: _propTypes["default"].oneOf(['start', 'center', 'end']),
   a11y: _propTypes["default"].shape({
@@ -207,7 +215,8 @@ var ListItemWithRadio_Props = {
   customClass: _propTypes["default"].shape({
     customListItem: _propTypes["default"].string,
     customRadio: _propTypes["default"].string,
-    customRadioWrap: _propTypes["default"].string
+    customRadioWrap: _propTypes["default"].string,
+    customValueRightPlaceholder: _propTypes["default"].string
   }),
   customProps: _propTypes["default"].object
 };

package/lib/MultiSelect/MultiSelect.js

@@ -330,6 +330,7 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
       var options = props.options,
           valueField = props.valueField,
           textField = props.textField,
+          secondaryField = props.secondaryField,
           prefixText = props.prefixText,
           disabledOptions = props.disabledOptions,
           allowValueFallback = props.allowValueFallback,
@@ -342,6 +343,7 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
         optionType: 'default',
         disabledOptions: disabledOptions,
         allowValueFallback: allowValueFallback,
+        secondaryField: secondaryField,
         searchFields: searchFields
       });
     }
@@ -1161,6 +1163,7 @@ 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;
       var _this$state9 = this.state,
@@ -1184,6 +1187,7 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
         noMoreText: i18nKeys.noMoreText || noMoreOptionsMessage
       });
       var isModel = (0, _isMobilePopover["default"])(needResponsive);
+      var SuggestionsProps = customProps.SuggestionsProps;
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: "".concat(_MultiSelectModule["default"].wrapper, " ").concat(isDisabled ? _MultiSelectModule["default"].disabled : '', " ").concat(isReadOnly ? _MultiSelectModule["default"].readOnly : '', " ").concat(disableAction ? (0, _CssProvider["default"])('isBlock') : '', " ").concat(borderColor === 'transparent' ? _MultiSelectModule["default"].transparentContainer : '', " ").concat(needEffect && !(isDisabled || isReadOnly) ? _MultiSelectModule["default"].effect : ''),
         "data-id": "".concat(isDisabled ? "".concat(dataId, "_disabled") : isReadOnly ? "".concat(dataId, "_readOnly") : dataId),
@@ -1242,7 +1246,7 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
         eleRef: this.suggestionContainerRef
       }, isSearching ? /*#__PURE__*/_react["default"].createElement("div", {
         className: _MultiSelectModule["default"][palette]
-      }, searchText) : suggestions.length ? /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], {
+      }, searchText) : suggestions.length ? /*#__PURE__*/_react["default"].createElement(_Suggestions["default"], _extends({
         key: searchStr.trim(),
         suggestions: suggestions,
         isVirtualizerEnabled: isVirtualizerEnabled,
@@ -1261,7 +1265,7 @@ var MultiSelectComponent = /*#__PURE__*/function (_React$Component) {
         },
         limit: limit,
         limitReachedMessage: limitReachedMessage
-      }) : /*#__PURE__*/_react["default"].createElement(_EmptyState["default"], {
+      }, SuggestionsProps)) : /*#__PURE__*/_react["default"].createElement(_EmptyState["default"], {
         isLoading: isFetchingOptions,
         options: options,
         searchString: searchStr,

package/lib/MultiSelect/Suggestions.js

@@ -213,7 +213,8 @@ var Suggestions = /*#__PURE__*/function (_React$PureComponent) {
         active: isActive,
         size: listItemSize,
         palette: palette,
-        a11y: list_a11y
+        a11y: list_a11y,
+        secondaryValue: secondaryValue
       }));
     }
   }, {

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

@@ -35,19 +35,19 @@ exports[`MultiSelectHeader rendering the basic value 1`] = `
       </div>
     </div>
     <div
-      class="grow basis shrinkOn"
+      class="leftBox grow basis shrinkOff"
       data-id="boxComponent"
       data-selector-id="box"
       data-test-id="boxComponent"
     >
       <div
-        class="flex cover coldir"
-        data-id="containerComponent"
-        data-selector-id="container"
-        data-test-id="containerComponent"
+        class="titleBox shrinkOff"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
       >
         <div
-          class="value shrinkOff"
+          class="value basisAuto shrinkOn"
           data-id="MultiSelectHeader_selectAll_Text"
           data-selector-id="box"
           data-test-id="MultiSelectHeader_selectAll_Text"