@zohodesk/components 1.4.17 → 1.4.18

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,12 +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
+  secondaryValue: PropTypes.string,
+  renderValueRightPlaceholderNode: PropTypes.oneOfType([PropTypes.node, PropTypes.func])
 };
 export const ListItemWithAvatar_Props = {
   active: PropTypes.bool,
@@ -94,6 +96,7 @@ export const ListItemWithAvatar_Props = {
   title: PropTypes.string,
   value: PropTypes.string,
   secondaryValue: PropTypes.string,
+  renderValueRightPlaceholderNode: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
   lhsAlignContent: PropTypes.oneOf(['start', 'center', 'end']),
   a11y: PropTypes.shape({
     role: PropTypes.string,
@@ -103,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({
@@ -132,6 +136,7 @@ export const ListItemWithCheckBox_Props = {
   title: PropTypes.string,
   value: PropTypes.string,
   secondaryValue: PropTypes.string,
+  renderValueRightPlaceholderNode: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
   lhsAlignContent: PropTypes.oneOf(['start', 'center', 'end']),
   lhsJustifyContent: PropTypes.oneOf(['start', 'center', 'end']),
   a11y: PropTypes.shape({
@@ -142,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
 };
@@ -169,6 +175,7 @@ export const ListItemWithIcon_Props = {
   title: PropTypes.string,
   value: PropTypes.string,
   secondaryValue: PropTypes.string,
+  renderValueRightPlaceholderNode: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
   lhsAlignContent: PropTypes.oneOf(['start', 'center', 'end']),
   lhsJustifyContent: PropTypes.oneOf(['start', 'center', 'end']),
   a11y: PropTypes.shape({
@@ -178,6 +185,7 @@ export const ListItemWithIcon_Props = {
   }),
   needMultiLineText: PropTypes.bool,
   customClass: PropTypes.string,
+  customValueRightPlaceholderClass: PropTypes.string,
   customProps: PropTypes.shape({
     ListItemProps: PropTypes.object
   }),
@@ -204,6 +212,7 @@ export const ListItemWithRadio_Props = {
   title: PropTypes.string,
   value: PropTypes.string,
   secondaryValue: PropTypes.string,
+  renderValueRightPlaceholderNode: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
   lhsAlignContent: PropTypes.oneOf(['start', 'center', 'end']),
   lhsJustifyContent: PropTypes.oneOf(['start', 'center', 'end']),
   a11y: PropTypes.shape({
@@ -214,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/MultiSelect.js

@@ -249,6 +249,7 @@ export class MultiSelectComponent extends React.Component {
       options,
       valueField,
       textField,
+      secondaryField,
       prefixText,
       disabledOptions,
       allowValueFallback,
@@ -262,6 +263,7 @@ export class MultiSelectComponent extends React.Component {
       optionType: 'default',
       disabledOptions,
       allowValueFallback,
+      secondaryField,
       searchFields
     });
   }
@@ -1085,6 +1087,7 @@ export class MultiSelectComponent extends React.Component {
       isLoading,
       selectAllText,
       needSelectAll,
+      customProps,
       isVirtualizerEnabled,
       limit
     } = this.props;
@@ -1109,6 +1112,9 @@ export class MultiSelectComponent extends React.Component {
       noMoreText: i18nKeys.noMoreText || noMoreOptionsMessage
     });
     let isModel = isMobilePopover(needResponsive);
+    let {
+      SuggestionsProps
+    } = customProps;
     return /*#__PURE__*/React.createElement("div", {
       className: `${style.wrapper} ${isDisabled ? style.disabled : ''} ${isReadOnly ? style.readOnly : ''} ${disableAction ? CssProvider('isBlock') : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''} ${needEffect && !(isDisabled || isReadOnly) ? style.effect : ''}`,
       "data-id": `${isDisabled ? `${dataId}_disabled` : isReadOnly ? `${dataId}_readOnly` : dataId}`,
@@ -1185,7 +1191,8 @@ export class MultiSelectComponent extends React.Component {
         role: 'option'
       },
       limit: limit,
-      limitReachedMessage: limitReachedMessage
+      limitReachedMessage: limitReachedMessage,
+      ...SuggestionsProps
     }) : /*#__PURE__*/React.createElement(EmptyState, {
       isLoading: isFetchingOptions,
       options: options,

package/es/MultiSelect/Suggestions.js

@@ -160,7 +160,8 @@ export default class Suggestions extends React.PureComponent {
       active: isActive,
       size: listItemSize,
       palette: palette,
-      a11y: list_a11y
+      a11y: list_a11y,
+      secondaryValue: secondaryValue
     });
   }
 

package/es/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"

package/es/MultiSelect/props/propTypes.js

@@ -120,7 +120,8 @@ export const MultiSelect_propTypes = {
   allowValueFallback: PropTypes.bool,
   renderCustomClearComponent: PropTypes.func,
   renderCustomToggleIndicator: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
-  limit: PropTypes.number
+  limit: PropTypes.number,
+  secondaryField: PropTypes.string
 };
 export const MultiSelectHeader_propTypes = {
   dataId: PropTypes.string,
@@ -139,7 +140,6 @@ export const MultiSelectWithAvatar_propTypes = {
     SuggestionsProps: PropTypes.object,
     DropBoxProps: PropTypes.object
   }),
-  secondaryField: PropTypes.string,
   ...MultiSelect_propTypes
 };
 export const SelectedOptions_propTypes = {
@@ -286,7 +286,6 @@ export const AdvancedMultiSelect_propTypes = { ...MultiSelect_propTypes,
   prefixText: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
   //For grouping multiSelect
   optionType: PropTypes.oneOf(['default', 'avatar', 'icon']),
-  secondaryField: PropTypes.string,
   dataIdClearIcon: PropTypes.string,
   dataIdLoading: PropTypes.string,
   dataIdMultiSelectComp: PropTypes.string,