npm - @zohodesk/components - Versions diffs - 1.6.32 → 1.6.34 - Mend

@zohodesk/components 1.6.32 → 1.6.34

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (162) hide show

package/es/MultiSelect/__tests__/__snapshots__/Suggestions.spec.js.snap CHANGED Viewed

@@ -1,5 +1,3616 @@
 // Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+exports[`Suggestions Render with a disabled suggestion 1`] = `
+<DocumentFragment>
+  <div
+    class="d-flex d-flex-col"
+    data-id="containerComponent"
+    data-selector-id="container"
+    data-test-id="containerComponent"
+    tabindex="0"
+  >
+    <div
+      class="d-flex-shrink-0"
+      data-id="undefined"
+      data-selector-id="box"
+      data-test-id="undefined"
+    >
+      <li
+        aria-label="Option 1"
+        aria-selected="false"
+        class="d-flex d-flex-row d-items-center list medium default withBorder"
+        data-a11y-inset-focus="true"
+        data-a11y-list-active="false"
+        data-id="Option 1"
+        data-selector-id="listItem"
+        data-test-id="Option 1"
+        data-title="Option 1"
+        role="option"
+        tabindex="0"
+      >
+        <div
+          class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="d-flex-shrink-0 titleBox"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <div
+              class="d-basis-auto d-min-w-0 d-flex-shrink selfAlign_center value"
+              data-id="boxComponent"
+              data-selector-id="box"
+              data-test-id="boxComponent"
+            >
+              Option 1
+            </div>
+          </div>
+        </div>
+      </li>
+      <li
+        aria-label="Option 2"
+        aria-selected="false"
+        class="d-flex d-flex-row d-items-center list medium default disable withBorder"
+        data-a11y-inset-focus="true"
+        data-a11y-list-active="false"
+        data-id="Option 2"
+        data-selector-id="listItem"
+        data-test-id="Option 2"
+        role="option"
+      >
+        <div
+          class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="d-flex-shrink-0 titleBox"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <div
+              class="d-basis-auto d-min-w-0 d-flex-shrink selfAlign_center value"
+              data-id="boxComponent"
+              data-selector-id="box"
+              data-test-id="boxComponent"
+            >
+              Option 2
+            </div>
+          </div>
+        </div>
+      </li>
+      <li
+        aria-label="Option 3"
+        aria-selected="false"
+        class="d-flex d-flex-row d-items-center list medium default withBorder"
+        data-a11y-inset-focus="true"
+        data-a11y-list-active="false"
+        data-id="Option 3"
+        data-selector-id="listItem"
+        data-test-id="Option 3"
+        data-title="Option 3"
+        role="option"
+        tabindex="0"
+      >
+        <div
+          class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="d-flex-shrink-0 titleBox"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <div
+              class="d-basis-auto d-min-w-0 d-flex-shrink selfAlign_center value"
+              data-id="boxComponent"
+              data-selector-id="box"
+              data-test-id="boxComponent"
+            >
+              Option 3
+            </div>
+          </div>
+        </div>
+      </li>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+exports[`Suggestions Render with a11y ariaParentRole and ariaMultiselectable 1`] = `
+<DocumentFragment>
+  <div
+    aria-multiselectable="true"
+    class="d-flex d-flex-col"
+    data-id="containerComponent"
+    data-selector-id="container"
+    data-test-id="containerComponent"
+    role="listbox"
+    tabindex="0"
+  >
+    <div
+      class="d-flex-shrink-0"
+      data-id="undefined"
+      data-selector-id="box"
+      data-test-id="undefined"
+    >
+      <li
+        aria-label="Option 1"
+        aria-selected="false"
+        ariaparentrole="listbox"
+        class="d-flex d-flex-row d-items-center list medium default withBorder"
+        data-a11y-inset-focus="true"
+        data-a11y-list-active="false"
+        data-id="Option 1"
+        data-selector-id="listItem"
+        data-test-id="Option 1"
+        data-title="Option 1"
+        role="option"
+        tabindex="0"
+      >
+        <div
+          class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="d-flex-shrink-0 titleBox"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <div
+              class="d-basis-auto d-min-w-0 d-flex-shrink selfAlign_center value"
+              data-id="boxComponent"
+              data-selector-id="box"
+              data-test-id="boxComponent"
+            >
+              Option 1
+            </div>
+          </div>
+        </div>
+      </li>
+      <li
+        aria-label="Option 2"
+        aria-selected="false"
+        ariaparentrole="listbox"
+        class="d-flex d-flex-row d-items-center list medium default withBorder"
+        data-a11y-inset-focus="true"
+        data-a11y-list-active="false"
+        data-id="Option 2"
+        data-selector-id="listItem"
+        data-test-id="Option 2"
+        data-title="Option 2"
+        role="option"
+        tabindex="0"
+      >
+        <div
+          class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="d-flex-shrink-0 titleBox"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <div
+              class="d-basis-auto d-min-w-0 d-flex-shrink selfAlign_center value"
+              data-id="boxComponent"
+              data-selector-id="box"
+              data-test-id="boxComponent"
+            >
+              Option 2
+            </div>
+          </div>
+        </div>
+      </li>
+      <li
+        aria-label="Option 3"
+        aria-selected="false"
+        ariaparentrole="listbox"
+        class="d-flex d-flex-row d-items-center list medium default withBorder"
+        data-a11y-inset-focus="true"
+        data-a11y-list-active="false"
+        data-id="Option 3"
+        data-selector-id="listItem"
+        data-test-id="Option 3"
+        data-title="Option 3"
+        role="option"
+        tabindex="0"
+      >
+        <div
+          class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="d-flex-shrink-0 titleBox"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <div
+              class="d-basis-auto d-min-w-0 d-flex-shrink selfAlign_center value"
+              data-id="boxComponent"
+              data-selector-id="box"
+              data-test-id="boxComponent"
+            >
+              Option 3
+            </div>
+          </div>
+        </div>
+      </li>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+exports[`Suggestions Render with activeId 1`] = `
+<DocumentFragment>
+  <div
+    class="d-flex d-flex-col"
+    data-id="containerComponent"
+    data-selector-id="container"
+    data-test-id="containerComponent"
+    tabindex="0"
+  >
+    <div
+      class="d-flex-shrink-0"
+      data-id="undefined"
+      data-selector-id="box"
+      data-test-id="undefined"
+    >
+      <li
+        aria-label="Option 1"
+        aria-selected="false"
+        class="d-flex d-flex-row d-items-center list medium default withBorder"
+        data-a11y-inset-focus="true"
+        data-a11y-list-active="false"
+        data-id="Option 1"
+        data-selector-id="listItem"
+        data-test-id="Option 1"
+        data-title="Option 1"
+        role="option"
+        tabindex="0"
+      >
+        <div
+          class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="d-flex-shrink-0 titleBox"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <div
+              class="d-basis-auto d-min-w-0 d-flex-shrink selfAlign_center value"
+              data-id="boxComponent"
+              data-selector-id="box"
+              data-test-id="boxComponent"
+            >
+              Option 1
+            </div>
+          </div>
+        </div>
+      </li>
+      <li
+        aria-label="Option 2"
+        aria-selected="true"
+        class="d-flex d-flex-row d-items-center list medium default activedefault activewithBorder"
+        data-a11y-inset-focus="true"
+        data-a11y-list-active="false"
+        data-id="Option 2"
+        data-selected="true"
+        data-selector-id="listItem"
+        data-test-id="Option 2"
+        data-title="Option 2"
+        role="option"
+        tabindex="0"
+      >
+        <div
+          class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="d-flex-shrink-0 titleBox"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <div
+              class="d-basis-auto d-min-w-0 d-flex-shrink selfAlign_center value"
+              data-id="boxComponent"
+              data-selector-id="box"
+              data-test-id="boxComponent"
+            >
+              Option 2
+            </div>
+          </div>
+        </div>
+      </li>
+      <li
+        aria-label="Option 3"
+        aria-selected="false"
+        class="d-flex d-flex-row d-items-center list medium default withBorder"
+        data-a11y-inset-focus="true"
+        data-a11y-list-active="false"
+        data-id="Option 3"
+        data-selector-id="listItem"
+        data-test-id="Option 3"
+        data-title="Option 3"
+        role="option"
+        tabindex="0"
+      >
+        <div
+          class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="d-flex-shrink-0 titleBox"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <div
+              class="d-basis-auto d-min-w-0 d-flex-shrink selfAlign_center value"
+              data-id="boxComponent"
+              data-selector-id="box"
+              data-test-id="boxComponent"
+            >
+              Option 3
+            </div>
+          </div>
+        </div>
+      </li>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+exports[`Suggestions Render with className 1`] = `
+<DocumentFragment>
+  <div
+    class="d-flex d-flex-col"
+    data-id="containerComponent"
+    data-selector-id="container"
+    data-test-id="containerComponent"
+    tabindex="0"
+  >
+    <div
+      class="d-flex-shrink-0 custom-suggestions"
+      data-id="undefined"
+      data-selector-id="box"
+      data-test-id="undefined"
+    >
+      <li
+        aria-label="Option 1"
+        aria-selected="false"
+        class="d-flex d-flex-row d-items-center list medium default withBorder"
+        data-a11y-inset-focus="true"
+        data-a11y-list-active="false"
+        data-id="Option 1"
+        data-selector-id="listItem"
+        data-test-id="Option 1"
+        data-title="Option 1"
+        role="option"
+        tabindex="0"
+      >
+        <div
+          class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="d-flex-shrink-0 titleBox"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <div
+              class="d-basis-auto d-min-w-0 d-flex-shrink selfAlign_center value"
+              data-id="boxComponent"
+              data-selector-id="box"
+              data-test-id="boxComponent"
+            >
+              Option 1
+            </div>
+          </div>
+        </div>
+      </li>
+      <li
+        aria-label="Option 2"
+        aria-selected="false"
+        class="d-flex d-flex-row d-items-center list medium default withBorder"
+        data-a11y-inset-focus="true"
+        data-a11y-list-active="false"
+        data-id="Option 2"
+        data-selector-id="listItem"
+        data-test-id="Option 2"
+        data-title="Option 2"
+        role="option"
+        tabindex="0"
+      >
+        <div
+          class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="d-flex-shrink-0 titleBox"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <div
+              class="d-basis-auto d-min-w-0 d-flex-shrink selfAlign_center value"
+              data-id="boxComponent"
+              data-selector-id="box"
+              data-test-id="boxComponent"
+            >
+              Option 2
+            </div>
+          </div>
+        </div>
+      </li>
+      <li
+        aria-label="Option 3"
+        aria-selected="false"
+        class="d-flex d-flex-row d-items-center list medium default withBorder"
+        data-a11y-inset-focus="true"
+        data-a11y-list-active="false"
+        data-id="Option 3"
+        data-selector-id="listItem"
+        data-test-id="Option 3"
+        data-title="Option 3"
+        role="option"
+        tabindex="0"
+      >
+        <div
+          class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="d-flex-shrink-0 titleBox"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <div
+              class="d-basis-auto d-min-w-0 d-flex-shrink selfAlign_center value"
+              data-id="boxComponent"
+              data-selector-id="box"
+              data-test-id="boxComponent"
+            >
+              Option 3
+            </div>
+          </div>
+        </div>
+      </li>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+exports[`Suggestions Render with customClass containerClass 1`] = `
+<DocumentFragment>
+  <div
+    class="d-flex d-flex-col custom-container"
+    data-id="containerComponent"
+    data-selector-id="container"
+    data-test-id="containerComponent"
+    tabindex="0"
+  >
+    <div
+      class="d-flex-shrink-0"
+      data-id="undefined"
+      data-selector-id="box"
+      data-test-id="undefined"
+    >
+      <li
+        aria-label="Option 1"
+        aria-selected="false"
+        class="d-flex d-flex-row d-items-center list medium default withBorder"
+        data-a11y-inset-focus="true"
+        data-a11y-list-active="false"
+        data-id="Option 1"
+        data-selector-id="listItem"
+        data-test-id="Option 1"
+        data-title="Option 1"
+        role="option"
+        tabindex="0"
+      >
+        <div
+          class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="d-flex-shrink-0 titleBox"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <div
+              class="d-basis-auto d-min-w-0 d-flex-shrink selfAlign_center value"
+              data-id="boxComponent"
+              data-selector-id="box"
+              data-test-id="boxComponent"
+            >
+              Option 1
+            </div>
+          </div>
+        </div>
+      </li>
+      <li
+        aria-label="Option 2"
+        aria-selected="false"
+        class="d-flex d-flex-row d-items-center list medium default withBorder"
+        data-a11y-inset-focus="true"
+        data-a11y-list-active="false"
+        data-id="Option 2"
+        data-selector-id="listItem"
+        data-test-id="Option 2"
+        data-title="Option 2"
+        role="option"
+        tabindex="0"
+      >
+        <div
+          class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="d-flex-shrink-0 titleBox"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <div
+              class="d-basis-auto d-min-w-0 d-flex-shrink selfAlign_center value"
+              data-id="boxComponent"
+              data-selector-id="box"
+              data-test-id="boxComponent"
+            >
+              Option 2
+            </div>
+          </div>
+        </div>
+      </li>
+      <li
+        aria-label="Option 3"
+        aria-selected="false"
+        class="d-flex d-flex-row d-items-center list medium default withBorder"
+        data-a11y-inset-focus="true"
+        data-a11y-list-active="false"
+        data-id="Option 3"
+        data-selector-id="listItem"
+        data-test-id="Option 3"
+        data-title="Option 3"
+        role="option"
+        tabindex="0"
+      >
+        <div
+          class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="d-flex-shrink-0 titleBox"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <div
+              class="d-basis-auto d-min-w-0 d-flex-shrink selfAlign_center value"
+              data-id="boxComponent"
+              data-selector-id="box"
+              data-test-id="boxComponent"
+            >
+              Option 3
+            </div>
+          </div>
+        </div>
+      </li>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+exports[`Suggestions Render with dataId 1`] = `
+<DocumentFragment>
+  <div
+    class="d-flex d-flex-col"
+    data-id="containerComponent"
+    data-selector-id="container"
+    data-test-id="containerComponent"
+    tabindex="0"
+  >
+    <div
+      class="d-flex-shrink-0"
+      data-id="suggestions-dataId"
+      data-selector-id="box"
+      data-test-id="suggestions-dataId"
+    >
+      <li
+        aria-label="Option 1"
+        aria-selected="false"
+        class="d-flex d-flex-row d-items-center list medium default withBorder"
+        data-a11y-inset-focus="true"
+        data-a11y-list-active="false"
+        data-id="Option 1"
+        data-selector-id="listItem"
+        data-test-id="Option 1"
+        data-title="Option 1"
+        role="option"
+        tabindex="0"
+      >
+        <div
+          class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="d-flex-shrink-0 titleBox"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <div
+              class="d-basis-auto d-min-w-0 d-flex-shrink selfAlign_center value"
+              data-id="boxComponent"
+              data-selector-id="box"
+              data-test-id="boxComponent"
+            >
+              Option 1
+            </div>
+          </div>
+        </div>
+      </li>
+      <li
+        aria-label="Option 2"
+        aria-selected="false"
+        class="d-flex d-flex-row d-items-center list medium default withBorder"
+        data-a11y-inset-focus="true"
+        data-a11y-list-active="false"
+        data-id="Option 2"
+        data-selector-id="listItem"
+        data-test-id="Option 2"
+        data-title="Option 2"
+        role="option"
+        tabindex="0"
+      >
+        <div
+          class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="d-flex-shrink-0 titleBox"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <div
+              class="d-basis-auto d-min-w-0 d-flex-shrink selfAlign_center value"
+              data-id="boxComponent"
+              data-selector-id="box"
+              data-test-id="boxComponent"
+            >
+              Option 2
+            </div>
+          </div>
+        </div>
+      </li>
+      <li
+        aria-label="Option 3"
+        aria-selected="false"
+        class="d-flex d-flex-row d-items-center list medium default withBorder"
+        data-a11y-inset-focus="true"
+        data-a11y-list-active="false"
+        data-id="Option 3"
+        data-selector-id="listItem"
+        data-test-id="Option 3"
+        data-title="Option 3"
+        role="option"
+        tabindex="0"
+      >
+        <div
+          class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="d-flex-shrink-0 titleBox"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <div
+              class="d-basis-auto d-min-w-0 d-flex-shrink selfAlign_center value"
+              data-id="boxComponent"
+              data-selector-id="box"
+              data-test-id="boxComponent"
+            >
+              Option 3
+            </div>
+          </div>
+        </div>
+      </li>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+exports[`Suggestions Render with hoverId 1`] = `
+<DocumentFragment>
+  <div
+    class="d-flex d-flex-col"
+    data-id="containerComponent"
+    data-selector-id="container"
+    data-test-id="containerComponent"
+    tabindex="0"
+  >
+    <div
+      class="d-flex-shrink-0"
+      data-id="undefined"
+      data-selector-id="box"
+      data-test-id="undefined"
+    >
+      <li
+        aria-label="Option 1"
+        aria-selected="false"
+        class="d-flex d-flex-row d-items-center list medium default withBorder"
+        data-a11y-inset-focus="true"
+        data-a11y-list-active="false"
+        data-id="Option 1"
+        data-selector-id="listItem"
+        data-test-id="Option 1"
+        data-title="Option 1"
+        role="option"
+        tabindex="0"
+      >
+        <div
+          class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="d-flex-shrink-0 titleBox"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <div
+              class="d-basis-auto d-min-w-0 d-flex-shrink selfAlign_center value"
+              data-id="boxComponent"
+              data-selector-id="box"
+              data-test-id="boxComponent"
+            >
+              Option 1
+            </div>
+          </div>
+        </div>
+      </li>
+      <li
+        aria-label="Option 2"
+        aria-selected="false"
+        class="d-flex d-flex-row d-items-center list medium default withBorder"
+        data-a11y-inset-focus="true"
+        data-a11y-list-active="false"
+        data-id="Option 2"
+        data-selector-id="listItem"
+        data-test-id="Option 2"
+        data-title="Option 2"
+        role="option"
+        tabindex="0"
+      >
+        <div
+          class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="d-flex-shrink-0 titleBox"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <div
+              class="d-basis-auto d-min-w-0 d-flex-shrink selfAlign_center value"
+              data-id="boxComponent"
+              data-selector-id="box"
+              data-test-id="boxComponent"
+            >
+              Option 2
+            </div>
+          </div>
+        </div>
+      </li>
+      <li
+        aria-label="Option 3"
+        aria-selected="false"
+        class="d-flex d-flex-row d-items-center list medium default defaultHover withBorder"
+        data-a11y-inset-focus="true"
+        data-a11y-list-active="true"
+        data-id="Option 3"
+        data-selector-id="listItem"
+        data-test-id="Option 3"
+        data-title="Option 3"
+        role="option"
+        tabindex="0"
+      >
+        <div
+          class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="d-flex-shrink-0 titleBox"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <div
+              class="d-basis-auto d-min-w-0 d-flex-shrink selfAlign_center value"
+              data-id="boxComponent"
+              data-selector-id="box"
+              data-test-id="boxComponent"
+            >
+              Option 3
+            </div>
+          </div>
+        </div>
+      </li>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+exports[`Suggestions Render with hoverOption 1`] = `
+<DocumentFragment>
+  <div
+    class="d-flex d-flex-col"
+    data-id="containerComponent"
+    data-selector-id="container"
+    data-test-id="containerComponent"
+    tabindex="0"
+  >
+    <div
+      class="d-flex-shrink-0"
+      data-id="undefined"
+      data-selector-id="box"
+      data-test-id="undefined"
+    >
+      <li
+        aria-label="Option 1"
+        aria-selected="false"
+        class="d-flex d-flex-row d-items-center list medium default withBorder"
+        data-a11y-inset-focus="true"
+        data-a11y-list-active="false"
+        data-id="Option 1"
+        data-selector-id="listItem"
+        data-test-id="Option 1"
+        data-title="Option 1"
+        role="option"
+        tabindex="0"
+      >
+        <div
+          class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="d-flex-shrink-0 titleBox"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <div
+              class="d-basis-auto d-min-w-0 d-flex-shrink selfAlign_center value"
+              data-id="boxComponent"
+              data-selector-id="box"
+              data-test-id="boxComponent"
+            >
+              Option 1
+            </div>
+          </div>
+        </div>
+      </li>
+      <li
+        aria-label="Option 2"
+        aria-selected="false"
+        class="d-flex d-flex-row d-items-center list medium default defaultHover withBorder"
+        data-a11y-inset-focus="true"
+        data-a11y-list-active="true"
+        data-id="Option 2"
+        data-selector-id="listItem"
+        data-test-id="Option 2"
+        data-title="Option 2"
+        role="option"
+        tabindex="0"
+      >
+        <div
+          class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="d-flex-shrink-0 titleBox"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <div
+              class="d-basis-auto d-min-w-0 d-flex-shrink selfAlign_center value"
+              data-id="boxComponent"
+              data-selector-id="box"
+              data-test-id="boxComponent"
+            >
+              Option 2
+            </div>
+          </div>
+        </div>
+      </li>
+      <li
+        aria-label="Option 3"
+        aria-selected="false"
+        class="d-flex d-flex-row d-items-center list medium default withBorder"
+        data-a11y-inset-focus="true"
+        data-a11y-list-active="false"
+        data-id="Option 3"
+        data-selector-id="listItem"
+        data-test-id="Option 3"
+        data-title="Option 3"
+        role="option"
+        tabindex="0"
+      >
+        <div
+          class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="d-flex-shrink-0 titleBox"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <div
+              class="d-basis-auto d-min-w-0 d-flex-shrink selfAlign_center value"
+              data-id="boxComponent"
+              data-selector-id="box"
+              data-test-id="boxComponent"
+            >
+              Option 3
+            </div>
+          </div>
+        </div>
+      </li>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+exports[`Suggestions Render with htmlId 1`] = `
+<DocumentFragment>
+  <div
+    class="d-flex d-flex-col"
+    data-id="containerComponent"
+    data-selector-id="container"
+    data-test-id="containerComponent"
+    id="suggestions-htmlId"
+    tabindex="0"
+  >
+    <div
+      class="d-flex-shrink-0"
+      data-id="undefined"
+      data-selector-id="box"
+      data-test-id="undefined"
+    >
+      <li
+        aria-label="Option 1"
+        aria-selected="false"
+        class="d-flex d-flex-row d-items-center list medium default withBorder"
+        data-a11y-inset-focus="true"
+        data-a11y-list-active="false"
+        data-id="Option 1"
+        data-selector-id="listItem"
+        data-test-id="Option 1"
+        data-title="Option 1"
+        role="option"
+        tabindex="0"
+      >
+        <div
+          class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="d-flex-shrink-0 titleBox"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <div
+              class="d-basis-auto d-min-w-0 d-flex-shrink selfAlign_center value"
+              data-id="boxComponent"
+              data-selector-id="box"
+              data-test-id="boxComponent"
+            >
+              Option 1
+            </div>
+          </div>
+        </div>
+      </li>
+      <li
+        aria-label="Option 2"
+        aria-selected="false"
+        class="d-flex d-flex-row d-items-center list medium default withBorder"
+        data-a11y-inset-focus="true"
+        data-a11y-list-active="false"
+        data-id="Option 2"
+        data-selector-id="listItem"
+        data-test-id="Option 2"
+        data-title="Option 2"
+        role="option"
+        tabindex="0"
+      >
+        <div
+          class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="d-flex-shrink-0 titleBox"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <div
+              class="d-basis-auto d-min-w-0 d-flex-shrink selfAlign_center value"
+              data-id="boxComponent"
+              data-selector-id="box"
+              data-test-id="boxComponent"
+            >
+              Option 2
+            </div>
+          </div>
+        </div>
+      </li>
+      <li
+        aria-label="Option 3"
+        aria-selected="false"
+        class="d-flex d-flex-row d-items-center list medium default withBorder"
+        data-a11y-inset-focus="true"
+        data-a11y-list-active="false"
+        data-id="Option 3"
+        data-selector-id="listItem"
+        data-test-id="Option 3"
+        data-title="Option 3"
+        role="option"
+        tabindex="0"
+      >
+        <div
+          class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="d-flex-shrink-0 titleBox"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <div
+              class="d-basis-auto d-min-w-0 d-flex-shrink selfAlign_center value"
+              data-id="boxComponent"
+              data-selector-id="box"
+              data-test-id="boxComponent"
+            >
+              Option 3
+            </div>
+          </div>
+        </div>
+      </li>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+exports[`Suggestions Render with isVirtualizerEnabled 1`] = `
+<DocumentFragment>
+  <div
+    class="d-flex d-flex-col"
+    data-id="containerComponent"
+    data-selector-id="container"
+    data-test-id="containerComponent"
+    tabindex="0"
+  >
+    <div
+      class="d-flex-shrink-0"
+      data-id="suggestions-dataId"
+      data-selector-id="box"
+      data-test-id="suggestions-dataId"
+    >
+      <div
+        data-id="suggestions-dataId_virtualizer"
+      >
+        <li
+          aria-label="Option 1"
+          aria-selected="false"
+          class="d-flex d-flex-row d-items-center list medium default withBorder"
+          data-a11y-inset-focus="true"
+          data-a11y-list-active="false"
+          data-id="Option 1"
+          data-selector-id="listItem"
+          data-test-id="Option 1"
+          data-title="Option 1"
+          role="option"
+          tabindex="0"
+        >
+          <div
+            class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <div
+              class="d-flex-shrink-0 titleBox"
+              data-id="boxComponent"
+              data-selector-id="box"
+              data-test-id="boxComponent"
+            >
+              <div
+                class="d-basis-auto d-min-w-0 d-flex-shrink selfAlign_center value"
+                data-id="boxComponent"
+                data-selector-id="box"
+                data-test-id="boxComponent"
+              >
+                Option 1
+              </div>
+            </div>
+          </div>
+        </li>
+        <li
+          aria-label="Option 2"
+          aria-selected="false"
+          class="d-flex d-flex-row d-items-center list medium default withBorder"
+          data-a11y-inset-focus="true"
+          data-a11y-list-active="false"
+          data-id="Option 2"
+          data-selector-id="listItem"
+          data-test-id="Option 2"
+          data-title="Option 2"
+          role="option"
+          tabindex="0"
+        >
+          <div
+            class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <div
+              class="d-flex-shrink-0 titleBox"
+              data-id="boxComponent"
+              data-selector-id="box"
+              data-test-id="boxComponent"
+            >
+              <div
+                class="d-basis-auto d-min-w-0 d-flex-shrink selfAlign_center value"
+                data-id="boxComponent"
+                data-selector-id="box"
+                data-test-id="boxComponent"
+              >
+                Option 2
+              </div>
+            </div>
+          </div>
+        </li>
+        <li
+          aria-label="Option 3"
+          aria-selected="false"
+          class="d-flex d-flex-row d-items-center list medium default withBorder"
+          data-a11y-inset-focus="true"
+          data-a11y-list-active="false"
+          data-id="Option 3"
+          data-selector-id="listItem"
+          data-test-id="Option 3"
+          data-title="Option 3"
+          role="option"
+          tabindex="0"
+        >
+          <div
+            class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <div
+              class="d-flex-shrink-0 titleBox"
+              data-id="boxComponent"
+              data-selector-id="box"
+              data-test-id="boxComponent"
+            >
+              <div
+                class="d-basis-auto d-min-w-0 d-flex-shrink selfAlign_center value"
+                data-id="boxComponent"
+                data-selector-id="box"
+                data-test-id="boxComponent"
+              >
+                Option 3
+              </div>
+            </div>
+          </div>
+        </li>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+exports[`Suggestions Render with isVirtualizerEnabled and selectedOptions 1`] = `
+<DocumentFragment>
+  <div
+    class="d-flex d-flex-col"
+    data-id="containerComponent"
+    data-selector-id="container"
+    data-test-id="containerComponent"
+    tabindex="0"
+  >
+    <div
+      class="d-flex-shrink-0"
+      data-id="suggestions-dataId"
+      data-selector-id="box"
+      data-test-id="suggestions-dataId"
+    >
+      <div
+        data-id="suggestions-dataId_virtualizer"
+      >
+        <li
+          aria-label="Option 1"
+          aria-selected="false"
+          class="d-flex d-flex-row d-items-center list medium default withBorder"
+          data-a11y-inset-focus="true"
+          data-a11y-list-active="false"
+          data-id="Option 1"
+          data-selector-id="listItem"
+          data-test-id="Option 1"
+          data-title="Option 1"
+          role="option"
+          tabindex="0"
+        >
+          <div
+            class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <div
+              class="d-flex-shrink-0 titleBox"
+              data-id="boxComponent"
+              data-selector-id="box"
+              data-test-id="boxComponent"
+            >
+              <div
+                class="d-basis-auto d-min-w-0 d-flex-shrink selfAlign_center value"
+                data-id="boxComponent"
+                data-selector-id="box"
+                data-test-id="boxComponent"
+              >
+                Option 1
+              </div>
+            </div>
+          </div>
+        </li>
+        <li
+          aria-label="Option 2"
+          aria-selected="true"
+          class="d-flex d-flex-row d-items-center list medium default activedefault activewithBorder"
+          data-a11y-inset-focus="true"
+          data-a11y-list-active="false"
+          data-id="Option 2"
+          data-selected="true"
+          data-selector-id="listItem"
+          data-test-id="Option 2"
+          data-title="Option 2"
+          role="option"
+          tabindex="0"
+        >
+          <div
+            class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <div
+              class="d-flex-shrink-0 titleBox"
+              data-id="boxComponent"
+              data-selector-id="box"
+              data-test-id="boxComponent"
+            >
+              <div
+                class="d-basis-auto d-min-w-0 d-flex-shrink selfAlign_center value"
+                data-id="boxComponent"
+                data-selector-id="box"
+                data-test-id="boxComponent"
+              >
+                Option 2
+              </div>
+            </div>
+          </div>
+        </li>
+        <li
+          aria-label="Option 3"
+          aria-selected="false"
+          class="d-flex d-flex-row d-items-center list medium default withBorder"
+          data-a11y-inset-focus="true"
+          data-a11y-list-active="false"
+          data-id="Option 3"
+          data-selector-id="listItem"
+          data-test-id="Option 3"
+          data-title="Option 3"
+          role="option"
+          tabindex="0"
+        >
+          <div
+            class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <div
+              class="d-flex-shrink-0 titleBox"
+              data-id="boxComponent"
+              data-selector-id="box"
+              data-test-id="boxComponent"
+            >
+              <div
+                class="d-basis-auto d-min-w-0 d-flex-shrink selfAlign_center value"
+                data-id="boxComponent"
+                data-selector-id="box"
+                data-test-id="boxComponent"
+              >
+                Option 3
+              </div>
+            </div>
+          </div>
+        </li>
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+exports[`Suggestions Render with limit not reached 1`] = `
+<DocumentFragment>
+  <div
+    class="d-flex d-flex-col"
+    data-id="containerComponent"
+    data-selector-id="container"
+    data-test-id="containerComponent"
+    tabindex="0"
+  >
+    <div
+      class="d-flex-shrink-0"
+      data-id="undefined"
+      data-selector-id="box"
+      data-test-id="undefined"
+    >
+      <li
+        aria-label="Option 1"
+        aria-selected="true"
+        class="d-flex d-flex-row d-items-center list medium default activedefault activewithBorder"
+        data-a11y-inset-focus="true"
+        data-a11y-list-active="false"
+        data-id="Option 1"
+        data-selected="true"
+        data-selector-id="listItem"
+        data-test-id="Option 1"
+        data-title="Option 1"
+        role="option"
+        tabindex="0"
+      >
+        <div
+          class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="d-flex-shrink-0 titleBox"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <div
+              class="d-basis-auto d-min-w-0 d-flex-shrink selfAlign_center value"
+              data-id="boxComponent"
+              data-selector-id="box"
+              data-test-id="boxComponent"
+            >
+              Option 1
+            </div>
+          </div>
+        </div>
+      </li>
+      <li
+        aria-label="Option 2"
+        aria-selected="false"
+        class="d-flex d-flex-row d-items-center list medium default withBorder"
+        data-a11y-inset-focus="true"
+        data-a11y-list-active="false"
+        data-id="Option 2"
+        data-selector-id="listItem"
+        data-test-id="Option 2"
+        data-title="Option 2"
+        role="option"
+        tabindex="0"
+      >
+        <div
+          class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="d-flex-shrink-0 titleBox"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <div
+              class="d-basis-auto d-min-w-0 d-flex-shrink selfAlign_center value"
+              data-id="boxComponent"
+              data-selector-id="box"
+              data-test-id="boxComponent"
+            >
+              Option 2
+            </div>
+          </div>
+        </div>
+      </li>
+      <li
+        aria-label="Option 3"
+        aria-selected="false"
+        class="d-flex d-flex-row d-items-center list medium default withBorder"
+        data-a11y-inset-focus="true"
+        data-a11y-list-active="false"
+        data-id="Option 3"
+        data-selector-id="listItem"
+        data-test-id="Option 3"
+        data-title="Option 3"
+        role="option"
+        tabindex="0"
+      >
+        <div
+          class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="d-flex-shrink-0 titleBox"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <div
+              class="d-basis-auto d-min-w-0 d-flex-shrink selfAlign_center value"
+              data-id="boxComponent"
+              data-selector-id="box"
+              data-test-id="boxComponent"
+            >
+              Option 3
+            </div>
+          </div>
+        </div>
+      </li>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+exports[`Suggestions Render with limit reached 1`] = `
+<DocumentFragment>
+  <div
+    class="d-flex d-flex-col"
+    data-id="containerComponent"
+    data-selector-id="container"
+    data-test-id="containerComponent"
+    tabindex="0"
+  >
+    <div
+      class="d-flex-shrink-0"
+      data-id="undefined"
+      data-selector-id="box"
+      data-test-id="undefined"
+    >
+      <li
+        aria-label="Option 1"
+        aria-selected="true"
+        class="d-flex d-flex-row d-items-center list medium default activedefault activewithBorder"
+        data-a11y-inset-focus="true"
+        data-a11y-list-active="false"
+        data-id="Option 1"
+        data-selected="true"
+        data-selector-id="listItem"
+        data-test-id="Option 1"
+        data-title="Option 1"
+        role="option"
+        tabindex="0"
+      >
+        <div
+          class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="d-flex-shrink-0 titleBox"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <div
+              class="d-basis-auto d-min-w-0 d-flex-shrink selfAlign_center value"
+              data-id="boxComponent"
+              data-selector-id="box"
+              data-test-id="boxComponent"
+            >
+              Option 1
+            </div>
+          </div>
+        </div>
+      </li>
+      <li
+        aria-label="Option 2"
+        aria-selected="true"
+        class="d-flex d-flex-row d-items-center list medium default activedefault activewithBorder"
+        data-a11y-inset-focus="true"
+        data-a11y-list-active="false"
+        data-id="Option 2"
+        data-selected="true"
+        data-selector-id="listItem"
+        data-test-id="Option 2"
+        data-title="Option 2"
+        role="option"
+        tabindex="0"
+      >
+        <div
+          class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="d-flex-shrink-0 titleBox"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <div
+              class="d-basis-auto d-min-w-0 d-flex-shrink selfAlign_center value"
+              data-id="boxComponent"
+              data-selector-id="box"
+              data-test-id="boxComponent"
+            >
+              Option 2
+            </div>
+          </div>
+        </div>
+      </li>
+      <li
+        aria-label="Option 3"
+        aria-selected="false"
+        class="d-flex d-flex-row d-items-center list medium default disable withBorder"
+        data-a11y-inset-focus="true"
+        data-a11y-list-active="false"
+        data-id="Option 3"
+        data-selector-id="listItem"
+        data-test-id="Option 3"
+        role="option"
+      >
+        <div
+          class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="d-flex-shrink-0 titleBox"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <div
+              class="d-basis-auto d-min-w-0 d-flex-shrink selfAlign_center value"
+              data-id="boxComponent"
+              data-selector-id="box"
+              data-test-id="boxComponent"
+            >
+              Option 3
+            </div>
+          </div>
+        </div>
+      </li>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+exports[`Suggestions Render with limit reached and limitReachedMessage 1`] = `
+<DocumentFragment>
+  <div
+    class="d-flex d-flex-col"
+    data-id="containerComponent"
+    data-selector-id="container"
+    data-test-id="containerComponent"
+    tabindex="0"
+  >
+    <div
+      class="d-flex-shrink-0"
+      data-id="undefined"
+      data-selector-id="box"
+      data-test-id="undefined"
+    >
+      <li
+        aria-label="Option 1"
+        aria-selected="true"
+        class="d-flex d-flex-row d-items-center list medium default activedefault activewithBorder"
+        data-a11y-inset-focus="true"
+        data-a11y-list-active="false"
+        data-id="Option 1"
+        data-selected="true"
+        data-selector-id="listItem"
+        data-test-id="Option 1"
+        data-title="Option 1"
+        role="option"
+        tabindex="0"
+      >
+        <div
+          class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="d-flex-shrink-0 titleBox"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <div
+              class="d-basis-auto d-min-w-0 d-flex-shrink selfAlign_center value"
+              data-id="boxComponent"
+              data-selector-id="box"
+              data-test-id="boxComponent"
+            >
+              Option 1
+            </div>
+          </div>
+        </div>
+      </li>
+      <li
+        aria-label="Option 2"
+        aria-selected="true"
+        class="d-flex d-flex-row d-items-center list medium default activedefault activewithBorder"
+        data-a11y-inset-focus="true"
+        data-a11y-list-active="false"
+        data-id="Option 2"
+        data-selected="true"
+        data-selector-id="listItem"
+        data-test-id="Option 2"
+        data-title="Option 2"
+        role="option"
+        tabindex="0"
+      >
+        <div
+          class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="d-flex-shrink-0 titleBox"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <div
+              class="d-basis-auto d-min-w-0 d-flex-shrink selfAlign_center value"
+              data-id="boxComponent"
+              data-selector-id="box"
+              data-test-id="boxComponent"
+            >
+              Option 2
+            </div>
+          </div>
+        </div>
+      </li>
+      <li
+        aria-label="Option 3"
+        aria-selected="false"
+        class="d-flex d-flex-row d-items-center list medium default disable withBorder"
+        data-a11y-inset-focus="true"
+        data-a11y-list-active="false"
+        data-id="Option 3"
+        data-selector-id="listItem"
+        data-test-id="Option 3"
+        data-title="You can select only two"
+        role="option"
+      >
+        <div
+          class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="d-flex-shrink-0 titleBox"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <div
+              class="d-basis-auto d-min-w-0 d-flex-shrink selfAlign_center value"
+              data-id="boxComponent"
+              data-selector-id="box"
+              data-test-id="boxComponent"
+            >
+              Option 3
+            </div>
+          </div>
+        </div>
+      </li>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+exports[`Suggestions Render with listItemCustomProps customClass 1`] = `
+<DocumentFragment>
+  <div
+    class="d-flex d-flex-col"
+    data-id="containerComponent"
+    data-selector-id="container"
+    data-test-id="containerComponent"
+    tabindex="0"
+  >
+    <div
+      class="d-flex-shrink-0"
+      data-id="undefined"
+      data-selector-id="box"
+      data-test-id="undefined"
+    >
+      <li
+        aria-label="Option 1"
+        aria-selected="false"
+        class="d-flex d-flex-row d-items-center list medium default withBorder custom-list-item"
+        data-a11y-inset-focus="true"
+        data-a11y-list-active="false"
+        data-id="Option 1"
+        data-selector-id="listItem"
+        data-test-id="Option 1"
+        data-title="Option 1"
+        role="option"
+        tabindex="0"
+      >
+        <div
+          class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="d-flex-shrink-0 titleBox"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <div
+              class="d-basis-auto d-min-w-0 d-flex-shrink selfAlign_center value"
+              data-id="boxComponent"
+              data-selector-id="box"
+              data-test-id="boxComponent"
+            >
+              Option 1
+            </div>
+          </div>
+        </div>
+      </li>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+exports[`Suggestions Render with listItemProps 1`] = `
+<DocumentFragment>
+  <div
+    class="d-flex d-flex-col"
+    data-id="containerComponent"
+    data-selector-id="container"
+    data-test-id="containerComponent"
+    tabindex="0"
+  >
+    <div
+      class="d-flex-shrink-0"
+      data-id="undefined"
+      data-selector-id="box"
+      data-test-id="undefined"
+    >
+      <li
+        aria-label="Option 1"
+        aria-selected="false"
+        class="d-flex d-flex-row d-items-center list medium default withBorder"
+        data-a11y-inset-focus="true"
+        data-a11y-list-active="false"
+        data-custom-attr="true"
+        data-id="Option 1"
+        data-selector-id="listItem"
+        data-test-id="Option 1"
+        data-title="Option 1"
+        role="option"
+        tabindex="0"
+      >
+        <div
+          class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="d-flex-shrink-0 titleBox"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <div
+              class="d-basis-auto d-min-w-0 d-flex-shrink selfAlign_center value"
+              data-id="boxComponent"
+              data-selector-id="box"
+              data-test-id="boxComponent"
+            >
+              Option 1
+            </div>
+          </div>
+        </div>
+      </li>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+exports[`Suggestions Render with listItemSize as large 1`] = `
+<DocumentFragment>
+  <div
+    class="d-flex d-flex-col"
+    data-id="containerComponent"
+    data-selector-id="container"
+    data-test-id="containerComponent"
+    tabindex="0"
+  >
+    <div
+      class="d-flex-shrink-0"
+      data-id="undefined"
+      data-selector-id="box"
+      data-test-id="undefined"
+    >
+      <li
+        aria-label="Option 1"
+        aria-selected="false"
+        class="d-flex d-flex-row d-items-center list large default withBorder"
+        data-a11y-inset-focus="true"
+        data-a11y-list-active="false"
+        data-id="Option 1"
+        data-selector-id="listItem"
+        data-test-id="Option 1"
+        data-title="Option 1"
+        role="option"
+        tabindex="0"
+      >
+        <div
+          class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="d-flex-shrink-0 titleBox"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <div
+              class="d-basis-auto d-min-w-0 d-flex-shrink selfAlign_center value"
+              data-id="boxComponent"
+              data-selector-id="box"
+              data-test-id="boxComponent"
+            >
+              Option 1
+            </div>
+          </div>
+        </div>
+      </li>
+      <li
+        aria-label="Option 2"
+        aria-selected="false"
+        class="d-flex d-flex-row d-items-center list large default withBorder"
+        data-a11y-inset-focus="true"
+        data-a11y-list-active="false"
+        data-id="Option 2"
+        data-selector-id="listItem"
+        data-test-id="Option 2"
+        data-title="Option 2"
+        role="option"
+        tabindex="0"
+      >
+        <div
+          class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="d-flex-shrink-0 titleBox"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <div
+              class="d-basis-auto d-min-w-0 d-flex-shrink selfAlign_center value"
+              data-id="boxComponent"
+              data-selector-id="box"
+              data-test-id="boxComponent"
+            >
+              Option 2
+            </div>
+          </div>
+        </div>
+      </li>
+      <li
+        aria-label="Option 3"
+        aria-selected="false"
+        class="d-flex d-flex-row d-items-center list large default withBorder"
+        data-a11y-inset-focus="true"
+        data-a11y-list-active="false"
+        data-id="Option 3"
+        data-selector-id="listItem"
+        data-test-id="Option 3"
+        data-title="Option 3"
+        role="option"
+        tabindex="0"
+      >
+        <div
+          class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="d-flex-shrink-0 titleBox"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <div
+              class="d-basis-auto d-min-w-0 d-flex-shrink selfAlign_center value"
+              data-id="boxComponent"
+              data-selector-id="box"
+              data-test-id="boxComponent"
+            >
+              Option 3
+            </div>
+          </div>
+        </div>
+      </li>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+exports[`Suggestions Render with listItemSize as small 1`] = `
+<DocumentFragment>
+  <div
+    class="d-flex d-flex-col"
+    data-id="containerComponent"
+    data-selector-id="container"
+    data-test-id="containerComponent"
+    tabindex="0"
+  >
+    <div
+      class="d-flex-shrink-0"
+      data-id="undefined"
+      data-selector-id="box"
+      data-test-id="undefined"
+    >
+      <li
+        aria-label="Option 1"
+        aria-selected="false"
+        class="d-flex d-flex-row d-items-center list small default withBorder"
+        data-a11y-inset-focus="true"
+        data-a11y-list-active="false"
+        data-id="Option 1"
+        data-selector-id="listItem"
+        data-test-id="Option 1"
+        data-title="Option 1"
+        role="option"
+        tabindex="0"
+      >
+        <div
+          class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="d-flex-shrink-0 titleBox"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <div
+              class="d-basis-auto d-min-w-0 d-flex-shrink selfAlign_center value"
+              data-id="boxComponent"
+              data-selector-id="box"
+              data-test-id="boxComponent"
+            >
+              Option 1
+            </div>
+          </div>
+        </div>
+      </li>
+      <li
+        aria-label="Option 2"
+        aria-selected="false"
+        class="d-flex d-flex-row d-items-center list small default withBorder"
+        data-a11y-inset-focus="true"
+        data-a11y-list-active="false"
+        data-id="Option 2"
+        data-selector-id="listItem"
+        data-test-id="Option 2"
+        data-title="Option 2"
+        role="option"
+        tabindex="0"
+      >
+        <div
+          class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="d-flex-shrink-0 titleBox"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <div
+              class="d-basis-auto d-min-w-0 d-flex-shrink selfAlign_center value"
+              data-id="boxComponent"
+              data-selector-id="box"
+              data-test-id="boxComponent"
+            >
+              Option 2
+            </div>
+          </div>
+        </div>
+      </li>
+      <li
+        aria-label="Option 3"
+        aria-selected="false"
+        class="d-flex d-flex-row d-items-center list small default withBorder"
+        data-a11y-inset-focus="true"
+        data-a11y-list-active="false"
+        data-id="Option 3"
+        data-selector-id="listItem"
+        data-test-id="Option 3"
+        data-title="Option 3"
+        role="option"
+        tabindex="0"
+      >
+        <div
+          class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="d-flex-shrink-0 titleBox"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <div
+              class="d-basis-auto d-min-w-0 d-flex-shrink selfAlign_center value"
+              data-id="boxComponent"
+              data-selector-id="box"
+              data-test-id="boxComponent"
+            >
+              Option 3
+            </div>
+          </div>
+        </div>
+      </li>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+exports[`Suggestions Render with mixed option types 1`] = `
+<DocumentFragment>
+  <div
+    class="d-flex d-flex-col"
+    data-id="containerComponent"
+    data-selector-id="container"
+    data-test-id="containerComponent"
+    tabindex="0"
+  >
+    <div
+      class="d-flex-shrink-0"
+      data-id="undefined"
+      data-selector-id="box"
+      data-test-id="undefined"
+    >
+      <li
+        aria-label="Option 1"
+        aria-selected="false"
+        class="d-flex d-flex-row d-items-center list medium default withBorder"
+        data-a11y-inset-focus="true"
+        data-a11y-list-active="false"
+        data-id="Option 1"
+        data-selector-id="listItem"
+        data-test-id="Option 1"
+        data-title="Option 1"
+        role="option"
+        tabindex="0"
+      >
+        <div
+          class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="d-flex-shrink-0 titleBox"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <div
+              class="d-basis-auto d-min-w-0 d-flex-shrink selfAlign_center value"
+              data-id="boxComponent"
+              data-selector-id="box"
+              data-test-id="boxComponent"
+            >
+              Option 1
+            </div>
+          </div>
+        </div>
+      </li>
+      <li
+        aria-label="Option 2"
+        aria-selected="false"
+        class="d-flex d-flex-row d-items-center list medium default withBorder"
+        data-a11y-inset-focus="true"
+        data-a11y-list-active="false"
+        data-id="Option 2_ListItemWithAvatar"
+        data-selector-id="listItemWithAvatar"
+        data-test-id="Option 2_ListItemWithAvatar"
+        role="option"
+        tabindex="0"
+      >
+        <div
+          class="d-flex-shrink-0 contentWrapper"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="leftAvatar"
+          >
+            <div
+              class="d-flex-shrink-0 d-self-start lhsBoxInner alignLhsBox_center"
+              data-id="boxComponent"
+              data-selector-id="box"
+              data-test-id="boxComponent"
+            >
+              <div
+                class="avatar small small circle primary black"
+                data-id="Avatar"
+                data-selector-id="avatar"
+                data-test-id="Avatar"
+                data-title="Option 2"
+              >
+                <img
+                  alt="Option 2"
+                  class="image animate"
+                  data-id="Avatar_AvatarImg"
+                  data-selector-id="avatar_AvatarImg"
+                  data-test-id="Avatar_AvatarImg"
+                  name="Option 2"
+                  src="avatar.png"
+                />
+                <span
+                  class="shadow black"
+                />
+              </div>
+            </div>
+          </div>
+          <div
+            class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox selfAlign_center"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <div
+              class="d-flex-shrink-0 titleBox"
+              data-id="boxComponent"
+              data-selector-id="box"
+              data-test-id="boxComponent"
+            >
+              <div
+                class="d-basis-auto d-min-w-0 d-flex-shrink value"
+                data-id="boxComponent"
+                data-selector-id="box"
+                data-test-id="boxComponent"
+                data-title="Option 2"
+              >
+                Option 2
+              </div>
+            </div>
+          </div>
+        </div>
+      </li>
+      <li
+        aria-label="Option 3"
+        aria-selected="false"
+        class="d-flex d-flex-row d-items-center list medium default withBorder"
+        data-a11y-inset-focus="true"
+        data-a11y-list-active="false"
+        data-id="option 3"
+        data-selector-id="listItemWithIcon"
+        data-test-id="option 3"
+        role="option"
+        tabindex="0"
+      >
+        <div
+          class="d-flex-shrink-0 contentWrapper"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            aria-hidden="true"
+            class="iconBox lhsJustifyContent_center"
+            data-id="option 3_Icon"
+            data-test-id="option 3_Icon"
+          >
+            <div
+              class="d-flex-shrink-0 d-self-start iconWrapper"
+              data-id="boxComponent"
+              data-selector-id="box"
+              data-test-id="boxComponent"
+            >
+              <i
+                aria-hidden="true"
+                class="zd_font_icons ff icon-agent basic d-inline-block d-align-middle"
+                data-id="fontIcon"
+                data-selector-id="fontIcon"
+                data-test-id="fontIcon"
+                style="--zd-iconfont-size: var(--zd_font_size10);"
+              />
+            </div>
+          </div>
+          <div
+            class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox selfAlign_center"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <div
+              class="d-flex-shrink-0 titleBox"
+              data-id="boxComponent"
+              data-selector-id="box"
+              data-test-id="boxComponent"
+            >
+              <div
+                class="d-basis-auto d-min-w-0 d-flex-shrink value"
+                data-id="option 3_Text"
+                data-selector-id="box"
+                data-test-id="option 3_Text"
+                data-title="Option 3"
+              >
+                Option 3
+              </div>
+            </div>
+          </div>
+        </div>
+      </li>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+exports[`Suggestions Render with needBorder=false 1`] = `
+<DocumentFragment>
+  <div
+    class="d-flex d-flex-col"
+    data-id="containerComponent"
+    data-selector-id="container"
+    data-test-id="containerComponent"
+    tabindex="0"
+  >
+    <div
+      class="d-flex-shrink-0"
+      data-id="undefined"
+      data-selector-id="box"
+      data-test-id="undefined"
+    >
+      <li
+        aria-label="Option 1"
+        aria-selected="false"
+        class="d-flex d-flex-row d-items-center list medium default"
+        data-a11y-inset-focus="true"
+        data-a11y-list-active="false"
+        data-id="Option 1"
+        data-selector-id="listItem"
+        data-test-id="Option 1"
+        data-title="Option 1"
+        role="option"
+        tabindex="0"
+      >
+        <div
+          class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="d-flex-shrink-0 titleBox"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <div
+              class="d-basis-auto d-min-w-0 d-flex-shrink selfAlign_center value"
+              data-id="boxComponent"
+              data-selector-id="box"
+              data-test-id="boxComponent"
+            >
+              Option 1
+            </div>
+          </div>
+        </div>
+      </li>
+      <li
+        aria-label="Option 2"
+        aria-selected="false"
+        class="d-flex d-flex-row d-items-center list medium default"
+        data-a11y-inset-focus="true"
+        data-a11y-list-active="false"
+        data-id="Option 2"
+        data-selector-id="listItem"
+        data-test-id="Option 2"
+        data-title="Option 2"
+        role="option"
+        tabindex="0"
+      >
+        <div
+          class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="d-flex-shrink-0 titleBox"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <div
+              class="d-basis-auto d-min-w-0 d-flex-shrink selfAlign_center value"
+              data-id="boxComponent"
+              data-selector-id="box"
+              data-test-id="boxComponent"
+            >
+              Option 2
+            </div>
+          </div>
+        </div>
+      </li>
+      <li
+        aria-label="Option 3"
+        aria-selected="false"
+        class="d-flex d-flex-row d-items-center list medium default"
+        data-a11y-inset-focus="true"
+        data-a11y-list-active="false"
+        data-id="Option 3"
+        data-selector-id="listItem"
+        data-test-id="Option 3"
+        data-title="Option 3"
+        role="option"
+        tabindex="0"
+      >
+        <div
+          class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="d-flex-shrink-0 titleBox"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <div
+              class="d-basis-auto d-min-w-0 d-flex-shrink selfAlign_center value"
+              data-id="boxComponent"
+              data-selector-id="box"
+              data-test-id="boxComponent"
+            >
+              Option 3
+            </div>
+          </div>
+        </div>
+      </li>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+exports[`Suggestions Render with needMultiLineText and secondaryValue 1`] = `
+<DocumentFragment>
+  <div
+    class="d-flex d-flex-col"
+    data-id="containerComponent"
+    data-selector-id="container"
+    data-test-id="containerComponent"
+    tabindex="0"
+  >
+    <div
+      class="d-flex-shrink-0"
+      data-id="undefined"
+      data-selector-id="box"
+      data-test-id="undefined"
+    >
+      <li
+        aria-label="Option 1"
+        aria-selected="false"
+        class="d-flex d-flex-row d-items-center list medium default withBorder"
+        data-a11y-inset-focus="true"
+        data-a11y-list-active="false"
+        data-id="Option 1"
+        data-selector-id="listItem"
+        data-test-id="Option 1"
+        data-title="Option 1"
+        role="option"
+        tabindex="0"
+      >
+        <div
+          class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="d-flex-shrink-0 titleBox"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <div
+              class="d-basis-auto d-min-w-0 d-flex-shrink selfAlign_center multiLineValue"
+              data-id="boxComponent"
+              data-selector-id="box"
+              data-test-id="boxComponent"
+            >
+              Option 1
+            </div>
+          </div>
+          <div
+            class="d-flex-shrink-0 secondaryField multiLine"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+            data-title="Secondary value"
+          >
+            Secondary value
+          </div>
+        </div>
+      </li>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+exports[`Suggestions Render with optionType as avatar 1`] = `
+<DocumentFragment>
+  <div
+    class="d-flex d-flex-col"
+    data-id="containerComponent"
+    data-selector-id="container"
+    data-test-id="containerComponent"
+    tabindex="0"
+  >
+    <div
+      class="d-flex-shrink-0"
+      data-id="undefined"
+      data-selector-id="box"
+      data-test-id="undefined"
+    >
+      <li
+        aria-label="Option 1"
+        aria-selected="false"
+        class="d-flex d-flex-row d-items-center list medium default withBorder"
+        data-a11y-inset-focus="true"
+        data-a11y-list-active="false"
+        data-id="Option 1_ListItemWithAvatar"
+        data-selector-id="listItemWithAvatar"
+        data-test-id="Option 1_ListItemWithAvatar"
+        role="option"
+        tabindex="0"
+      >
+        <div
+          class="d-flex-shrink-0 contentWrapper"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="leftAvatar"
+          >
+            <div
+              class="d-flex-shrink-0 d-self-start lhsBoxInner alignLhsBox_center"
+              data-id="boxComponent"
+              data-selector-id="box"
+              data-test-id="boxComponent"
+            >
+              <div
+                class="avatar small small circle primary black"
+                data-id="Avatar"
+                data-selector-id="avatar"
+                data-test-id="Avatar"
+                data-title="Option 1"
+              >
+                <img
+                  alt="Option 1"
+                  class="image animate"
+                  data-id="Avatar_AvatarImg"
+                  data-selector-id="avatar_AvatarImg"
+                  data-test-id="Avatar_AvatarImg"
+                  name="Option 1"
+                  src="avatar.png"
+                />
+                <span
+                  class="shadow black"
+                />
+              </div>
+            </div>
+          </div>
+          <div
+            class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox selfAlign_center"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <div
+              class="d-flex-shrink-0 titleBox"
+              data-id="boxComponent"
+              data-selector-id="box"
+              data-test-id="boxComponent"
+            >
+              <div
+                class="d-basis-auto d-min-w-0 d-flex-shrink value"
+                data-id="boxComponent"
+                data-selector-id="box"
+                data-test-id="boxComponent"
+                data-title="Option 1"
+              >
+                Option 1
+              </div>
+            </div>
+          </div>
+        </div>
+      </li>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+exports[`Suggestions Render with optionType as avatar and avatarPalette as secondary 1`] = `
+<DocumentFragment>
+  <div
+    class="d-flex d-flex-col"
+    data-id="containerComponent"
+    data-selector-id="container"
+    data-test-id="containerComponent"
+    tabindex="0"
+  >
+    <div
+      class="d-flex-shrink-0"
+      data-id="undefined"
+      data-selector-id="box"
+      data-test-id="undefined"
+    >
+      <li
+        aria-label="Option 1"
+        aria-selected="false"
+        class="d-flex d-flex-row d-items-center list medium default withBorder"
+        data-a11y-inset-focus="true"
+        data-a11y-list-active="false"
+        data-id="Option 1_ListItemWithAvatar"
+        data-selector-id="listItemWithAvatar"
+        data-test-id="Option 1_ListItemWithAvatar"
+        role="option"
+        tabindex="0"
+      >
+        <div
+          class="d-flex-shrink-0 contentWrapper"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="leftAvatar"
+          >
+            <div
+              class="d-flex-shrink-0 d-self-start lhsBoxInner alignLhsBox_center"
+              data-id="boxComponent"
+              data-selector-id="box"
+              data-test-id="boxComponent"
+            >
+              <div
+                class="avatar small small circle secondary white"
+                data-id="Avatar"
+                data-selector-id="avatar"
+                data-test-id="Avatar"
+                data-title="Option 1"
+              >
+                <img
+                  alt="Option 1"
+                  class="image animate"
+                  data-id="Avatar_AvatarImg"
+                  data-selector-id="avatar_AvatarImg"
+                  data-test-id="Avatar_AvatarImg"
+                  name="Option 1"
+                  src="avatar.png"
+                />
+                <span
+                  class="shadow white"
+                />
+              </div>
+            </div>
+          </div>
+          <div
+            class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox selfAlign_center"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <div
+              class="d-flex-shrink-0 titleBox"
+              data-id="boxComponent"
+              data-selector-id="box"
+              data-test-id="boxComponent"
+            >
+              <div
+                class="d-basis-auto d-min-w-0 d-flex-shrink value"
+                data-id="boxComponent"
+                data-selector-id="box"
+                data-test-id="boxComponent"
+                data-title="Option 1"
+              >
+                Option 1
+              </div>
+            </div>
+          </div>
+        </div>
+      </li>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+exports[`Suggestions Render with optionType as icon 1`] = `
+<DocumentFragment>
+  <div
+    class="d-flex d-flex-col"
+    data-id="containerComponent"
+    data-selector-id="container"
+    data-test-id="containerComponent"
+    tabindex="0"
+  >
+    <div
+      class="d-flex-shrink-0"
+      data-id="undefined"
+      data-selector-id="box"
+      data-test-id="undefined"
+    >
+      <li
+        aria-label="Option 1"
+        aria-selected="false"
+        class="d-flex d-flex-row d-items-center list medium default withBorder"
+        data-a11y-inset-focus="true"
+        data-a11y-list-active="false"
+        data-id="option 1"
+        data-selector-id="listItemWithIcon"
+        data-test-id="option 1"
+        role="option"
+        tabindex="0"
+      >
+        <div
+          class="d-flex-shrink-0 contentWrapper"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            aria-hidden="true"
+            class="iconBox lhsJustifyContent_center"
+            data-id="option 1_Icon"
+            data-test-id="option 1_Icon"
+          >
+            <div
+              class="d-flex-shrink-0 d-self-start iconWrapper"
+              data-id="boxComponent"
+              data-selector-id="box"
+              data-test-id="boxComponent"
+            >
+              <i
+                aria-hidden="true"
+                class="zd_font_icons ff icon-info basic d-inline-block d-align-middle"
+                data-id="fontIcon"
+                data-selector-id="fontIcon"
+                data-test-id="fontIcon"
+                style="--zd-iconfont-size: var(--zd_font_size12);"
+              />
+            </div>
+          </div>
+          <div
+            class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox selfAlign_center"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <div
+              class="d-flex-shrink-0 titleBox"
+              data-id="boxComponent"
+              data-selector-id="box"
+              data-test-id="boxComponent"
+            >
+              <div
+                class="d-basis-auto d-min-w-0 d-flex-shrink value"
+                data-id="option 1_Text"
+                data-selector-id="box"
+                data-test-id="option 1_Text"
+                data-title="Option 1"
+              >
+                Option 1
+              </div>
+            </div>
+          </div>
+        </div>
+      </li>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+exports[`Suggestions Render with palette as dark 1`] = `
+<DocumentFragment>
+  <div
+    class="d-flex d-flex-col"
+    data-id="containerComponent"
+    data-selector-id="container"
+    data-test-id="containerComponent"
+    tabindex="0"
+  >
+    <div
+      class="d-flex-shrink-0"
+      data-id="undefined"
+      data-selector-id="box"
+      data-test-id="undefined"
+    >
+      <li
+        aria-label="Option 1"
+        aria-selected="false"
+        class="d-flex d-flex-row d-items-center list medium dark withBorder"
+        data-a11y-inset-focus="true"
+        data-a11y-list-active="false"
+        data-id="Option 1"
+        data-selector-id="listItem"
+        data-test-id="Option 1"
+        data-title="Option 1"
+        role="option"
+        tabindex="0"
+      >
+        <div
+          class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="d-flex-shrink-0 titleBox"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <div
+              class="d-basis-auto d-min-w-0 d-flex-shrink selfAlign_center value"
+              data-id="boxComponent"
+              data-selector-id="box"
+              data-test-id="boxComponent"
+            >
+              Option 1
+            </div>
+          </div>
+        </div>
+      </li>
+      <li
+        aria-label="Option 2"
+        aria-selected="false"
+        class="d-flex d-flex-row d-items-center list medium dark withBorder"
+        data-a11y-inset-focus="true"
+        data-a11y-list-active="false"
+        data-id="Option 2"
+        data-selector-id="listItem"
+        data-test-id="Option 2"
+        data-title="Option 2"
+        role="option"
+        tabindex="0"
+      >
+        <div
+          class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="d-flex-shrink-0 titleBox"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <div
+              class="d-basis-auto d-min-w-0 d-flex-shrink selfAlign_center value"
+              data-id="boxComponent"
+              data-selector-id="box"
+              data-test-id="boxComponent"
+            >
+              Option 2
+            </div>
+          </div>
+        </div>
+      </li>
+      <li
+        aria-label="Option 3"
+        aria-selected="false"
+        class="d-flex d-flex-row d-items-center list medium dark withBorder"
+        data-a11y-inset-focus="true"
+        data-a11y-list-active="false"
+        data-id="Option 3"
+        data-selector-id="listItem"
+        data-test-id="Option 3"
+        data-title="Option 3"
+        role="option"
+        tabindex="0"
+      >
+        <div
+          class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="d-flex-shrink-0 titleBox"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <div
+              class="d-basis-auto d-min-w-0 d-flex-shrink selfAlign_center value"
+              data-id="boxComponent"
+              data-selector-id="box"
+              data-test-id="boxComponent"
+            >
+              Option 3
+            </div>
+          </div>
+        </div>
+      </li>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+exports[`Suggestions Render with renderBeforeChildren and optionType as avatar 1`] = `
+<DocumentFragment>
+  <div
+    class="d-flex d-flex-col"
+    data-id="containerComponent"
+    data-selector-id="container"
+    data-test-id="containerComponent"
+    tabindex="0"
+  >
+    <div
+      class="d-flex-shrink-0"
+      data-id="undefined"
+      data-selector-id="box"
+      data-test-id="undefined"
+    >
+      <li
+        aria-label="Option 1"
+        aria-selected="false"
+        class="d-flex d-flex-row d-items-center list medium default withBorder"
+        data-a11y-inset-focus="true"
+        data-a11y-list-active="false"
+        data-id="Option 1_ListItemWithAvatar"
+        data-selector-id="listItemWithAvatar"
+        data-test-id="Option 1_ListItemWithAvatar"
+        role="option"
+        tabindex="0"
+      >
+        <div
+          class="d-flex-shrink-0 contentWrapper"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="leftAvatar"
+          >
+            <div
+              class="d-flex-shrink-0 d-self-start lhsBoxInner alignLhsBox_center"
+              data-id="boxComponent"
+              data-selector-id="box"
+              data-test-id="boxComponent"
+            >
+              <div
+                class="avatar small small circle primary black"
+                data-id="Avatar"
+                data-selector-id="avatar"
+                data-test-id="Avatar"
+                data-title="Option 1"
+              >
+                <img
+                  alt="Option 1"
+                  class="image animate"
+                  data-id="Avatar_AvatarImg"
+                  data-selector-id="avatar_AvatarImg"
+                  data-test-id="Avatar_AvatarImg"
+                  name="Option 1"
+                  src="avatar.png"
+                />
+                <span
+                  class="shadow black"
+                />
+              </div>
+            </div>
+          </div>
+          <div
+            class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox selfAlign_center"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <div
+              class="d-flex-shrink-0 titleBox"
+              data-id="boxComponent"
+              data-selector-id="box"
+              data-test-id="boxComponent"
+            >
+              <div
+                class="d-basis-auto d-min-w-0 d-flex-shrink value"
+                data-id="boxComponent"
+                data-selector-id="box"
+                data-test-id="boxComponent"
+                data-title="Option 1"
+              >
+                Option 1
+              </div>
+            </div>
+          </div>
+        </div>
+      </li>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+exports[`Suggestions Render with renderBeforeChildren as node 1`] = `
+<DocumentFragment>
+  <div
+    class="d-flex d-flex-col"
+    data-id="containerComponent"
+    data-selector-id="container"
+    data-test-id="containerComponent"
+    tabindex="0"
+  >
+    <div
+      class="d-flex-shrink-0"
+      data-id="undefined"
+      data-selector-id="box"
+      data-test-id="undefined"
+    >
+      <li
+        aria-label="Option 1"
+        aria-selected="false"
+        class="d-flex d-flex-row d-items-center list medium default withBorder"
+        data-a11y-inset-focus="true"
+        data-a11y-list-active="false"
+        data-id="Option 1"
+        data-selector-id="listItem"
+        data-test-id="Option 1"
+        data-title="Option 1"
+        role="option"
+        tabindex="0"
+      >
+        <div
+          class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="d-flex-shrink-0 titleBox"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <div
+              class="d-basis-auto d-flex-shrink-0 beforeChild"
+              data-id="boxComponent"
+              data-selector-id="box"
+              data-test-id="boxComponent"
+            >
+              <span>
+                Before children
+              </span>
+            </div>
+            <div
+              class="d-basis-auto d-min-w-0 d-flex-shrink selfAlign_center value"
+              data-id="boxComponent"
+              data-selector-id="box"
+              data-test-id="boxComponent"
+            >
+              Option 1
+            </div>
+          </div>
+        </div>
+      </li>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+exports[`Suggestions Render with secondaryValue 1`] = `
+<DocumentFragment>
+  <div
+    class="d-flex d-flex-col"
+    data-id="containerComponent"
+    data-selector-id="container"
+    data-test-id="containerComponent"
+    tabindex="0"
+  >
+    <div
+      class="d-flex-shrink-0"
+      data-id="undefined"
+      data-selector-id="box"
+      data-test-id="undefined"
+    >
+      <li
+        aria-label="Option 1"
+        aria-selected="false"
+        class="d-flex d-flex-row d-items-center list medium default withBorder"
+        data-a11y-inset-focus="true"
+        data-a11y-list-active="false"
+        data-id="Option 1"
+        data-selector-id="listItem"
+        data-test-id="Option 1"
+        data-title="Option 1"
+        role="option"
+        tabindex="0"
+      >
+        <div
+          class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="d-flex-shrink-0 titleBox"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <div
+              class="d-basis-auto d-min-w-0 d-flex-shrink selfAlign_center value"
+              data-id="boxComponent"
+              data-selector-id="box"
+              data-test-id="boxComponent"
+            >
+              Option 1
+            </div>
+          </div>
+          <div
+            class="d-flex-shrink-0 secondaryField secondaryValue"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+            data-title="Secondary value"
+          >
+            Secondary value
+          </div>
+        </div>
+      </li>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+exports[`Suggestions Render with selectedOptions 1`] = `
+<DocumentFragment>
+  <div
+    class="d-flex d-flex-col"
+    data-id="containerComponent"
+    data-selector-id="container"
+    data-test-id="containerComponent"
+    tabindex="0"
+  >
+    <div
+      class="d-flex-shrink-0"
+      data-id="undefined"
+      data-selector-id="box"
+      data-test-id="undefined"
+    >
+      <li
+        aria-label="Option 1"
+        aria-selected="true"
+        class="d-flex d-flex-row d-items-center list medium default activedefault activewithBorder"
+        data-a11y-inset-focus="true"
+        data-a11y-list-active="false"
+        data-id="Option 1"
+        data-selected="true"
+        data-selector-id="listItem"
+        data-test-id="Option 1"
+        data-title="Option 1"
+        role="option"
+        tabindex="0"
+      >
+        <div
+          class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="d-flex-shrink-0 titleBox"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <div
+              class="d-basis-auto d-min-w-0 d-flex-shrink selfAlign_center value"
+              data-id="boxComponent"
+              data-selector-id="box"
+              data-test-id="boxComponent"
+            >
+              Option 1
+            </div>
+          </div>
+        </div>
+      </li>
+      <li
+        aria-label="Option 2"
+        aria-selected="false"
+        class="d-flex d-flex-row d-items-center list medium default withBorder"
+        data-a11y-inset-focus="true"
+        data-a11y-list-active="false"
+        data-id="Option 2"
+        data-selector-id="listItem"
+        data-test-id="Option 2"
+        data-title="Option 2"
+        role="option"
+        tabindex="0"
+      >
+        <div
+          class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="d-flex-shrink-0 titleBox"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <div
+              class="d-basis-auto d-min-w-0 d-flex-shrink selfAlign_center value"
+              data-id="boxComponent"
+              data-selector-id="box"
+              data-test-id="boxComponent"
+            >
+              Option 2
+            </div>
+          </div>
+        </div>
+      </li>
+      <li
+        aria-label="Option 3"
+        aria-selected="true"
+        class="d-flex d-flex-row d-items-center list medium default activedefault activewithBorder"
+        data-a11y-inset-focus="true"
+        data-a11y-list-active="false"
+        data-id="Option 3"
+        data-selected="true"
+        data-selector-id="listItem"
+        data-test-id="Option 3"
+        data-title="Option 3"
+        role="option"
+        tabindex="0"
+      >
+        <div
+          class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="d-flex-shrink-0 titleBox"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <div
+              class="d-basis-auto d-min-w-0 d-flex-shrink selfAlign_center value"
+              data-id="boxComponent"
+              data-selector-id="box"
+              data-test-id="boxComponent"
+            >
+              Option 3
+            </div>
+          </div>
+        </div>
+      </li>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+exports[`Suggestions Render with selectedOptions and needTick 1`] = `
+<DocumentFragment>
+  <div
+    class="d-flex d-flex-col"
+    data-id="containerComponent"
+    data-selector-id="container"
+    data-test-id="containerComponent"
+    tabindex="0"
+  >
+    <div
+      class="d-flex-shrink-0"
+      data-id="undefined"
+      data-selector-id="box"
+      data-test-id="undefined"
+    >
+      <li
+        aria-label="Option 1"
+        aria-selected="true"
+        class="d-flex d-flex-row d-items-center list medium default activedefault mediumwithTick activewithBorder"
+        data-a11y-inset-focus="true"
+        data-a11y-list-active="false"
+        data-id="Option 1"
+        data-selected="true"
+        data-selector-id="listItem"
+        data-test-id="Option 1"
+        data-title="Option 1"
+        role="option"
+        tabindex="0"
+      >
+        <div
+          class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="d-flex-shrink-0 titleBox"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <div
+              class="d-basis-auto d-min-w-0 d-flex-shrink selfAlign_center value"
+              data-id="boxComponent"
+              data-selector-id="box"
+              data-test-id="boxComponent"
+            >
+              Option 1
+            </div>
+          </div>
+        </div>
+        <div
+          aria-hidden="true"
+          class="d-flex-shrink-0 tickIcon defaultTick"
+          data-id="Option 1_tickIcon"
+          data-selector-id="listItem_tickIcon"
+          data-test-id="Option 1_tickIcon"
+        >
+          <i
+            aria-hidden="true"
+            class="zd_font_icons ff icon-ticknew basic d-inline-block d-align-middle"
+            data-id="fontIcon"
+            data-selector-id="fontIcon"
+            data-test-id="fontIcon"
+            style="--zd-iconfont-size: var(--zd_font_size8);"
+          />
+        </div>
+      </li>
+      <li
+        aria-label="Option 2"
+        aria-selected="false"
+        class="d-flex d-flex-row d-items-center list medium default mediumwithTick withBorder"
+        data-a11y-inset-focus="true"
+        data-a11y-list-active="false"
+        data-id="Option 2"
+        data-selector-id="listItem"
+        data-test-id="Option 2"
+        data-title="Option 2"
+        role="option"
+        tabindex="0"
+      >
+        <div
+          class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="d-flex-shrink-0 titleBox"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <div
+              class="d-basis-auto d-min-w-0 d-flex-shrink selfAlign_center value"
+              data-id="boxComponent"
+              data-selector-id="box"
+              data-test-id="boxComponent"
+            >
+              Option 2
+            </div>
+          </div>
+        </div>
+      </li>
+      <li
+        aria-label="Option 3"
+        aria-selected="true"
+        class="d-flex d-flex-row d-items-center list medium default activedefault mediumwithTick activewithBorder"
+        data-a11y-inset-focus="true"
+        data-a11y-list-active="false"
+        data-id="Option 3"
+        data-selected="true"
+        data-selector-id="listItem"
+        data-test-id="Option 3"
+        data-title="Option 3"
+        role="option"
+        tabindex="0"
+      >
+        <div
+          class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="d-flex-shrink-0 titleBox"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <div
+              class="d-basis-auto d-min-w-0 d-flex-shrink selfAlign_center value"
+              data-id="boxComponent"
+              data-selector-id="box"
+              data-test-id="boxComponent"
+            >
+              Option 3
+            </div>
+          </div>
+        </div>
+        <div
+          aria-hidden="true"
+          class="d-flex-shrink-0 tickIcon defaultTick"
+          data-id="Option 3_tickIcon"
+          data-selector-id="listItem_tickIcon"
+          data-test-id="Option 3_tickIcon"
+        >
+          <i
+            aria-hidden="true"
+            class="zd_font_icons ff icon-ticknew basic d-inline-block d-align-middle"
+            data-id="fontIcon"
+            data-selector-id="fontIcon"
+            data-test-id="fontIcon"
+            style="--zd-iconfont-size: var(--zd_font_size8);"
+          />
+        </div>
+      </li>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+exports[`Suggestions Render with suggestions 1`] = `
+<DocumentFragment>
+  <div
+    class="d-flex d-flex-col"
+    data-id="containerComponent"
+    data-selector-id="container"
+    data-test-id="containerComponent"
+    tabindex="0"
+  >
+    <div
+      class="d-flex-shrink-0"
+      data-id="undefined"
+      data-selector-id="box"
+      data-test-id="undefined"
+    >
+      <li
+        aria-label="Option 1"
+        aria-selected="false"
+        class="d-flex d-flex-row d-items-center list medium default withBorder"
+        data-a11y-inset-focus="true"
+        data-a11y-list-active="false"
+        data-id="Option 1"
+        data-selector-id="listItem"
+        data-test-id="Option 1"
+        data-title="Option 1"
+        role="option"
+        tabindex="0"
+      >
+        <div
+          class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="d-flex-shrink-0 titleBox"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <div
+              class="d-basis-auto d-min-w-0 d-flex-shrink selfAlign_center value"
+              data-id="boxComponent"
+              data-selector-id="box"
+              data-test-id="boxComponent"
+            >
+              Option 1
+            </div>
+          </div>
+        </div>
+      </li>
+      <li
+        aria-label="Option 2"
+        aria-selected="false"
+        class="d-flex d-flex-row d-items-center list medium default withBorder"
+        data-a11y-inset-focus="true"
+        data-a11y-list-active="false"
+        data-id="Option 2"
+        data-selector-id="listItem"
+        data-test-id="Option 2"
+        data-title="Option 2"
+        role="option"
+        tabindex="0"
+      >
+        <div
+          class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="d-flex-shrink-0 titleBox"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <div
+              class="d-basis-auto d-min-w-0 d-flex-shrink selfAlign_center value"
+              data-id="boxComponent"
+              data-selector-id="box"
+              data-test-id="boxComponent"
+            >
+              Option 2
+            </div>
+          </div>
+        </div>
+      </li>
+      <li
+        aria-label="Option 3"
+        aria-selected="false"
+        class="d-flex d-flex-row d-items-center list medium default withBorder"
+        data-a11y-inset-focus="true"
+        data-a11y-list-active="false"
+        data-id="Option 3"
+        data-selector-id="listItem"
+        data-test-id="Option 3"
+        data-title="Option 3"
+        role="option"
+        tabindex="0"
+      >
+        <div
+          class="d-min-h-0 d-min-w-0 d-flex-grow d-basis-0 d-flex-shrink-0 leftBox"
+          data-id="boxComponent"
+          data-selector-id="box"
+          data-test-id="boxComponent"
+        >
+          <div
+            class="d-flex-shrink-0 titleBox"
+            data-id="boxComponent"
+            data-selector-id="box"
+            data-test-id="boxComponent"
+          >
+            <div
+              class="d-basis-auto d-min-w-0 d-flex-shrink selfAlign_center value"
+              data-id="boxComponent"
+              data-selector-id="box"
+              data-test-id="boxComponent"
+            >
+              Option 3
+            </div>
+          </div>
+        </div>
+      </li>
+    </div>
+  </div>
+</DocumentFragment>
+`;
 exports[`Suggestions Should render with renderBeforeChildren 1`] = `
 <DocumentFragment>
   <div