@zohodesk/components 1.2.62 → 1.3.0

package/es/MultiSelect/AdvancedMultiSelect.js

@@ -63,7 +63,8 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
       searchStr
     } = this.state;
     const {
-      needLocalSearch
+      needLocalSearch,
+      searchFields
     } = this.props;
     const {
       suggestions,
@@ -72,7 +73,8 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
       options,
       selectedOptions: dummyArray,
       searchStr: getSearchString(searchStr),
-      needSearch: needLocalSearch
+      needSearch: needLocalSearch,
+      searchFields
     });
     this.suggestionsOrder = suggestionIds;
     return suggestions;
@@ -146,7 +148,10 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
       iconSize,
       prefixText,
       optionType,
-      disabledOptions
+      disabledOptions,
+      allowValueFallback,
+      searchFields,
+      secondaryField
     } = props;
     return this.formatOptions({
       options,
@@ -157,7 +162,10 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
       prefixText,
       optionType,
       iconSize,
-      disabledOptions
+      disabledOptions,
+      allowValueFallback,
+      searchFields,
+      secondaryField
     });
   }
 
@@ -168,7 +176,8 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
     } = this.state || {};
     const {
       selectedOptionsLimit,
-      selectedOptionDetails
+      selectedOptionDetails,
+      allowValueFallback
     } = props;
     showedSelectedOptionsCount = getIsEmptyValue(showedSelectedOptionsCount) ? selectedOptionsLimit : showedSelectedOptionsCount;
     const {
@@ -181,7 +190,8 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
     return this.getSelectedOptions({
       selectedOptions,
       normalizedFormatOptions: formatOptions,
-      selectedOptionsLength: showedSelectedOptionsCount
+      selectedOptionsLength: showedSelectedOptionsCount,
+      allowValueFallback: allowValueFallback
     });
   }
 
@@ -193,7 +203,8 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
       optionType,
       iconName,
       iconSize,
-      disabledOptions
+      disabledOptions,
+      allowValueFallback
     } = props;
     return this.formatSelectedOptions({
       options: selectedOptionDetails,
@@ -203,7 +214,8 @@ export class AdvancedMultiSelectComponent extends MultiSelectComponent {
       optionType,
       iconName,
       iconSize,
-      disabledOptions
+      disabledOptions,
+      allowValueFallback
     });
   }
 

package/es/MultiSelect/MultiSelect.js

@@ -216,7 +216,9 @@ export class MultiSelectComponent extends React.Component {
       valueField,
       textField,
       prefixText,
-      disabledOptions
+      disabledOptions,
+      allowValueFallback,
+      searchFields
     } = props;
     return this.formatOptions({
       options,
@@ -224,14 +226,20 @@ export class MultiSelectComponent extends React.Component {
       textField,
       prefixText,
       optionType: 'default',
-      disabledOptions
+      disabledOptions,
+      allowValueFallback,
+      searchFields
     });
   }
 
-  handleGetSelectedOptions(selectedOptions, normalizedFormatOptions) {
+  handleGetSelectedOptions(selectedOptions, normalizedFormatOptions, props) {
+    const {
+      allowValueFallback
+    } = props;
     return this.getSelectedOptions({
       selectedOptions,
-      normalizedFormatOptions
+      normalizedFormatOptions,
+      allowValueFallback
     });
   }
 
@@ -266,7 +274,8 @@ export class MultiSelectComponent extends React.Component {
     const {
       selectedOptions,
       needLocalSearch,
-      keepSelectedOptions
+      keepSelectedOptions,
+      searchFields
     } = this.props;
     const {
       suggestions,
@@ -276,7 +285,8 @@ export class MultiSelectComponent extends React.Component {
       selectedOptions,
       searchStr: getSearchString(searchStr),
       needSearch: needLocalSearch,
-      keepSelectedOptions
+      keepSelectedOptions,
+      searchFields
     });
     this.suggestionsOrder = suggestionIds;
     return suggestions;

package/es/MultiSelect/MultiSelect.module.css

@@ -200,7 +200,15 @@
   cursor: pointer;
   margin-top: var(--zd_size5) ;
   background-color: var(--zdt_multiselect_delete_bg);
-  border: 0;
+  border: 0
+}
+
+[dir=ltr] .more {
+  margin-right:var(--zd_size3) 
+}
+
+[dir=rtl] .more {
+  margin-left:var(--zd_size3) 
 }
 
 .rightPlaceholder{

package/es/MultiSelect/MultiSelectWithAvatar.js

@@ -41,7 +41,10 @@ class MultiSelectWithAvatarComponent extends MultiSelectComponent {
       valueField,
       textField,
       imageField,
-      disabledOptions
+      disabledOptions,
+      allowValueFallback,
+      searchFields,
+      secondaryField
     } = props;
     return this.formatOptions({
       options,
@@ -49,7 +52,10 @@ class MultiSelectWithAvatarComponent extends MultiSelectComponent {
       textField,
       imageField,
       optionType: 'avatar',
-      disabledOptions
+      disabledOptions,
+      allowValueFallback,
+      searchFields,
+      secondaryField
     });
   }
 

package/es/MultiSelect/Suggestions.js

@@ -46,6 +46,7 @@ export default class Suggestions extends React.PureComponent {
       const {
         id,
         value,
+        secondaryValue,
         photoURL,
         icon,
         optionType,
@@ -92,7 +93,8 @@ export default class Suggestions extends React.PureComponent {
           size: listItemSize,
           avatarPalette: avatarPalette,
           palette: palette,
-          a11y: list_a11y
+          a11y: list_a11y,
+          secondaryValue: secondaryValue
         });
       } else if (optionType === 'icon') {
         return /*#__PURE__*/React.createElement(ListItemWithIcon, { ...commonProps,
@@ -112,7 +114,8 @@ export default class Suggestions extends React.PureComponent {
           iconSize: iconSize,
           size: listItemSize,
           palette: palette,
-          a11y: list_a11y
+          a11y: list_a11y,
+          secondaryValue: secondaryValue
         });
       }
 

package/es/MultiSelect/__tests__/AdvancedMultiSelect.spec.js

@@ -9,4 +9,32 @@ describe('AdvancedMultiSelect', () => {
     } = render( /*#__PURE__*/React.createElement(AdvancedMultiSelect, null));
     expect(asFragment()).toMatchSnapshot();
   });
+  const options = [{
+    id: 1,
+    text: 'Apple'
+  }, {
+    id: 2,
+    text: 'Orange'
+  }, 'string test'];
+  test('rendering the options array with objects and string', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(AdvancedMultiSelect, {
+      isPopupOpen: true,
+      isPopupReady: true,
+      options: options
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
+  test('rendering the options array with only objects using allowValueFallback', () => {
+    const {
+      asFragment
+    } = render( /*#__PURE__*/React.createElement(AdvancedMultiSelect, {
+      isPopupOpen: true,
+      isPopupReady: true,
+      options: options,
+      allowValueFallback: false
+    }));
+    expect(asFragment()).toMatchSnapshot();
+  });
 });

package/es/MultiSelect/__tests__/__snapshots__/AdvancedMultiSelect.spec.js.snap

@@ -72,3 +72,393 @@ exports[`AdvancedMultiSelect rendering the defult props 1`] = `
   </div>
 </DocumentFragment>
 `;
+
+exports[`AdvancedMultiSelect rendering the options array with objects and string 1`] = `
+<DocumentFragment>
+  <div
+    class="wrapper   effect "
+    data-id="multiSelectComp"
+    data-selector-id="advancedMultiSelect"
+    data-test-id="multiSelectComp"
+  >
+    <div
+      class="container medium  hasBorder borderColor_default flex cover rowdir wrap vCenter"
+      data-id="containerComponent"
+      data-selector-id="container"
+      data-test-id="containerComponent"
+    >
+      <div
+        class="wrapper grow basisAuto shrinkOn"
+        data-id="multiSelectComp_textBox"
+        data-selector-id="box"
+        data-test-id="multiSelectComp_textBox"
+      >
+        <span
+          class=" custmSpan custmSpanMedium 
+              "
+        />
+        <div
+          class="container effect  custmInputWrapper  flex rowdir"
+          data-id="containerComponent"
+          data-selector-id="textBoxIcon"
+          data-test-id="containerComponent"
+        >
+          <div
+            class="grow basis shrinkOff"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <input
+              aria-controls="1"
+              aria-describedby="2"
+              aria-expanded="true"
+              aria-haspopup="true"
+              aria-owns="1"
+              autocomplete="off"
+              class="  container medium  default  effect  borderColor_default  "
+              data-id="textBoxIcon"
+              data-selector-id="textBoxIcon"
+              data-test-id="textBoxIcon"
+              maxlength="250"
+              role="combobox"
+              type="text"
+              value=""
+            />
+          </div>
+          <div
+            class="iconContainer  shrinkOff"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <div
+              class="flex cover rowdir"
+              data-id="containerComponent"
+              data-selector-id="container"
+              data-test-id="containerComponent"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      aria-multiselectable="true"
+      class="main container bottomMid default"
+      data-a11y-focus-main-area="true"
+      data-arrow-position="mid"
+      data-box-direction="bottom"
+      data-id="multiSelectComp_dropbox"
+      data-position="bottomMid"
+      data-selector-id="dropBox"
+      data-test-id="multiSelectComp_dropbox"
+      dot-ui-element="dropbox"
+      id="1"
+      role="listbox"
+      style="z-index: 4;"
+    >
+      <div
+        class="subContainer shadow boxPadding radius bounce defaultPalette"
+        data-id="multiSelectComp_dropbox_subcontainer"
+        data-selector-id="dropBox_subcontainer"
+        data-test-id="multiSelectComp_dropbox_subcontainer"
+        tabindex="-1"
+      >
+        <div
+          class="flex rowdir"
+          data-id="containerComponent"
+          data-selector-id="container"
+          data-test-id="containerComponent"
+        >
+          <div
+            class="grow basis shrinkOff"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <div
+              class="box flex cover coldir"
+              data-id="containerComponent"
+              data-selector-id="container"
+              data-test-id="containerComponent"
+            >
+              <div
+                class="small grow basis shrinkOn scrolly"
+                data-id="CardContent"
+                data-selector-id="cardContent"
+                data-test-id="CardContent"
+              >
+                <div
+                  class="flex coldir"
+                  data-id="containerComponent"
+                  data-selector-id="container"
+                  data-test-id="containerComponent"
+                  tabindex="0"
+                >
+                  <div
+                    class="shrinkOff"
+                    data-id="multiSelectComp_Options"
+                    data-selector-id="box"
+                    data-test-id="multiSelectComp_Options"
+                  >
+                    <li
+                      aria-label="Apple"
+                      aria-selected="false"
+                      class="list medium  default defaultHover  mediumwithTick  withBorder  flex rowdir vCenter"
+                      data-a11y-inset-focus="true"
+                      data-a11y-list-active="true"
+                      data-id="Apple"
+                      data-selector-id="listItem"
+                      data-test-id="Apple"
+                      data-title="Apple"
+                      role="option"
+                      tabindex="0"
+                    >
+                      <div
+                        class="value basisAuto shrinkOn"
+                        data-id="boxComponent"
+                        data-selector-id="box"
+                        data-test-id="boxComponent"
+                      >
+                        Apple
+                      </div>
+                    </li>
+                    <li
+                      aria-label="Orange"
+                      aria-selected="false"
+                      class="list medium  default   mediumwithTick  withBorder  flex rowdir vCenter"
+                      data-a11y-inset-focus="true"
+                      data-a11y-list-active="false"
+                      data-id="Orange"
+                      data-selector-id="listItem"
+                      data-test-id="Orange"
+                      data-title="Orange"
+                      role="option"
+                      tabindex="0"
+                    >
+                      <div
+                        class="value basisAuto shrinkOn"
+                        data-id="boxComponent"
+                        data-selector-id="box"
+                        data-test-id="boxComponent"
+                      >
+                        Orange
+                      </div>
+                    </li>
+                    <li
+                      aria-label="string test"
+                      aria-selected="false"
+                      class="list medium  default   mediumwithTick  withBorder  flex rowdir vCenter"
+                      data-a11y-inset-focus="true"
+                      data-a11y-list-active="false"
+                      data-id="string test"
+                      data-selector-id="listItem"
+                      data-test-id="string test"
+                      data-title="string test"
+                      role="option"
+                      tabindex="0"
+                    >
+                      <div
+                        class="value basisAuto shrinkOn"
+                        data-id="boxComponent"
+                        data-selector-id="box"
+                        data-test-id="boxComponent"
+                      >
+                        string test
+                      </div>
+                    </li>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`AdvancedMultiSelect rendering the options array with only objects using allowValueFallback 1`] = `
+<DocumentFragment>
+  <div
+    class="wrapper   effect "
+    data-id="multiSelectComp"
+    data-selector-id="advancedMultiSelect"
+    data-test-id="multiSelectComp"
+  >
+    <div
+      class="container medium  hasBorder borderColor_default flex cover rowdir wrap vCenter"
+      data-id="containerComponent"
+      data-selector-id="container"
+      data-test-id="containerComponent"
+    >
+      <div
+        class="wrapper grow basisAuto shrinkOn"
+        data-id="multiSelectComp_textBox"
+        data-selector-id="box"
+        data-test-id="multiSelectComp_textBox"
+      >
+        <span
+          class=" custmSpan custmSpanMedium 
+              "
+        />
+        <div
+          class="container effect  custmInputWrapper  flex rowdir"
+          data-id="containerComponent"
+          data-selector-id="textBoxIcon"
+          data-test-id="containerComponent"
+        >
+          <div
+            class="grow basis shrinkOff"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <input
+              aria-controls="1"
+              aria-describedby="2"
+              aria-expanded="true"
+              aria-haspopup="true"
+              aria-owns="1"
+              autocomplete="off"
+              class="  container medium  default  effect  borderColor_default  "
+              data-id="textBoxIcon"
+              data-selector-id="textBoxIcon"
+              data-test-id="textBoxIcon"
+              maxlength="250"
+              role="combobox"
+              type="text"
+              value=""
+            />
+          </div>
+          <div
+            class="iconContainer  shrinkOff"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <div
+              class="flex cover rowdir"
+              data-id="containerComponent"
+              data-selector-id="container"
+              data-test-id="containerComponent"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      aria-multiselectable="true"
+      class="main container bottomMid default"
+      data-a11y-focus-main-area="true"
+      data-arrow-position="mid"
+      data-box-direction="bottom"
+      data-id="multiSelectComp_dropbox"
+      data-position="bottomMid"
+      data-selector-id="dropBox"
+      data-test-id="multiSelectComp_dropbox"
+      dot-ui-element="dropbox"
+      id="1"
+      role="listbox"
+      style="z-index: 4;"
+    >
+      <div
+        class="subContainer shadow boxPadding radius bounce defaultPalette"
+        data-id="multiSelectComp_dropbox_subcontainer"
+        data-selector-id="dropBox_subcontainer"
+        data-test-id="multiSelectComp_dropbox_subcontainer"
+        tabindex="-1"
+      >
+        <div
+          class="flex rowdir"
+          data-id="containerComponent"
+          data-selector-id="container"
+          data-test-id="containerComponent"
+        >
+          <div
+            class="grow basis shrinkOff"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <div
+              class="box flex cover coldir"
+              data-id="containerComponent"
+              data-selector-id="container"
+              data-test-id="containerComponent"
+            >
+              <div
+                class="small grow basis shrinkOn scrolly"
+                data-id="CardContent"
+                data-selector-id="cardContent"
+                data-test-id="CardContent"
+              >
+                <div
+                  class="flex coldir"
+                  data-id="containerComponent"
+                  data-selector-id="container"
+                  data-test-id="containerComponent"
+                  tabindex="0"
+                >
+                  <div
+                    class="shrinkOff"
+                    data-id="multiSelectComp_Options"
+                    data-selector-id="box"
+                    data-test-id="multiSelectComp_Options"
+                  >
+                    <li
+                      aria-label="Apple"
+                      aria-selected="false"
+                      class="list medium  default defaultHover  mediumwithTick  withBorder  flex rowdir vCenter"
+                      data-a11y-inset-focus="true"
+                      data-a11y-list-active="true"
+                      data-id="Apple"
+                      data-selector-id="listItem"
+                      data-test-id="Apple"
+                      data-title="Apple"
+                      role="option"
+                      tabindex="0"
+                    >
+                      <div
+                        class="value basisAuto shrinkOn"
+                        data-id="boxComponent"
+                        data-selector-id="box"
+                        data-test-id="boxComponent"
+                      >
+                        Apple
+                      </div>
+                    </li>
+                    <li
+                      aria-label="Orange"
+                      aria-selected="false"
+                      class="list medium  default   mediumwithTick  withBorder  flex rowdir vCenter"
+                      data-a11y-inset-focus="true"
+                      data-a11y-list-active="false"
+                      data-id="Orange"
+                      data-selector-id="listItem"
+                      data-test-id="Orange"
+                      data-title="Orange"
+                      role="option"
+                      tabindex="0"
+                    >
+                      <div
+                        class="value basisAuto shrinkOn"
+                        data-id="boxComponent"
+                        data-selector-id="box"
+                        data-test-id="boxComponent"
+                      >
+                        Orange
+                      </div>
+                    </li>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;

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

@@ -13,27 +13,48 @@ exports[`MultiSelectHeader rendering the basic value 1`] = `
   >
     <div
       aria-hidden="true"
-      class="iconBox shrinkOff"
+      class="iconBox lhsBox lhsJustifyContent_center shrinkOff selfStart"
       data-id="MultiSelectHeader_selectAll_Icon"
       data-selector-id="box"
       data-test-id="MultiSelectHeader_selectAll_Icon"
     >
-      <i
-        aria-hidden="true"
-        class="zd_font_icons basic icon-androidd    "
-        data-id="fontIcon"
-        data-selector-id="fontIcon"
-        data-test-id="fontIcon"
-        style="--zd-iconfont-size: var(--zd_font_size15);"
-      />
+      <div
+        class="lhsBox_medium shrinkOff selfStart"
+        data-id="boxComponent"
+        data-selector-id="box"
+        data-test-id="boxComponent"
+      >
+        <i
+          aria-hidden="true"
+          class="zd_font_icons basic icon-androidd    "
+          data-id="fontIcon"
+          data-selector-id="fontIcon"
+          data-test-id="fontIcon"
+          style="--zd-iconfont-size: var(--zd_font_size15);"
+        />
+      </div>
     </div>
     <div
-      class="value grow basis shrinkOn"
-      data-id="MultiSelectHeader_selectAll_Text"
+      class="grow basis shrinkOn"
+      data-id="boxComponent"
       data-selector-id="box"
-      data-test-id="MultiSelectHeader_selectAll_Text"
+      data-test-id="boxComponent"
     >
-      List
+      <div
+        class="flex cover coldir"
+        data-id="containerComponent"
+        data-selector-id="container"
+        data-test-id="containerComponent"
+      >
+        <div
+          class="value shrinkOff"
+          data-id="MultiSelectHeader_selectAll_Text"
+          data-selector-id="box"
+          data-test-id="MultiSelectHeader_selectAll_Text"
+        >
+          List
+        </div>
+      </div>
     </div>
   </li>
 </DocumentFragment>