@zohodesk/components 1.0.0-temp-230.1 → 1.0.0-temp-234

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

@@ -60,13 +60,14 @@ export const ListItem_Props = {
   needMultiLineText: PropTypes.bool,
   customClass: PropTypes.shape({
     customListItem: PropTypes.string,
-    customTickIcon: PropTypes.string
+    customTickIcon: PropTypes.string,
+    customValueRightPlaceholder: PropTypes.string
   }),
   customProps: PropTypes.shape({
     ListItemProps: PropTypes.object
   }),
   secondaryValue: PropTypes.string,
-  renderBeforeChildren: PropTypes.node
+  renderValueRightPlaceholderNode: PropTypes.func
 };
 export const ListItemWithAvatar_Props = {
   active: PropTypes.bool,
@@ -95,6 +96,7 @@ export const ListItemWithAvatar_Props = {
   title: PropTypes.string,
   value: PropTypes.string,
   secondaryValue: PropTypes.string,
+  renderValueRightPlaceholderNode: PropTypes.func,
   lhsAlignContent: PropTypes.oneOf(['start', 'center', 'end']),
   a11y: PropTypes.shape({
     role: PropTypes.string,
@@ -104,7 +106,8 @@ export const ListItemWithAvatar_Props = {
   customClass: PropTypes.shape({
     customListItem: PropTypes.string,
     customAvatar: PropTypes.string,
-    customAvatarTeam: PropTypes.string
+    customAvatarTeam: PropTypes.string,
+    customValueRightPlaceholder: PropTypes.string
   }),
   needMultiLineText: PropTypes.bool,
   customProps: PropTypes.shape({
@@ -133,6 +136,7 @@ export const ListItemWithCheckBox_Props = {
   title: PropTypes.string,
   value: PropTypes.string,
   secondaryValue: PropTypes.string,
+  renderValueRightPlaceholderNode: PropTypes.func,
   lhsAlignContent: PropTypes.oneOf(['start', 'center', 'end']),
   lhsJustifyContent: PropTypes.oneOf(['start', 'center', 'end']),
   a11y: PropTypes.shape({
@@ -143,7 +147,8 @@ export const ListItemWithCheckBox_Props = {
   customClass: PropTypes.shape({
     customListItem: PropTypes.string,
     customCheckBox: PropTypes.string,
-    customLabel: PropTypes.string
+    customLabel: PropTypes.string,
+    customValueRightPlaceholder: PropTypes.string
   }),
   customProps: PropTypes.object
 };
@@ -170,6 +175,7 @@ export const ListItemWithIcon_Props = {
   title: PropTypes.string,
   value: PropTypes.string,
   secondaryValue: PropTypes.string,
+  renderValueRightPlaceholderNode: PropTypes.func,
   lhsAlignContent: PropTypes.oneOf(['start', 'center', 'end']),
   lhsJustifyContent: PropTypes.oneOf(['start', 'center', 'end']),
   a11y: PropTypes.shape({
@@ -179,6 +185,7 @@ export const ListItemWithIcon_Props = {
   }),
   needMultiLineText: PropTypes.bool,
   customClass: PropTypes.string,
+  customValueRightPlaceholderClass: PropTypes.string,
   customProps: PropTypes.shape({
     ListItemProps: PropTypes.object
   }),
@@ -205,6 +212,7 @@ export const ListItemWithRadio_Props = {
   title: PropTypes.string,
   value: PropTypes.string,
   secondaryValue: PropTypes.string,
+  renderValueRightPlaceholderNode: PropTypes.func,
   lhsAlignContent: PropTypes.oneOf(['start', 'center', 'end']),
   lhsJustifyContent: PropTypes.oneOf(['start', 'center', 'end']),
   a11y: PropTypes.shape({
@@ -215,7 +223,8 @@ export const ListItemWithRadio_Props = {
   customClass: PropTypes.shape({
     customListItem: PropTypes.string,
     customRadio: PropTypes.string,
-    customRadioWrap: PropTypes.string
+    customRadioWrap: PropTypes.string,
+    customValueRightPlaceholder: PropTypes.string
   }),
   customProps: PropTypes.object
 };

package/es/MultiSelect/AdvancedGroupMultiSelect.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { AdvancedGroupMultiSelect_propTypes } from "./props/propTypes";
 import { AdvancedGroupMultiSelect_defaultProps } from "./props/defaultProps";
+import { MULTISELECT_I18N_KEYS } from "./constants";
 /**** Components ****/
 
 import Loader from '@zohodesk/svg/lib/Loader/Loader';
@@ -185,7 +186,8 @@ class AdvancedGroupMultiSelect extends React.Component {
 
   handleSelectedOptionIdChange(selectedGroupOptions, normalizedFormatOptions, normalizedSelectedOptions) {
     const {
-      allowValueFallback
+      allowValueFallback,
+      limit
     } = this.props;
     let newSelectedOptions = selectedGroupOptions.map(option => optionIdGrouping(option.id, option.groupId));
     let selectedOptionsLength = newSelectedOptions.length;
@@ -197,7 +199,8 @@ class AdvancedGroupMultiSelect extends React.Component {
       selectedOptions: newSelectedOptions,
       normalizedFormatOptions: formatOptions,
       selectedOptionsLength,
-      allowValueFallback
+      allowValueFallback,
+      limit
     });
   }
 
@@ -390,7 +393,8 @@ class AdvancedGroupMultiSelect extends React.Component {
       getNextOptions,
       isPopupOpen,
       isPopupOpenOnEnter,
-      onKeyDown
+      onKeyDown,
+      limit
     } = this.props;
     let highLightedSelectOptionsLen = highLightedSelectOptions.length;
 
@@ -442,7 +446,7 @@ class AdvancedGroupMultiSelect extends React.Component {
           hoverIndex: hoverIndex + 1
         });
       }
-    } else if (keyCode === 13) {
+    } else if (keyCode === 13 && selectedOptions.length < limit) {
       //enter key
       let id = suggestions[hoverIndex] || {};
       isPopupOpen && !getIsEmptyValue(id) && this.handleSelectOption(id, null, null, e);
@@ -884,13 +888,15 @@ class AdvancedGroupMultiSelect extends React.Component {
       needEffect,
       autoComplete,
       getTargetRef,
-      isFocus
+      isFocus,
+      limit
     } = this.props;
     let {
-      clearText = 'Clear all'
+      clearText = MULTISELECT_I18N_KEYS.clearText,
+      limitReachedMessage = MULTISELECT_I18N_KEYS.limitReachedMessage
     } = i18nKeys;
     let {
-      clearLabel = 'Clear all'
+      clearLabel = MULTISELECT_I18N_KEYS.clearText
     } = a11y;
     i18nKeys = Object.assign({}, i18nKeys, {
       emptyText: i18nKeys.emptyText || emptyMessage,
@@ -1026,7 +1032,7 @@ class AdvancedGroupMultiSelect extends React.Component {
       }, /*#__PURE__*/React.createElement(Card, {
         customClass: `${style.box} ${style[`${palette}Box`]}`,
         onScroll: this.handleScroll
-      }, needSelectAll ? /*#__PURE__*/React.createElement(CardHeader, null, /*#__PURE__*/React.createElement(MultiSelectHeader, {
+      }, needSelectAll && !(limit >= 0) ? /*#__PURE__*/React.createElement(CardHeader, null, /*#__PURE__*/React.createElement(MultiSelectHeader, {
         onSelect: this.handleSelectAll,
         selectAllText: selectAllText,
         suggestions: suggestionOptionIds,
@@ -1065,6 +1071,8 @@ class AdvancedGroupMultiSelect extends React.Component {
           a11y: {
             role: 'option'
           },
+          limit: limit,
+          limitReachedMessage: limitReachedMessage,
           dataId: `${dataId}_Options`
         }));
       }) : /*#__PURE__*/React.createElement(EmptyState, {