@zohodesk/components 1.6.31 → 1.6.34

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

@@ -1,5 +1,1387 @@
 // Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
+exports[`SelectedOptions Render with dataId 1`] = `
+<DocumentFragment>
+  <div
+    class="d-flex-shrink-0 tag medium"
+    data-id="selected-options-dataId"
+    data-selector-id="box"
+    data-test-id="selected-options-dataId"
+  >
+    <div
+      aria-labelledby="1"
+      class="container effect medium lgRadius danger"
+      data-id="tag_Tag"
+      data-selector-id="tag"
+      data-test-id="tag_Tag"
+      data-title="Option 1"
+      tabindex="0"
+    >
+      <div
+        aria-hidden="true"
+        class="text mediumtext"
+        id="1"
+      >
+        Option 1
+      </div>
+    </div>
+  </div>
+  <div
+    class="d-flex-shrink-0 tag medium"
+    data-id="selected-options-dataId"
+    data-selector-id="box"
+    data-test-id="selected-options-dataId"
+  >
+    <div
+      aria-labelledby="2"
+      class="container effect medium lgRadius danger"
+      data-id="tag_Tag"
+      data-selector-id="tag"
+      data-test-id="tag_Tag"
+      data-title="Option 2"
+      tabindex="0"
+    >
+      <div
+        aria-hidden="true"
+        class="text mediumtext"
+        id="2"
+      >
+        Option 2
+      </div>
+    </div>
+  </div>
+  <div
+    class="d-flex-shrink-0 tag medium"
+    data-id="selected-options-dataId"
+    data-selector-id="box"
+    data-test-id="selected-options-dataId"
+  >
+    <div
+      aria-labelledby="3"
+      class="container effect medium lgRadius danger"
+      data-id="tag_Tag"
+      data-selector-id="tag"
+      data-test-id="tag_Tag"
+      data-title="Option 3"
+      tabindex="0"
+    >
+      <div
+        aria-hidden="true"
+        class="text mediumtext"
+        id="3"
+      >
+        Option 3
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`SelectedOptions Render with highLightedSelectOptions 1`] = `
+<DocumentFragment>
+  <div
+    class="d-flex-shrink-0 tag medium"
+    data-id="selectedOptions"
+    data-selector-id="box"
+    data-test-id="selectedOptions"
+  >
+    <div
+      aria-labelledby="1"
+      class="container effect medium lgRadius danger"
+      data-id="tag_Tag"
+      data-selector-id="tag"
+      data-test-id="tag_Tag"
+      data-title="Option 1"
+      tabindex="0"
+    >
+      <div
+        aria-hidden="true"
+        class="text mediumtext"
+        id="1"
+      >
+        Option 1
+      </div>
+    </div>
+  </div>
+  <div
+    class="d-flex-shrink-0 tag medium"
+    data-id="selectedOptions"
+    data-selector-id="box"
+    data-test-id="selectedOptions"
+  >
+    <div
+      aria-labelledby="2"
+      class="container effect selected activedanger medium lgRadius danger"
+      data-id="tag_TagSelected"
+      data-selector-id="tag"
+      data-test-id="tag_TagSelected"
+      data-title="Option 2"
+      tabindex="0"
+    >
+      <div
+        aria-hidden="true"
+        class="text mediumtext"
+        id="2"
+      >
+        Option 2
+      </div>
+    </div>
+  </div>
+  <div
+    class="d-flex-shrink-0 tag medium"
+    data-id="selectedOptions"
+    data-selector-id="box"
+    data-test-id="selectedOptions"
+  >
+    <div
+      aria-labelledby="3"
+      class="container effect medium lgRadius danger"
+      data-id="tag_Tag"
+      data-selector-id="tag"
+      data-test-id="tag_Tag"
+      data-title="Option 3"
+      tabindex="0"
+    >
+      <div
+        aria-hidden="true"
+        class="text mediumtext"
+        id="3"
+      >
+        Option 3
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`SelectedOptions Render with limit as 2 1`] = `
+<DocumentFragment>
+  <div
+    class="d-flex-shrink-0 tag medium"
+    data-id="selectedOptions"
+    data-selector-id="box"
+    data-test-id="selectedOptions"
+  >
+    <div
+      aria-labelledby="1"
+      class="container effect medium lgRadius danger"
+      data-id="tag_Tag"
+      data-selector-id="tag"
+      data-test-id="tag_Tag"
+      data-title="Option 1"
+      tabindex="0"
+    >
+      <div
+        aria-hidden="true"
+        class="text mediumtext"
+        id="1"
+      >
+        Option 1
+      </div>
+    </div>
+  </div>
+  <div
+    class="d-flex-shrink-0 tag medium"
+    data-id="selectedOptions"
+    data-selector-id="box"
+    data-test-id="selectedOptions"
+  >
+    <div
+      aria-labelledby="2"
+      class="container effect medium lgRadius danger"
+      data-id="tag_Tag"
+      data-selector-id="tag"
+      data-test-id="tag_Tag"
+      data-title="Option 2"
+      tabindex="0"
+    >
+      <div
+        aria-hidden="true"
+        class="text mediumtext"
+        id="2"
+      >
+        Option 2
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`SelectedOptions Render with mixed option types 1`] = `
+<DocumentFragment>
+  <div
+    class="d-flex-shrink-0 tag medium"
+    data-id="selectedOptions"
+    data-selector-id="box"
+    data-test-id="selectedOptions"
+  >
+    <div
+      aria-labelledby="1"
+      class="container effect medium lgRadius danger"
+      data-id="tag_Tag"
+      data-selector-id="tag"
+      data-test-id="tag_Tag"
+      data-title="Option 1"
+      tabindex="0"
+    >
+      <div
+        aria-hidden="true"
+        class="text mediumtext"
+        id="1"
+      >
+        Option 1
+      </div>
+    </div>
+  </div>
+  <div
+    class="d-flex-shrink-0 tag medium"
+    data-id="selectedOptions"
+    data-selector-id="box"
+    data-test-id="selectedOptions"
+  >
+    <div
+      aria-labelledby="2"
+      class="container effect medium lgRadius danger"
+      data-id="tag_Tag"
+      data-selector-id="tag"
+      data-test-id="tag_Tag"
+      data-title="Option 2"
+      tabindex="0"
+    >
+      <div
+        class="avatar"
+      >
+        <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
+        aria-hidden="true"
+        class="text mediumtext"
+        id="2"
+      >
+        Option 2
+      </div>
+    </div>
+  </div>
+  <div
+    class="d-flex-shrink-0 tag medium"
+    data-id="selectedOptions"
+    data-selector-id="box"
+    data-test-id="selectedOptions"
+  >
+    <div
+      aria-labelledby="3"
+      class="container effect medium lgRadius danger"
+      data-id="tag_Tag"
+      data-selector-id="tag"
+      data-test-id="tag_Tag"
+      data-title="Option 3"
+      tabindex="0"
+    >
+      <div
+        aria-hidden="true"
+        class="icon"
+      >
+        <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"
+        />
+      </div>
+      <div
+        aria-hidden="true"
+        class="text mediumtext"
+        id="3"
+      >
+        Option 3
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`SelectedOptions Render with onRemove 1`] = `
+<DocumentFragment>
+  <div
+    class="d-flex-shrink-0 tag medium"
+    data-id="selectedOptions"
+    data-selector-id="box"
+    data-test-id="selectedOptions"
+  >
+    <div
+      aria-labelledby="1"
+      class="container effect medium lgRadius danger"
+      data-id="tag_Tag"
+      data-selector-id="tag"
+      data-test-id="tag_Tag"
+      data-title="Option 1"
+      tabindex="0"
+    >
+      <div
+        aria-hidden="true"
+        class="text mediumtext"
+        id="1"
+      >
+        Option 1
+      </div>
+      <button
+        aria-label="Delete"
+        class="buttonReset close lgRadiusClose closedanger"
+        data-id="tag_RemoveTag"
+        data-test-id="tag_RemoveTag"
+        type="button"
+        value="text"
+      >
+        <div
+          class="d-flex d-h-full d-w-full d-flex-col d-items-center d-justify-center"
+          data-id="containerComponent"
+          data-selector-id="container"
+          data-test-id="containerComponent"
+        >
+          <i
+            aria-hidden="true"
+            class="zd_font_icons ff icon-close2 basic d-inline-block d-align-middle d-font-bold"
+            data-id="fontIcon"
+            data-selector-id="fontIcon"
+            data-test-id="fontIcon"
+            style="--zd-iconfont-size: var(--zd_font_size8);"
+          />
+        </div>
+      </button>
+    </div>
+  </div>
+  <div
+    class="d-flex-shrink-0 tag medium"
+    data-id="selectedOptions"
+    data-selector-id="box"
+    data-test-id="selectedOptions"
+  >
+    <div
+      aria-labelledby="2"
+      class="container effect medium lgRadius danger"
+      data-id="tag_Tag"
+      data-selector-id="tag"
+      data-test-id="tag_Tag"
+      data-title="Option 2"
+      tabindex="0"
+    >
+      <div
+        aria-hidden="true"
+        class="text mediumtext"
+        id="2"
+      >
+        Option 2
+      </div>
+      <button
+        aria-label="Delete"
+        class="buttonReset close lgRadiusClose closedanger"
+        data-id="tag_RemoveTag"
+        data-test-id="tag_RemoveTag"
+        type="button"
+        value="text"
+      >
+        <div
+          class="d-flex d-h-full d-w-full d-flex-col d-items-center d-justify-center"
+          data-id="containerComponent"
+          data-selector-id="container"
+          data-test-id="containerComponent"
+        >
+          <i
+            aria-hidden="true"
+            class="zd_font_icons ff icon-close2 basic d-inline-block d-align-middle d-font-bold"
+            data-id="fontIcon"
+            data-selector-id="fontIcon"
+            data-test-id="fontIcon"
+            style="--zd-iconfont-size: var(--zd_font_size8);"
+          />
+        </div>
+      </button>
+    </div>
+  </div>
+  <div
+    class="d-flex-shrink-0 tag medium"
+    data-id="selectedOptions"
+    data-selector-id="box"
+    data-test-id="selectedOptions"
+  >
+    <div
+      aria-labelledby="3"
+      class="container effect medium lgRadius danger"
+      data-id="tag_Tag"
+      data-selector-id="tag"
+      data-test-id="tag_Tag"
+      data-title="Option 3"
+      tabindex="0"
+    >
+      <div
+        aria-hidden="true"
+        class="text mediumtext"
+        id="3"
+      >
+        Option 3
+      </div>
+      <button
+        aria-label="Delete"
+        class="buttonReset close lgRadiusClose closedanger"
+        data-id="tag_RemoveTag"
+        data-test-id="tag_RemoveTag"
+        type="button"
+        value="text"
+      >
+        <div
+          class="d-flex d-h-full d-w-full d-flex-col d-items-center d-justify-center"
+          data-id="containerComponent"
+          data-selector-id="container"
+          data-test-id="containerComponent"
+        >
+          <i
+            aria-hidden="true"
+            class="zd_font_icons ff icon-close2 basic d-inline-block d-align-middle d-font-bold"
+            data-id="fontIcon"
+            data-selector-id="fontIcon"
+            data-test-id="fontIcon"
+            style="--zd-iconfont-size: var(--zd_font_size8);"
+          />
+        </div>
+      </button>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`SelectedOptions Render with onRemove and a disabled option 1`] = `
+<DocumentFragment>
+  <div
+    class="d-flex-shrink-0 tag medium"
+    data-id="selectedOptions"
+    data-selector-id="box"
+    data-test-id="selectedOptions"
+  >
+    <div
+      aria-labelledby="1"
+      class="container effect medium lgRadius danger"
+      data-id="tag_Tag"
+      data-selector-id="tag"
+      data-test-id="tag_Tag"
+      data-title="Option 1"
+      tabindex="0"
+    >
+      <div
+        aria-hidden="true"
+        class="text mediumtext"
+        id="1"
+      >
+        Option 1
+      </div>
+      <button
+        aria-label="Delete"
+        class="buttonReset close lgRadiusClose closedanger"
+        data-id="tag_RemoveTag"
+        data-test-id="tag_RemoveTag"
+        type="button"
+        value="text"
+      >
+        <div
+          class="d-flex d-h-full d-w-full d-flex-col d-items-center d-justify-center"
+          data-id="containerComponent"
+          data-selector-id="container"
+          data-test-id="containerComponent"
+        >
+          <i
+            aria-hidden="true"
+            class="zd_font_icons ff icon-close2 basic d-inline-block d-align-middle d-font-bold"
+            data-id="fontIcon"
+            data-selector-id="fontIcon"
+            data-test-id="fontIcon"
+            style="--zd-iconfont-size: var(--zd_font_size8);"
+          />
+        </div>
+      </button>
+    </div>
+  </div>
+  <div
+    class="d-flex-shrink-0 tag medium"
+    data-id="selectedOptions"
+    data-selector-id="box"
+    data-test-id="selectedOptions"
+  >
+    <div
+      aria-labelledby="2"
+      class="container effect medium lgRadius danger disabled"
+      data-id="tag_Tag"
+      data-selector-id="tag"
+      data-test-id="tag_Tag"
+      data-title="Option 2"
+      tabindex="-1"
+    >
+      <div
+        aria-hidden="true"
+        class="text mediumtext"
+        id="2"
+      >
+        Option 2
+      </div>
+    </div>
+  </div>
+  <div
+    class="d-flex-shrink-0 tag medium"
+    data-id="selectedOptions"
+    data-selector-id="box"
+    data-test-id="selectedOptions"
+  >
+    <div
+      aria-labelledby="3"
+      class="container effect medium lgRadius danger"
+      data-id="tag_Tag"
+      data-selector-id="tag"
+      data-test-id="tag_Tag"
+      data-title="Option 3"
+      tabindex="0"
+    >
+      <div
+        aria-hidden="true"
+        class="text mediumtext"
+        id="3"
+      >
+        Option 3
+      </div>
+      <button
+        aria-label="Delete"
+        class="buttonReset close lgRadiusClose closedanger"
+        data-id="tag_RemoveTag"
+        data-test-id="tag_RemoveTag"
+        type="button"
+        value="text"
+      >
+        <div
+          class="d-flex d-h-full d-w-full d-flex-col d-items-center d-justify-center"
+          data-id="containerComponent"
+          data-selector-id="container"
+          data-test-id="containerComponent"
+        >
+          <i
+            aria-hidden="true"
+            class="zd_font_icons ff icon-close2 basic d-inline-block d-align-middle d-font-bold"
+            data-id="fontIcon"
+            data-selector-id="fontIcon"
+            data-test-id="fontIcon"
+            style="--zd-iconfont-size: var(--zd_font_size8);"
+          />
+        </div>
+      </button>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`SelectedOptions Render with onRemove and isDisabled 1`] = `
+<DocumentFragment>
+  <div
+    class="d-flex-shrink-0 tag medium"
+    data-id="selectedOptions"
+    data-selector-id="box"
+    data-test-id="selectedOptions"
+  >
+    <div
+      aria-labelledby="1"
+      class="container effect medium lgRadius danger disabled"
+      data-id="tag_Tag"
+      data-selector-id="tag"
+      data-test-id="tag_Tag"
+      data-title="Option 1"
+      tabindex="-1"
+    >
+      <div
+        aria-hidden="true"
+        class="text mediumtext"
+        id="1"
+      >
+        Option 1
+      </div>
+    </div>
+  </div>
+  <div
+    class="d-flex-shrink-0 tag medium"
+    data-id="selectedOptions"
+    data-selector-id="box"
+    data-test-id="selectedOptions"
+  >
+    <div
+      aria-labelledby="2"
+      class="container effect medium lgRadius danger disabled"
+      data-id="tag_Tag"
+      data-selector-id="tag"
+      data-test-id="tag_Tag"
+      data-title="Option 2"
+      tabindex="-1"
+    >
+      <div
+        aria-hidden="true"
+        class="text mediumtext"
+        id="2"
+      >
+        Option 2
+      </div>
+    </div>
+  </div>
+  <div
+    class="d-flex-shrink-0 tag medium"
+    data-id="selectedOptions"
+    data-selector-id="box"
+    data-test-id="selectedOptions"
+  >
+    <div
+      aria-labelledby="3"
+      class="container effect medium lgRadius danger disabled"
+      data-id="tag_Tag"
+      data-selector-id="tag"
+      data-test-id="tag_Tag"
+      data-title="Option 3"
+      tabindex="-1"
+    >
+      <div
+        aria-hidden="true"
+        class="text mediumtext"
+        id="3"
+      >
+        Option 3
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`SelectedOptions Render with onRemove and isReadOnly 1`] = `
+<DocumentFragment>
+  <div
+    class="d-flex-shrink-0 tag medium"
+    data-id="selectedOptions"
+    data-selector-id="box"
+    data-test-id="selectedOptions"
+  >
+    <div
+      aria-labelledby="1"
+      class="container readonly medium lgRadius danger"
+      data-id="tag_Tag"
+      data-selector-id="tag"
+      data-test-id="tag_Tag"
+      data-title="Option 1"
+      tabindex="0"
+    >
+      <div
+        aria-hidden="true"
+        class="text mediumtext"
+        id="1"
+      >
+        Option 1
+      </div>
+    </div>
+  </div>
+  <div
+    class="d-flex-shrink-0 tag medium"
+    data-id="selectedOptions"
+    data-selector-id="box"
+    data-test-id="selectedOptions"
+  >
+    <div
+      aria-labelledby="2"
+      class="container readonly medium lgRadius danger"
+      data-id="tag_Tag"
+      data-selector-id="tag"
+      data-test-id="tag_Tag"
+      data-title="Option 2"
+      tabindex="0"
+    >
+      <div
+        aria-hidden="true"
+        class="text mediumtext"
+        id="2"
+      >
+        Option 2
+      </div>
+    </div>
+  </div>
+  <div
+    class="d-flex-shrink-0 tag medium"
+    data-id="selectedOptions"
+    data-selector-id="box"
+    data-test-id="selectedOptions"
+  >
+    <div
+      aria-labelledby="3"
+      class="container readonly medium lgRadius danger"
+      data-id="tag_Tag"
+      data-selector-id="tag"
+      data-test-id="tag_Tag"
+      data-title="Option 3"
+      tabindex="0"
+    >
+      <div
+        aria-hidden="true"
+        class="text mediumtext"
+        id="3"
+      >
+        Option 3
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`SelectedOptions Render with onSelect 1`] = `
+<DocumentFragment>
+  <div
+    class="d-flex-shrink-0 tag medium"
+    data-id="selectedOptions"
+    data-selector-id="box"
+    data-test-id="selectedOptions"
+  >
+    <div
+      aria-labelledby="1"
+      class="container effect medium lgRadius danger pointer"
+      data-id="tag_Tag"
+      data-selector-id="tag"
+      data-test-id="tag_Tag"
+      data-title="Option 1"
+      tabindex="0"
+    >
+      <div
+        aria-hidden="true"
+        class="text mediumtext"
+        id="1"
+      >
+        Option 1
+      </div>
+    </div>
+  </div>
+  <div
+    class="d-flex-shrink-0 tag medium"
+    data-id="selectedOptions"
+    data-selector-id="box"
+    data-test-id="selectedOptions"
+  >
+    <div
+      aria-labelledby="2"
+      class="container effect medium lgRadius danger pointer"
+      data-id="tag_Tag"
+      data-selector-id="tag"
+      data-test-id="tag_Tag"
+      data-title="Option 2"
+      tabindex="0"
+    >
+      <div
+        aria-hidden="true"
+        class="text mediumtext"
+        id="2"
+      >
+        Option 2
+      </div>
+    </div>
+  </div>
+  <div
+    class="d-flex-shrink-0 tag medium"
+    data-id="selectedOptions"
+    data-selector-id="box"
+    data-test-id="selectedOptions"
+  >
+    <div
+      aria-labelledby="3"
+      class="container effect medium lgRadius danger pointer"
+      data-id="tag_Tag"
+      data-selector-id="tag"
+      data-test-id="tag_Tag"
+      data-title="Option 3"
+      tabindex="0"
+    >
+      <div
+        aria-hidden="true"
+        class="text mediumtext"
+        id="3"
+      >
+        Option 3
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`SelectedOptions Render with optionType as avatar 1`] = `
+<DocumentFragment>
+  <div
+    class="d-flex-shrink-0 tag medium"
+    data-id="selectedOptions"
+    data-selector-id="box"
+    data-test-id="selectedOptions"
+  >
+    <div
+      aria-labelledby="1"
+      class="container effect medium lgRadius danger"
+      data-id="tag_Tag"
+      data-selector-id="tag"
+      data-test-id="tag_Tag"
+      data-title="Option 1"
+      tabindex="0"
+    >
+      <div
+        class="avatar"
+      >
+        <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
+        aria-hidden="true"
+        class="text mediumtext"
+        id="1"
+      >
+        Option 1
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`SelectedOptions Render with optionType as avatar and highLightedSelectOptions 1`] = `
+<DocumentFragment>
+  <div
+    class="d-flex-shrink-0 tag medium"
+    data-id="selectedOptions"
+    data-selector-id="box"
+    data-test-id="selectedOptions"
+  >
+    <div
+      aria-labelledby="1"
+      class="container effect selected activedanger medium lgRadius danger"
+      data-id="tag_TagSelected"
+      data-selector-id="tag"
+      data-test-id="tag_TagSelected"
+      data-title="Option 1"
+      tabindex="0"
+    >
+      <div
+        class="avatar"
+      >
+        <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
+        aria-hidden="true"
+        class="text mediumtext"
+        id="1"
+      >
+        Option 1
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`SelectedOptions Render with optionType as icon 1`] = `
+<DocumentFragment>
+  <div
+    class="d-flex-shrink-0 tag medium"
+    data-id="selectedOptions"
+    data-selector-id="box"
+    data-test-id="selectedOptions"
+  >
+    <div
+      aria-labelledby="1"
+      class="container effect medium lgRadius danger"
+      data-id="tag_Tag"
+      data-selector-id="tag"
+      data-test-id="tag_Tag"
+      data-title="Option 1"
+      tabindex="0"
+    >
+      <div
+        aria-hidden="true"
+        class="icon"
+      >
+        <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
+        aria-hidden="true"
+        class="text mediumtext"
+        id="1"
+      >
+        Option 1
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`SelectedOptions Render with optionType as icon and highLightedSelectOptions 1`] = `
+<DocumentFragment>
+  <div
+    class="d-flex-shrink-0 tag medium"
+    data-id="selectedOptions"
+    data-selector-id="box"
+    data-test-id="selectedOptions"
+  >
+    <div
+      aria-labelledby="1"
+      class="container effect selected activedanger medium lgRadius danger"
+      data-id="tag_TagSelected"
+      data-selector-id="tag"
+      data-test-id="tag_TagSelected"
+      data-title="Option 1"
+      tabindex="0"
+    >
+      <div
+        aria-hidden="true"
+        class="icon"
+      >
+        <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"
+        />
+      </div>
+      <div
+        aria-hidden="true"
+        class="text mediumtext"
+        id="1"
+      >
+        Option 1
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`SelectedOptions Render with palette as dark 1`] = `
+<DocumentFragment>
+  <div
+    class="d-flex-shrink-0 tag medium"
+    data-id="selectedOptions"
+    data-selector-id="box"
+    data-test-id="selectedOptions"
+  >
+    <div
+      aria-labelledby="1"
+      class="container effect medium lgRadius dark"
+      data-id="tag_Tag"
+      data-selector-id="tag"
+      data-test-id="tag_Tag"
+      data-title="Option 1"
+      tabindex="0"
+    >
+      <div
+        aria-hidden="true"
+        class="text mediumtext"
+        id="1"
+      >
+        Option 1
+      </div>
+    </div>
+  </div>
+  <div
+    class="d-flex-shrink-0 tag medium"
+    data-id="selectedOptions"
+    data-selector-id="box"
+    data-test-id="selectedOptions"
+  >
+    <div
+      aria-labelledby="2"
+      class="container effect medium lgRadius dark"
+      data-id="tag_Tag"
+      data-selector-id="tag"
+      data-test-id="tag_Tag"
+      data-title="Option 2"
+      tabindex="0"
+    >
+      <div
+        aria-hidden="true"
+        class="text mediumtext"
+        id="2"
+      >
+        Option 2
+      </div>
+    </div>
+  </div>
+  <div
+    class="d-flex-shrink-0 tag medium"
+    data-id="selectedOptions"
+    data-selector-id="box"
+    data-test-id="selectedOptions"
+  >
+    <div
+      aria-labelledby="3"
+      class="container effect medium lgRadius dark"
+      data-id="tag_Tag"
+      data-selector-id="tag"
+      data-test-id="tag_Tag"
+      data-title="Option 3"
+      tabindex="0"
+    >
+      <div
+        aria-hidden="true"
+        class="text mediumtext"
+        id="3"
+      >
+        Option 3
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`SelectedOptions Render with renderCustomSelectedValue and default option types 1`] = `
+<DocumentFragment>
+  <div
+    class="d-flex-shrink-0 tag medium"
+    data-id="selectedOptions"
+    data-selector-id="box"
+    data-test-id="selectedOptions"
+  >
+    <div
+      aria-labelledby="1"
+      class="container effect medium lgRadius danger"
+      data-id="tag_Tag"
+      data-selector-id="tag"
+      data-test-id="tag_Tag"
+      data-title="Option 1"
+      tabindex="0"
+    >
+      <div
+        aria-hidden="true"
+        class="text mediumtext"
+        id="1"
+      >
+        Option 1
+      </div>
+    </div>
+  </div>
+  <div
+    class="d-flex-shrink-0 tag medium"
+    data-id="selectedOptions"
+    data-selector-id="box"
+    data-test-id="selectedOptions"
+  >
+    <div
+      aria-labelledby="2"
+      class="container effect medium lgRadius danger"
+      data-id="tag_Tag"
+      data-selector-id="tag"
+      data-test-id="tag_Tag"
+      data-title="Option 2"
+      tabindex="0"
+    >
+      <div
+        aria-hidden="true"
+        class="text mediumtext"
+        id="2"
+      >
+        Option 2
+      </div>
+    </div>
+  </div>
+  <div
+    class="d-flex-shrink-0 tag medium"
+    data-id="selectedOptions"
+    data-selector-id="box"
+    data-test-id="selectedOptions"
+  >
+    <div
+      aria-labelledby="3"
+      class="container effect medium lgRadius danger"
+      data-id="tag_Tag"
+      data-selector-id="tag"
+      data-test-id="tag_Tag"
+      data-title="Option 3"
+      tabindex="0"
+    >
+      <div
+        aria-hidden="true"
+        class="text mediumtext"
+        id="3"
+      >
+        Option 3
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`SelectedOptions Render with renderCustomSelectedValue as function receiving state 1`] = `
+<DocumentFragment>
+  <div
+    class="d-flex-shrink-0 tag xmedium"
+    data-id="selectedOptions"
+    data-selector-id="box"
+    data-test-id="selectedOptions"
+  >
+    <span>
+      Option 1 active:true readOnly:undefined disabled:undefined size:xmedium palette:dark
+    </span>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`SelectedOptions Render with renderCustomSelectedValue as function, isPopupOpen and isPopupReady 1`] = `
+<DocumentFragment>
+  <div
+    class="d-flex-shrink-0 tag medium"
+    data-id="selectedOptions"
+    data-selector-id="box"
+    data-test-id="selectedOptions"
+  >
+    <span>
+      open:true ready:true
+    </span>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`SelectedOptions Render with renderCustomSelectedValue as function, isReadOnly and onRemove 1`] = `
+<DocumentFragment>
+  <div
+    class="d-flex-shrink-0 tag medium"
+    data-id="selectedOptions"
+    data-selector-id="box"
+    data-test-id="selectedOptions"
+  >
+    <span>
+      readOnly:true onRemove:object
+    </span>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`SelectedOptions Render with renderCustomSelectedValue as node 1`] = `
+<DocumentFragment>
+  <div
+    class="d-flex-shrink-0 tag medium"
+    data-id="selectedOptions"
+    data-selector-id="box"
+    data-test-id="selectedOptions"
+  >
+    <span>
+      Custom node
+    </span>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`SelectedOptions Render with selectedOptions 1`] = `
+<DocumentFragment>
+  <div
+    class="d-flex-shrink-0 tag medium"
+    data-id="selectedOptions"
+    data-selector-id="box"
+    data-test-id="selectedOptions"
+  >
+    <div
+      aria-labelledby="1"
+      class="container effect medium lgRadius danger"
+      data-id="tag_Tag"
+      data-selector-id="tag"
+      data-test-id="tag_Tag"
+      data-title="Option 1"
+      tabindex="0"
+    >
+      <div
+        aria-hidden="true"
+        class="text mediumtext"
+        id="1"
+      >
+        Option 1
+      </div>
+    </div>
+  </div>
+  <div
+    class="d-flex-shrink-0 tag medium"
+    data-id="selectedOptions"
+    data-selector-id="box"
+    data-test-id="selectedOptions"
+  >
+    <div
+      aria-labelledby="2"
+      class="container effect medium lgRadius danger"
+      data-id="tag_Tag"
+      data-selector-id="tag"
+      data-test-id="tag_Tag"
+      data-title="Option 2"
+      tabindex="0"
+    >
+      <div
+        aria-hidden="true"
+        class="text mediumtext"
+        id="2"
+      >
+        Option 2
+      </div>
+    </div>
+  </div>
+  <div
+    class="d-flex-shrink-0 tag medium"
+    data-id="selectedOptions"
+    data-selector-id="box"
+    data-test-id="selectedOptions"
+  >
+    <div
+      aria-labelledby="3"
+      class="container effect medium lgRadius danger"
+      data-id="tag_Tag"
+      data-selector-id="tag"
+      data-test-id="tag_Tag"
+      data-title="Option 3"
+      tabindex="0"
+    >
+      <div
+        aria-hidden="true"
+        class="text mediumtext"
+        id="3"
+      >
+        Option 3
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`SelectedOptions Render with size as xmedium 1`] = `
+<DocumentFragment>
+  <div
+    class="d-flex-shrink-0 tag xmedium"
+    data-id="selectedOptions"
+    data-selector-id="box"
+    data-test-id="selectedOptions"
+  >
+    <div
+      aria-labelledby="1"
+      class="container effect medium lgRadius danger"
+      data-id="tag_Tag"
+      data-selector-id="tag"
+      data-test-id="tag_Tag"
+      data-title="Option 1"
+      tabindex="0"
+    >
+      <div
+        aria-hidden="true"
+        class="text mediumtext"
+        id="1"
+      >
+        Option 1
+      </div>
+    </div>
+  </div>
+  <div
+    class="d-flex-shrink-0 tag xmedium"
+    data-id="selectedOptions"
+    data-selector-id="box"
+    data-test-id="selectedOptions"
+  >
+    <div
+      aria-labelledby="2"
+      class="container effect medium lgRadius danger"
+      data-id="tag_Tag"
+      data-selector-id="tag"
+      data-test-id="tag_Tag"
+      data-title="Option 2"
+      tabindex="0"
+    >
+      <div
+        aria-hidden="true"
+        class="text mediumtext"
+        id="2"
+      >
+        Option 2
+      </div>
+    </div>
+  </div>
+  <div
+    class="d-flex-shrink-0 tag xmedium"
+    data-id="selectedOptions"
+    data-selector-id="box"
+    data-test-id="selectedOptions"
+  >
+    <div
+      aria-labelledby="3"
+      class="container effect medium lgRadius danger"
+      data-id="tag_Tag"
+      data-selector-id="tag"
+      data-test-id="tag_Tag"
+      data-title="Option 3"
+      tabindex="0"
+    >
+      <div
+        aria-hidden="true"
+        class="text mediumtext"
+        id="3"
+      >
+        Option 3
+      </div>
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
 exports[`SelectedOptions Should render with renderCustomSelectedValue 1`] = `
 <DocumentFragment>
   <div