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

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

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`ListItemWithRadio ListItemWithRadio with renderValueRightPlaceholderNode & it's custom class 1`] = `
+exports[`ListItemWithRadio ListItemWithRadio with secondaryValue  text and LHS align center 1`] = `
 <DocumentFragment>
   <li
     class="list medium  default     withBorder  flex rowdir vCenter"
@@ -12,13 +12,13 @@ exports[`ListItemWithRadio ListItemWithRadio with renderValueRightPlaceholderNod
     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"
@@ -65,19 +65,19 @@ exports[`ListItemWithRadio ListItemWithRadio with renderValueRightPlaceholderNod
       </div>
     </div>
     <div
-      class="leftBox grow basis shrinkOff"
+      class="grow basis shrinkOn"
       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"
+        class="flex cover coldir"
+        data-id="containerComponent"
+        data-selector-id="container"
+        data-test-id="containerComponent"
       >
         <div
-          class="value basisAuto shrinkOn"
+          class="value shrinkOff"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
@@ -85,14 +85,13 @@ exports[`ListItemWithRadio ListItemWithRadio with renderValueRightPlaceholderNod
           List
         </div>
         <div
-          class="customValueRightPlaceholderClass shrinkOff"
+          class="secondaryField secondaryValue shrinkOff"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
+          data-title="secondaryValue"
         >
-          <div>
-            Custom Placeholder
-          </div>
+          secondaryValue
         </div>
       </div>
     </div>
@@ -100,7 +99,7 @@ exports[`ListItemWithRadio ListItemWithRadio with renderValueRightPlaceholderNod
 </DocumentFragment>
 `;
 
-exports[`ListItemWithRadio ListItemWithRadio with renderValueRightPlaceholderNode 1`] = `
+exports[`ListItemWithRadio ListItemWithRadio with secondaryValue  text and LHS align end 1`] = `
 <DocumentFragment>
   <li
     class="list medium  default     withBorder  flex rowdir vCenter"
@@ -112,13 +111,13 @@ exports[`ListItemWithRadio ListItemWithRadio with renderValueRightPlaceholderNod
     tabindex="0"
   >
     <div
-      class="iconBox lhsBox lhsJustifyContent_center shrinkOff selfStart"
+      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 selfStart"
+        class="lhsBox_medium shrinkOff selfEnd"
         data-id="boxComponent"
         data-selector-id="box"
         data-test-id="boxComponent"
@@ -165,19 +164,19 @@ exports[`ListItemWithRadio ListItemWithRadio with renderValueRightPlaceholderNod
       </div>
     </div>
     <div
-      class="leftBox grow basis shrinkOff"
+      class="grow basis shrinkOn"
       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"
+        class="flex cover coldir"
+        data-id="containerComponent"
+        data-selector-id="container"
+        data-test-id="containerComponent"
       >
         <div
-          class="value basisAuto shrinkOn"
+          class="value shrinkOff"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
@@ -185,14 +184,13 @@ exports[`ListItemWithRadio ListItemWithRadio with renderValueRightPlaceholderNod
           List
         </div>
         <div
-          class="shrinkOff"
+          class="secondaryField secondaryValue shrinkOff"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
+          data-title="secondaryValue"
         >
-          <div>
-            Custom Placeholder
-          </div>
+          secondaryValue
         </div>
       </div>
     </div>
@@ -200,7 +198,7 @@ exports[`ListItemWithRadio ListItemWithRadio with renderValueRightPlaceholderNod
 </DocumentFragment>
 `;
 
-exports[`ListItemWithRadio ListItemWithRadio with secondaryValue  text and LHS align center 1`] = `
+exports[`ListItemWithRadio ListItemWithRadio with secondaryValue 1`] = `
 <DocumentFragment>
   <li
     class="list medium  default     withBorder  flex rowdir vCenter"
@@ -212,13 +210,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"
@@ -265,140 +263,41 @@ exports[`ListItemWithRadio ListItemWithRadio with secondaryValue  text and LHS a
       </div>
     </div>
     <div
-      class="leftBox grow basis shrinkOff"
+      class="grow basis shrinkOn"
       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"
+        class="flex cover coldir"
+        data-id="containerComponent"
+        data-selector-id="container"
+        data-test-id="containerComponent"
       >
         <div
-          class="value basisAuto shrinkOn"
+          class="value shrinkOff"
           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
-          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"
+          class="secondaryField secondaryValue shrinkOff"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
+          data-title="secondaryValue"
         >
-          List
+          secondaryValue
         </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 1`] = `
+exports[`ListItemWithRadio ListItemWithRadio with secondaryValue text and LHS align start 1`] = `
 <DocumentFragment>
   <li
     class="list medium  default     withBorder  flex rowdir vCenter"
@@ -463,134 +362,35 @@ exports[`ListItemWithRadio ListItemWithRadio with secondaryValue 1`] = `
       </div>
     </div>
     <div
-      class="leftBox grow basis shrinkOff"
+      class="grow basis shrinkOn"
       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"
+        class="flex cover coldir"
+        data-id="containerComponent"
+        data-selector-id="container"
+        data-test-id="containerComponent"
       >
         <div
-          class="value basisAuto shrinkOn"
+          class="value shrinkOff"
           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="value basisAuto shrinkOn"
+          class="secondaryField secondaryValue shrinkOff"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"
+          data-title="secondaryValue"
         >
-          List
+          secondaryValue
         </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>
@@ -661,19 +461,19 @@ exports[`ListItemWithRadio rendering the defult props 1`] = `
       </div>
     </div>
     <div
-      class="leftBox grow basis shrinkOff"
+      class="grow basis shrinkOn"
       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"
+        class="flex cover coldir"
+        data-id="containerComponent"
+        data-selector-id="container"
+        data-test-id="containerComponent"
       >
         <div
-          class="value basisAuto shrinkOn"
+          class="value shrinkOff"
           data-id="boxComponent"
           data-selector-id="box"
           data-test-id="boxComponent"

package/es/ListItem/props/propTypes.js

@@ -60,14 +60,12 @@ export const ListItem_Props = {
   needMultiLineText: PropTypes.bool,
   customClass: PropTypes.shape({
     customListItem: PropTypes.string,
-    customTickIcon: PropTypes.string,
-    customValueRightPlaceholder: PropTypes.string
+    customTickIcon: PropTypes.string
   }),
   customProps: PropTypes.shape({
     ListItemProps: PropTypes.object
   }),
-  secondaryValue: PropTypes.string,
-  renderValueRightPlaceholderNode: PropTypes.func
+  secondaryValue: PropTypes.string
 };
 export const ListItemWithAvatar_Props = {
   active: PropTypes.bool,
@@ -96,7 +94,6 @@ 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,
@@ -106,8 +103,7 @@ export const ListItemWithAvatar_Props = {
   customClass: PropTypes.shape({
     customListItem: PropTypes.string,
     customAvatar: PropTypes.string,
-    customAvatarTeam: PropTypes.string,
-    customValueRightPlaceholder: PropTypes.string
+    customAvatarTeam: PropTypes.string
   }),
   needMultiLineText: PropTypes.bool,
   customProps: PropTypes.shape({
@@ -136,7 +132,6 @@ 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({
@@ -147,8 +142,7 @@ export const ListItemWithCheckBox_Props = {
   customClass: PropTypes.shape({
     customListItem: PropTypes.string,
     customCheckBox: PropTypes.string,
-    customLabel: PropTypes.string,
-    customValueRightPlaceholder: PropTypes.string
+    customLabel: PropTypes.string
   }),
   customProps: PropTypes.object
 };
@@ -175,7 +169,6 @@ 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({
@@ -185,7 +178,6 @@ export const ListItemWithIcon_Props = {
   }),
   needMultiLineText: PropTypes.bool,
   customClass: PropTypes.string,
-  customValueRightPlaceholderClass: PropTypes.string,
   customProps: PropTypes.shape({
     ListItemProps: PropTypes.object
   }),
@@ -212,7 +204,6 @@ 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({
@@ -223,8 +214,7 @@ export const ListItemWithRadio_Props = {
   customClass: PropTypes.shape({
     customListItem: PropTypes.string,
     customRadio: PropTypes.string,
-    customRadioWrap: PropTypes.string,
-    customValueRightPlaceholder: PropTypes.string
+    customRadioWrap: PropTypes.string
   }),
   customProps: PropTypes.object
 };

package/es/MultiSelect/MultiSelect.js

@@ -225,7 +225,6 @@ export class MultiSelectComponent extends React.Component {
       options,
       valueField,
       textField,
-      secondaryField,
       prefixText,
       disabledOptions,
       allowValueFallback,
@@ -239,7 +238,6 @@ export class MultiSelectComponent extends React.Component {
       optionType: 'default',
       disabledOptions,
       allowValueFallback,
-      secondaryField,
       searchFields
     });
   }
@@ -1063,7 +1061,6 @@ export class MultiSelectComponent extends React.Component {
       isLoading,
       selectAllText,
       needSelectAll,
-      customProps,
       isVirtualizerEnabled,
       limit
     } = this.props;
@@ -1088,9 +1085,6 @@ 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}`,
@@ -1166,8 +1160,7 @@ export class MultiSelectComponent extends React.Component {
         role: 'option'
       },
       limit: limit,
-      limitReachedMessage: limitReachedMessage,
-      ...SuggestionsProps
+      limitReachedMessage: limitReachedMessage
     }) : /*#__PURE__*/React.createElement(EmptyState, {
       isLoading: isFetchingOptions,
       options: options,

package/es/Select/GroupSelect.js

@@ -622,8 +622,7 @@ export class GroupSelectComponent extends PureComponent {
     let ariaErrorId = this.getNextAriaId();
     let {
       TextBoxIconProps = {},
-      TextBoxProps = {},
-      SuggestionsProps
+      TextBoxProps = {}
     } = customProps;
     return /*#__PURE__*/React.createElement("div", {
       className: `${style.container} ${style[`box_${size}`]} ${isReadOnly ? style.readonly : ''} ${borderColor === 'transparent' ? style.transparentContainer : ''} ${iconOnHover && (isReadOnly || isDisabled) ? style.iconOnHoverReadonly : iconOnHover && !(isReadOnly || isDisabled) ? style.iconOnHoverStyle : ''}`,
@@ -792,8 +791,7 @@ export class GroupSelectComponent extends PureComponent {
             ariaParentRole: 'listbox',
             role: 'option'
           },
-          dataId: `${dataId}_Options`,
-          ...SuggestionsProps
+          dataId: `${dataId}_Options`
         }));
       }) : /*#__PURE__*/React.createElement(EmptyState, {
         options: revampedGroups,

package/es/Select/Select.js

@@ -265,9 +265,7 @@ export class SelectComponent extends Component {
       valueField,
       textField,
       allowValueFallback,
-      customProps = dummyObj,
-      searchFields,
-      secondaryField
+      customProps = dummyObj
     } = props;
     let {
       listItemProps = dummyObj
@@ -276,8 +274,6 @@ export class SelectComponent extends Component {
       options,
       valueField,
       textField,
-      secondaryField,
-      searchFields,
       listItemProps,
       allowValueFallback
     });
@@ -447,7 +443,6 @@ export class SelectComponent extends Component {
   handleFilterSuggestions() {
     let {
       needLocalSearch,
-      searchFields,
       excludeOptions = dummyArray // needSearch
 
     } = this.props;
@@ -467,7 +462,6 @@ export class SelectComponent extends Component {
       options,
       selectedOptions: excludeOptions,
       searchStr,
-      searchFields,
       needSearch: needLocalSearch
     });
     this.optionsOrder = suggestionIds;