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

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

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`MultiSelect Should render with renderCustomSelectedValue 1`] = `
+exports[`MultiSelect rendering the defult props 1`] = `
 <DocumentFragment>
   <div
     class="wrapper     effect"
@@ -25,10 +25,10 @@ exports[`MultiSelect Should render with renderCustomSelectedValue 1`] = `
           "
         />
         <div
-          class="varClass customContainer   effect     container custmInputWrapper  flex rowdir"
-          data-id="multiSelect_textBox"
+          class="container effect  custmInputWrapper  flex rowdir"
+          data-id="containerComponent"
           data-selector-id="textBoxIcon"
-          data-test-id="multiSelect_textBox"
+          data-test-id="containerComponent"
         >
           <div
             class="grow basis shrinkOff"
@@ -85,7 +85,7 @@ exports[`MultiSelect Should render with renderCustomSelectedValue 1`] = `
 </DocumentFragment>
 `;
 
-exports[`MultiSelect rendering the defult props 1`] = `
+exports[`MultiSelect rendering with limit feature 1`] = `
 <DocumentFragment>
   <div
     class="wrapper     effect"
@@ -99,6 +99,156 @@ exports[`MultiSelect rendering the defult props 1`] = `
       data-selector-id="container"
       data-test-id="containerComponent"
     >
+      <div
+        class="tag medium shrinkOff"
+        data-id="multiSelect_selectedOptions"
+        data-selector-id="box"
+        data-test-id="multiSelect_selectedOptions"
+      >
+        <div
+          aria-labelledby="5"
+          class="container effect    medium lgRadius danger  pointer "
+          data-id="tag_Tag"
+          data-selector-id="tag"
+          data-test-id="tag_Tag"
+          data-title="text1"
+          tabindex="0"
+        >
+          <div
+            aria-hidden="true"
+            class="text mediumtext"
+            id="5"
+          >
+            text1
+          </div>
+          <button
+            aria-label="Delete"
+            class="buttonReset close 
+            lgRadiusClose 
+             closedanger"
+            data-id="tag_RemoveTag"
+            data-test-id="tag_RemoveTag"
+            type="button"
+            value="text"
+          >
+            <div
+              class="flex cover coldir both"
+              data-id="containerComponent"
+              data-selector-id="container"
+              data-test-id="containerComponent"
+            >
+              <i
+                aria-hidden="true"
+                class="zd_font_icons basic icon-close2 fbold   "
+                data-id="fontIcon"
+                data-selector-id="fontIcon"
+                data-test-id="fontIcon"
+                style="--zd-iconfont-size: var(--zd_font_size8);"
+              />
+            </div>
+          </button>
+        </div>
+      </div>
+      <div
+        class="tag medium shrinkOff"
+        data-id="multiSelect_selectedOptions"
+        data-selector-id="box"
+        data-test-id="multiSelect_selectedOptions"
+      >
+        <div
+          aria-labelledby="6"
+          class="container effect    medium lgRadius danger  pointer "
+          data-id="tag_Tag"
+          data-selector-id="tag"
+          data-test-id="tag_Tag"
+          data-title="text2"
+          tabindex="0"
+        >
+          <div
+            aria-hidden="true"
+            class="text mediumtext"
+            id="6"
+          >
+            text2
+          </div>
+          <button
+            aria-label="Delete"
+            class="buttonReset close 
+            lgRadiusClose 
+             closedanger"
+            data-id="tag_RemoveTag"
+            data-test-id="tag_RemoveTag"
+            type="button"
+            value="text"
+          >
+            <div
+              class="flex cover coldir both"
+              data-id="containerComponent"
+              data-selector-id="container"
+              data-test-id="containerComponent"
+            >
+              <i
+                aria-hidden="true"
+                class="zd_font_icons basic icon-close2 fbold   "
+                data-id="fontIcon"
+                data-selector-id="fontIcon"
+                data-test-id="fontIcon"
+                style="--zd-iconfont-size: var(--zd_font_size8);"
+              />
+            </div>
+          </button>
+        </div>
+      </div>
+      <div
+        class="tag medium shrinkOff"
+        data-id="multiSelect_selectedOptions"
+        data-selector-id="box"
+        data-test-id="multiSelect_selectedOptions"
+      >
+        <div
+          aria-labelledby="7"
+          class="container effect    medium lgRadius danger  pointer "
+          data-id="tag_Tag"
+          data-selector-id="tag"
+          data-test-id="tag_Tag"
+          data-title="text3"
+          tabindex="0"
+        >
+          <div
+            aria-hidden="true"
+            class="text mediumtext"
+            id="7"
+          >
+            text3
+          </div>
+          <button
+            aria-label="Delete"
+            class="buttonReset close 
+            lgRadiusClose 
+             closedanger"
+            data-id="tag_RemoveTag"
+            data-test-id="tag_RemoveTag"
+            type="button"
+            value="text"
+          >
+            <div
+              class="flex cover coldir both"
+              data-id="containerComponent"
+              data-selector-id="container"
+              data-test-id="containerComponent"
+            >
+              <i
+                aria-hidden="true"
+                class="zd_font_icons basic icon-close2 fbold   "
+                data-id="fontIcon"
+                data-selector-id="fontIcon"
+                data-test-id="fontIcon"
+                style="--zd-iconfont-size: var(--zd_font_size8);"
+              />
+            </div>
+          </button>
+        </div>
+      </div>
       <div
         class="wrapper grow basisAuto shrinkOn"
         data-id="boxComponent"
@@ -106,14 +256,14 @@ exports[`MultiSelect rendering the defult props 1`] = `
         data-test-id="boxComponent"
       >
         <span
-          class=" custmSpan custmSpanMedium 
+          class=" custmSpan custmSpanMedium clearIconSpace
           "
         />
         <div
-          class="varClass customContainer   effect     container custmInputWrapper  flex rowdir"
-          data-id="multiSelect_textBox"
+          class="container effect  custmInputWrapper  flex rowdir"
+          data-id="containerComponent"
           data-selector-id="textBoxIcon"
-          data-test-id="multiSelect_textBox"
+          data-test-id="containerComponent"
         >
           <div
             class="grow basis shrinkOff"
@@ -131,6 +281,7 @@ exports[`MultiSelect rendering the defult props 1`] = `
               data-selector-id="textBoxIcon"
               data-test-id="multiSelect_textBox"
               maxlength="250"
+              placeholder=""
               role="combobox"
               type="text"
               value=""
@@ -159,7 +310,24 @@ exports[`MultiSelect rendering the defult props 1`] = `
                   data-id="containerComponent"
                   data-selector-id="container"
                   data-test-id="containerComponent"
-                />
+                >
+                  <button
+                    class="delete defaultDelete shrinkOff"
+                    data-id="multiSelect_clearIcon"
+                    data-selector-id="box"
+                    data-test-id="multiSelect_clearIcon"
+                    data-title="Clear Selected Items"
+                  >
+                    <i
+                      aria-hidden="true"
+                      class="zd_font_icons basic icon-delete    rtl "
+                      data-id="fontIcon"
+                      data-selector-id="fontIcon"
+                      data-test-id="fontIcon"
+                      style="--zd-iconfont-size: var(--zd_font_size15);"
+                    />
+                  </button>
+                </div>
               </div>
             </div>
           </div>

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

@@ -25,10 +25,10 @@ exports[`MultiSelectWithAvatar rendering the defult props 1`] = `
           "
         />
         <div
-          class="varClass customContainer   effect     container custmInputWrapper  flex rowdir"
-          data-id="multiSelectWithAvatar_textBox"
+          class="container effect  custmInputWrapper  flex rowdir"
+          data-id="containerComponent"
           data-selector-id="textBoxIcon"
-          data-test-id="multiSelectWithAvatar_textBox"
+          data-test-id="containerComponent"
         >
           <div
             class="grow basis shrinkOff"

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

@@ -1,20 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`SelectedOptions Should render with renderCustomSelectedValue 1`] = `
-<DocumentFragment>
-  <div
-    class="tag medium shrinkOff"
-    data-id="selectedOptions"
-    data-selector-id="box"
-    data-test-id="selectedOptions"
-  >
-    <span>
-       SelectedOptions Custom Value
-    </span>
-  </div>
-</DocumentFragment>
-`;
-
 exports[`SelectedOptions rendering the basic select options 1`] = `
 <DocumentFragment>
   <div

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

@@ -1,6 +1,25 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Suggestions Should render with renderBeforeChildren 1`] = `
+exports[`Suggestions rendering the defult props 1`] = `
+<DocumentFragment>
+  <div
+    class="flex coldir"
+    data-id="containerComponent"
+    data-selector-id="container"
+    data-test-id="containerComponent"
+    tabindex="0"
+  >
+    <div
+      class="shrinkOff"
+      data-id="undefined"
+      data-selector-id="box"
+      data-test-id="undefined"
+    />
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Suggestions rendering with limit props 1`] = `
 <DocumentFragment>
   <div
     class="flex coldir"
@@ -16,16 +35,18 @@ exports[`Suggestions Should render with renderBeforeChildren 1`] = `
       data-test-id="undefined"
     >
       <li
-        aria-label="Suggestions Option 1"
-        aria-selected="false"
-        class="list medium  default     withBorder  flex rowdir vCenter"
+        aria-label="text2"
+        aria-selected="true"
+        class="list medium  default activedefault    activewithBorder  flex rowdir vCenter"
         data-a11y-inset-focus="true"
         data-a11y-list-active="false"
-        data-id="Suggestions Option 1"
+        data-id="text2"
+        data-selected="true"
         data-selector-id="listItem"
-        data-test-id="Suggestions Option 1"
-        data-title="Suggestions Option 1"
+        data-test-id="text2"
+        data-title="text2"
         role="option"
+        style="color: red;"
         tabindex="0"
       >
         <div
@@ -41,22 +62,297 @@ exports[`Suggestions Should render with renderBeforeChildren 1`] = `
             data-test-id="boxComponent"
           >
             <div
-              class="beforeChild basisAuto shrinkOn"
+              class="value basisAuto shrinkOn"
               data-id="boxComponent"
               data-selector-id="box"
               data-test-id="boxComponent"
             >
-              <span>
-                Suggestions Before Children
-              </span>
+              text2
             </div>
+          </div>
+        </div>
+      </li>
+      <li
+        aria-label="text3"
+        aria-selected="true"
+        class="list medium  default activedefault    activewithBorder  flex rowdir vCenter"
+        data-a11y-inset-focus="true"
+        data-a11y-list-active="false"
+        data-id="text3"
+        data-selected="true"
+        data-selector-id="listItem"
+        data-test-id="text3"
+        data-title="text3"
+        role="option"
+        style="color: blue;"
+        tabindex="0"
+      >
+        <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"
             >
-              Suggestions Option 1
+              text3
+            </div>
+          </div>
+        </div>
+      </li>
+      <li
+        aria-label="text4"
+        aria-selected="true"
+        class="list medium  default activedefault    activewithBorder  flex rowdir vCenter"
+        data-a11y-inset-focus="true"
+        data-a11y-list-active="false"
+        data-id="text4"
+        data-selected="true"
+        data-selector-id="listItem"
+        data-test-id="text4"
+        data-title="text4"
+        role="option"
+        tabindex="0"
+      >
+        <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"
+            >
+              text4
+            </div>
+          </div>
+        </div>
+      </li>
+      <li
+        aria-label="text5"
+        aria-selected="false"
+        class="list medium  default    disable withBorder  flex rowdir vCenter"
+        data-a11y-inset-focus="true"
+        data-a11y-list-active="false"
+        data-id="text5"
+        data-selector-id="listItem"
+        data-test-id="text5"
+        data-title="Limit Reached"
+        role="option"
+      >
+        <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"
+            >
+              text5
+            </div>
+          </div>
+        </div>
+      </li>
+      <li
+        aria-label="text6"
+        aria-selected="false"
+        class="list medium  default    disable withBorder  flex rowdir vCenter"
+        data-a11y-inset-focus="true"
+        data-a11y-list-active="false"
+        data-id="text6"
+        data-selector-id="listItem"
+        data-test-id="text6"
+        data-title="Limit Reached"
+        role="option"
+      >
+        <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"
+            >
+              text6
+            </div>
+          </div>
+        </div>
+      </li>
+      <li
+        aria-label="text7"
+        aria-selected="false"
+        class="list medium  default    disable withBorder  flex rowdir vCenter"
+        data-a11y-inset-focus="true"
+        data-a11y-list-active="false"
+        data-id="text7"
+        data-selector-id="listItem"
+        data-test-id="text7"
+        data-title="Limit Reached"
+        role="option"
+      >
+        <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"
+            >
+              text7
+            </div>
+          </div>
+        </div>
+      </li>
+      <li
+        aria-label="text8"
+        aria-selected="false"
+        class="list medium  default    disable withBorder  flex rowdir vCenter"
+        data-a11y-inset-focus="true"
+        data-a11y-list-active="false"
+        data-id="text8"
+        data-selector-id="listItem"
+        data-test-id="text8"
+        data-title="Limit Reached"
+        role="option"
+      >
+        <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"
+            >
+              text8
+            </div>
+          </div>
+        </div>
+      </li>
+      <li
+        aria-label="text9"
+        aria-selected="false"
+        class="list medium  default    disable withBorder  flex rowdir vCenter"
+        data-a11y-inset-focus="true"
+        data-a11y-list-active="false"
+        data-id="text9"
+        data-selector-id="listItem"
+        data-test-id="text9"
+        data-title="Limit Reached"
+        role="option"
+      >
+        <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"
+            >
+              text9
+            </div>
+          </div>
+        </div>
+      </li>
+      <li
+        aria-label="text10"
+        aria-selected="false"
+        class="list medium  default    disable withBorder  flex rowdir vCenter"
+        data-a11y-inset-focus="true"
+        data-a11y-list-active="false"
+        data-id="text10"
+        data-selector-id="listItem"
+        data-test-id="text10"
+        data-title="Limit Reached"
+        role="option"
+      >
+        <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"
+            >
+              text10
             </div>
           </div>
         </div>
@@ -65,22 +361,3 @@ exports[`Suggestions Should render with renderBeforeChildren 1`] = `
   </div>
 </DocumentFragment>
 `;
-
-exports[`Suggestions rendering the defult props 1`] = `
-<DocumentFragment>
-  <div
-    class="flex coldir"
-    data-id="containerComponent"
-    data-selector-id="container"
-    data-test-id="containerComponent"
-    tabindex="0"
-  >
-    <div
-      class="shrinkOff"
-      data-id="undefined"
-      data-selector-id="box"
-      data-test-id="undefined"
-    />
-  </div>
-</DocumentFragment>
-`;

package/lib/MultiSelect/constants.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.MULTISELECT_I18N_KEYS = void 0;
+var MULTISELECT_I18N_KEYS = {
+  limitReachedMessage: 'Limit reached',
+  searchText: 'Searching...',
+  clearText: 'Clear all',
+  loadingText: 'Loading'
+};
+exports.MULTISELECT_I18N_KEYS = MULTISELECT_I18N_KEYS;

package/lib/MultiSelect/props/defaultProps.js

@@ -97,6 +97,7 @@ var MultiSelect_defaultProps = {
   autoComplete: (0, _Config.getLibraryConfig)('autoComplete'),
   dataId: 'multiSelect',
   dropBoxSize: 'small',
+  isVirtualizerEnabled: false,
   isAnimate: true,
   isDisabled: false,
   isPopupOpenOnEnter: false,
@@ -182,6 +183,7 @@ var SelectedOptions_defaultProps = {
 exports.SelectedOptions_defaultProps = SelectedOptions_defaultProps;
 var Suggestions_defaultProps = {
   a11y: {},
+  isVirtualizerEnabled: false,
   needMultiLineText: false
 };
 exports.Suggestions_defaultProps = Suggestions_defaultProps;