From 5169493323347ba0b9e453b4ff16089d339f2cd4 Mon Sep 17 00:00:00 2001
From: Zak Burke <zburke@ebsco.com>
Date: Wed, 11 Oct 2023 09:31:44 -0400
Subject: [PATCH] UIORGS-404 bump optional plugins to compatible versions
 (#572)

Use plugins compatible with the requested version of stripes (v9).

Refs UIORGS-404
---
 CHANGELOG.md                                  |   1 +
 package.json                                  |   6 +-
 ...OrganizationContactPeopleForm.test.js.snap | 262 +++----
 .../OrganizationInterfacesForm.test.js.snap   | 212 +++---
 .../__snapshots__/ViewContact.test.js.snap    | 702 +++++++++---------
 5 files changed, 602 insertions(+), 581 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4026bd20..eb9627b4 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -11,6 +11,7 @@
 * Upgrade `Node.js` to `18` version in GitHub Actions. Refs UIORGS-378.
 * *BREAKING* bump `react-intl` to `v6.4.4`. Refs UIORGS-386.
 * Add a message indicating future functionality for EDI naming convention. Refs UIORGS-382.
+* Bump optional plugins to their `@folio/stripes` `v9` compatible versions. Refs UIORGS-404.
 
 ## [4.0.0](https://github.com/folio-org/ui-organizations/tree/v4.0.0) (2023-02-22)
 [Full Changelog](https://github.com/folio-org/ui-organizations/compare/v3.3.1...v4.0.0)
diff --git a/package.json b/package.json
index c1db681a..9e6ca65e 100644
--- a/package.json
+++ b/package.json
@@ -255,7 +255,7 @@
     "@folio/jest-config-stripes": "^2.0.0",
     "@folio/stripes": "^9.0.0",
     "@folio/stripes-cli": "^3.0.0",
-    "@formatjs/cli":  "^6.1.3",
+    "@formatjs/cli": "^6.1.3",
     "babel-jest": "^26.3.0",
     "chai": "^4.2.0",
     "core-js": "^3.6.4",
@@ -302,7 +302,7 @@
     "redux": "^4.0.0"
   },
   "optionalDependencies": {
-    "@folio/plugin-find-contact": "^4.0.0",
-    "@folio/plugin-find-interface": "^4.0.0"
+    "@folio/plugin-find-contact": "^5.0.0",
+    "@folio/plugin-find-interface": "^5.0.0"
   }
 }
diff --git a/src/Organizations/OrganizationForm/OrganizationContactPeopleForm/__snapshots__/OrganizationContactPeopleForm.test.js.snap b/src/Organizations/OrganizationForm/OrganizationContactPeopleForm/__snapshots__/OrganizationContactPeopleForm.test.js.snap
index 73757dde..df1d973e 100644
--- a/src/Organizations/OrganizationForm/OrganizationContactPeopleForm/__snapshots__/OrganizationContactPeopleForm.test.js.snap
+++ b/src/Organizations/OrganizationForm/OrganizationContactPeopleForm/__snapshots__/OrganizationContactPeopleForm.test.js.snap
@@ -10,165 +10,169 @@ exports[`OrganizationContactPeopleForm should render correct structure 1`] = `
         class="col-xs-12"
       >
         <div
-          aria-live="assertive"
-          aria-relevant="additions"
-          class="sr-only"
-          tabindex="-1"
-        />
-        <div
-          aria-rowcount="2"
           class="mclContainer"
-          data-total-count="0"
-          id="contact-list"
-          role="grid"
           style="position: relative; overflow: hidden; height: auto; width: 100%;"
-          tabindex="0"
+          tabindex="-1"
         >
           <div
-            class="mclHeaderContainer"
+            aria-live="assertive"
+            aria-relevant="additions"
+            class="sr-only"
+          />
+          <div
+            aria-rowcount="2"
+            class=""
+            data-total-count="0"
+            id="contact-list"
+            role="grid"
+            tabindex="0"
           >
             <div
-              aria-rowindex="1"
-              class="mclHeaderRow"
-              role="row"
-              style="display: flex; width: 17px;"
+              class="mclHeaderContainer"
             >
               <div
-                aria-sort="none"
-                class="mclHeader"
-                id="list-column-contactname"
-                role="columnheader"
-                style="flex: 0 0 auto;"
-              >
-                ui-organizations.contactPeople.name
-              </div>
-              <div
-                aria-sort="none"
-                class="mclHeader"
-                id="list-column-contactcategories"
-                role="columnheader"
-                style="flex: 0 0 auto;"
-              >
-                ui-organizations.contactPeople.categories
-              </div>
-              <div
-                aria-sort="none"
-                class="mclHeader"
-                id="list-column-contactemails"
-                role="columnheader"
-                style="flex: 0 0 auto;"
-              >
-                ui-organizations.contactPeople.emails
-              </div>
-              <div
-                aria-sort="none"
-                class="mclHeader"
-                id="list-column-notes"
-                role="columnheader"
-                style="flex: 0 0 auto;"
+                aria-rowindex="1"
+                class="mclHeaderRow"
+                role="row"
+                style="display: flex; width: 17px;"
               >
-                ui-organizations.contactPeople.note
+                <div
+                  aria-sort="none"
+                  class="mclHeader"
+                  id="list-column-contactname"
+                  role="columnheader"
+                  style="flex: 0 0 auto;"
+                >
+                  ui-organizations.contactPeople.name
+                </div>
+                <div
+                  aria-sort="none"
+                  class="mclHeader"
+                  id="list-column-contactcategories"
+                  role="columnheader"
+                  style="flex: 0 0 auto;"
+                >
+                  ui-organizations.contactPeople.categories
+                </div>
+                <div
+                  aria-sort="none"
+                  class="mclHeader"
+                  id="list-column-contactemails"
+                  role="columnheader"
+                  style="flex: 0 0 auto;"
+                >
+                  ui-organizations.contactPeople.emails
+                </div>
+                <div
+                  aria-sort="none"
+                  class="mclHeader"
+                  id="list-column-notes"
+                  role="columnheader"
+                  style="flex: 0 0 auto;"
+                >
+                  ui-organizations.contactPeople.note
+                </div>
+                <div
+                  aria-sort="none"
+                  class="mclHeader"
+                  id="list-column-unassigncontact"
+                  role="columnheader"
+                  style="flex: 0 0 auto;"
+                />
               </div>
-              <div
-                aria-sort="none"
-                class="mclHeader"
-                id="list-column-unassigncontact"
-                role="columnheader"
-                style="flex: 0 0 auto;"
-              />
             </div>
-          </div>
-          <div
-            class="mclScrollable"
-            style="position: static; width: 100%;"
-          >
             <div
-              class="mclRowContainer"
-              role="rowgroup"
-              style="position: static;"
+              class="mclScrollable"
+              style="position: static; width: 100%;"
             >
               <div
-                aria-rowindex="2"
-                class="mclRowFormatterContainer"
-                data-row-index="row-0"
-                role="row"
+                class="mclRowContainer"
+                role="rowgroup"
                 style="position: static;"
               >
-                <a
-                  aria-label=""
-                  class="mclRow mclIsOdd mclIsInteractive alignLastColToEnd"
-                  data-row-inner="0"
-                  href="/organizations/contacts/e0fb5df2-cdf1-11e8-a8d5-f2801f1b9fd1/view"
-                  style="min-width: 0px;"
-                  tabindex="0"
+                <div
+                  aria-rowindex="2"
+                  class="mclRowFormatterContainer"
+                  data-row-index="row-0"
+                  role="row"
+                  style="position: static;"
                 >
-                  <div
-                    class="mclCell mclCellStyle"
-                    role="gridcell"
-                  >
-                    Brownstein, Carrie
-                  </div>
-                  <div
-                    class="mclCell mclCellStyle"
-                    role="gridcell"
-                  />
-                  <div
-                    class="mclCell mclCellStyle"
-                    role="gridcell"
+                  <a
+                    aria-label=""
+                    class="mclRow mclIsOdd mclIsInteractive alignLastColToEnd"
+                    data-row-inner="0"
+                    href="/organizations/contacts/e0fb5df2-cdf1-11e8-a8d5-f2801f1b9fd1/view"
+                    style="min-width: 0px;"
+                    tabindex="0"
                   >
-                    cust.service03@amazon.com
-                  </div>
-                  <div
-                    class="mclCell mclCellStyle"
-                    role="gridcell"
-                  >
-                    <span
-                      class="text"
-                      title="notes"
+                    <div
+                      class="mclCell mclCellStyle"
+                      role="gridcell"
                     >
-                      notes
-                    </span>
-                  </div>
-                  <div
-                    class="mclCell mclCellStyle"
-                    role="gridcell"
-                  >
-                    <button
-                      aria-label="ui-organizations.contacts.button.unassign"
-                      class="button fieldControl align-end"
-                      data-test-unassign-contact="true"
-                      type="button"
+                      Brownstein, Carrie
+                    </div>
+                    <div
+                      class="mclCell mclCellStyle"
+                      role="gridcell"
+                    />
+                    <div
+                      class="mclCell mclCellStyle"
+                      role="gridcell"
+                    >
+                      cust.service03@amazon.com
+                    </div>
+                    <div
+                      class="mclCell mclCellStyle"
+                      role="gridcell"
                     >
                       <span
-                        class="inner"
+                        class="text"
+                        title="notes"
                       >
-                        <span>
-                          Icon
-                        </span>
+                        notes
                       </span>
-                    </button>
-                  </div>
-                </a>
-              </div>
-              <div
-                class="mclEndOfListContainer"
-                data-end-of-list="1"
-              >
+                    </div>
+                    <div
+                      class="mclCell mclCellStyle"
+                      role="gridcell"
+                    >
+                      <button
+                        aria-label="ui-organizations.contacts.button.unassign"
+                        class="button fieldControl align-end"
+                        data-test-unassign-contact="true"
+                        type="button"
+                      >
+                        <span
+                          class="inner"
+                        >
+                          <span>
+                            Icon
+                          </span>
+                        </span>
+                      </button>
+                    </div>
+                  </a>
+                </div>
                 <div
-                  class="mclCenteredContainer"
-                  style="visibility: hidden; height: 0px; padding: 0px; width: 0px;"
+                  class="mclEndOfListContainer"
+                  data-end-of-list="1"
                 >
                   <div
-                    class="textCentered"
-                    data-test-layout="true"
+                    class="mclCenteredContainer"
+                    style="visibility: hidden; height: 0px; padding: 0px; width: 0px;"
                   >
                     <div
-                      class="mclEndOfList"
+                      class="textCentered"
                       data-test-layout="true"
                     >
-                      <span>
-                        Icon
-                      </span>
+                      <div
+                        class="mclEndOfList"
+                        data-test-layout="true"
+                      >
+                        <span>
+                          Icon
+                        </span>
+                      </div>
                     </div>
                   </div>
                 </div>
diff --git a/src/Organizations/OrganizationForm/OrganizationInterfacesForm/__snapshots__/OrganizationInterfacesForm.test.js.snap b/src/Organizations/OrganizationForm/OrganizationInterfacesForm/__snapshots__/OrganizationInterfacesForm.test.js.snap
index 80fd9bb2..87554144 100644
--- a/src/Organizations/OrganizationForm/OrganizationInterfacesForm/__snapshots__/OrganizationInterfacesForm.test.js.snap
+++ b/src/Organizations/OrganizationForm/OrganizationInterfacesForm/__snapshots__/OrganizationInterfacesForm.test.js.snap
@@ -10,90 +10,74 @@ exports[`OrganizationInterfacesForm should render correct structure 1`] = `
         class="col-xs-12"
       >
         <div
-          aria-live="assertive"
-          aria-relevant="additions"
-          class="sr-only"
-          tabindex="-1"
-        />
-        <div
-          aria-rowcount="2"
           class="mclContainer"
-          data-total-count="0"
-          id="interface-list"
-          role="grid"
           style="position: relative; overflow: hidden; height: auto; width: 100%;"
-          tabindex="0"
+          tabindex="-1"
         >
           <div
-            class="mclHeaderContainer"
+            aria-live="assertive"
+            aria-relevant="additions"
+            class="sr-only"
+          />
+          <div
+            aria-rowcount="2"
+            class=""
+            data-total-count="0"
+            id="interface-list"
+            role="grid"
+            tabindex="0"
           >
             <div
-              aria-rowindex="1"
-              class="mclHeaderRow"
-              role="row"
-              style="display: flex; width: 17px;"
+              class="mclHeaderContainer"
             >
               <div
-                aria-sort="none"
-                class="mclHeader"
-                id="list-column-interfacename"
-                role="columnheader"
-                style="flex: 0 0 auto;"
-              >
-                ui-organizations.interface.name
-              </div>
-              <div
-                aria-sort="none"
-                class="mclHeader"
-                id="list-column-interfaceurl"
-                role="columnheader"
-                style="flex: 0 0 auto;"
+                aria-rowindex="1"
+                class="mclHeaderRow"
+                role="row"
+                style="display: flex; width: 17px;"
               >
-                ui-organizations.interface.url
+                <div
+                  aria-sort="none"
+                  class="mclHeader"
+                  id="list-column-interfacename"
+                  role="columnheader"
+                  style="flex: 0 0 auto;"
+                >
+                  ui-organizations.interface.name
+                </div>
+                <div
+                  aria-sort="none"
+                  class="mclHeader"
+                  id="list-column-interfaceurl"
+                  role="columnheader"
+                  style="flex: 0 0 auto;"
+                >
+                  ui-organizations.interface.url
+                </div>
+                <div
+                  aria-sort="none"
+                  class="mclHeader"
+                  id="list-column-unassigninterface"
+                  role="columnheader"
+                  style="flex: 0 0 auto;"
+                />
               </div>
-              <div
-                aria-sort="none"
-                class="mclHeader"
-                id="list-column-unassigninterface"
-                role="columnheader"
-                style="flex: 0 0 auto;"
-              />
             </div>
-          </div>
-          <div
-            class="mclScrollable"
-            style="position: static; width: 100%;"
-          >
             <div
-              class="mclRowContainer"
-              role="rowgroup"
-              style="position: static;"
+              class="mclScrollable"
+              style="position: static; width: 100%;"
             >
               <div
-                aria-rowindex="2"
-                class="mclRowFormatterContainer"
-                data-row-index="row-0"
-                role="row"
+                class="mclRowContainer"
+                role="rowgroup"
                 style="position: static;"
               >
-                <a
-                  aria-label=""
-                  class="mclRow mclIsOdd mclIsInteractive alignLastColToEnd"
-                  data-row-inner="0"
-                  href="/organizations/interface/793b9d42-ae12-41d7-a36a-f33e5b9e82c5/view"
-                  style="min-width: 0px;"
-                  tabindex="0"
-                >
-                  <div
-                    class="mclCell mclCellStyle"
-                    role="gridcell"
-                  >
-                    GOBI
-                  </div>
-                </a>
                 <div
-                  class="mclCell mclCellStyle"
-                  role="gridcell"
+                  aria-rowindex="2"
+                  class="mclRowFormatterContainer"
+                  data-row-index="row-0"
+                  role="row"
+                  style="position: static;"
                 >
                   <a
                     aria-label=""
@@ -102,56 +86,76 @@ exports[`OrganizationInterfacesForm should render correct structure 1`] = `
                     href="/organizations/interface/793b9d42-ae12-41d7-a36a-f33e5b9e82c5/view"
                     style="min-width: 0px;"
                     tabindex="0"
-                  />
-                  <a
-                    class="root"
-                    data-test-text-link="true"
-                    href="www.gobi3.com"
-                    rel="noopener noreferrer"
-                    target="_blank"
                   >
-                    www.gobi3.com
+                    <div
+                      class="mclCell mclCellStyle"
+                      role="gridcell"
+                    >
+                      GOBI
+                    </div>
                   </a>
-                </div>
-                <div
-                  class="mclCell mclCellStyle"
-                  role="gridcell"
-                >
-                  <button
-                    aria-label="ui-organizations.interface.button.unassign"
-                    class="button fieldControl align-end"
-                    data-test-unassign-interface="true"
-                    type="button"
+                  <div
+                    class="mclCell mclCellStyle"
+                    role="gridcell"
                   >
-                    <span
-                      class="inner"
+                    <a
+                      aria-label=""
+                      class="mclRow mclIsOdd mclIsInteractive alignLastColToEnd"
+                      data-row-inner="0"
+                      href="/organizations/interface/793b9d42-ae12-41d7-a36a-f33e5b9e82c5/view"
+                      style="min-width: 0px;"
+                      tabindex="0"
+                    />
+                    <a
+                      class="root"
+                      data-test-text-link="true"
+                      href="www.gobi3.com"
+                      rel="noopener noreferrer"
+                      target="_blank"
                     >
-                      <span>
-                        Icon
+                      www.gobi3.com
+                    </a>
+                  </div>
+                  <div
+                    class="mclCell mclCellStyle"
+                    role="gridcell"
+                  >
+                    <button
+                      aria-label="ui-organizations.interface.button.unassign"
+                      class="button fieldControl align-end"
+                      data-test-unassign-interface="true"
+                      type="button"
+                    >
+                      <span
+                        class="inner"
+                      >
+                        <span>
+                          Icon
+                        </span>
                       </span>
-                    </span>
-                  </button>
+                    </button>
+                  </div>
                 </div>
-              </div>
-              <div
-                class="mclEndOfListContainer"
-                data-end-of-list="1"
-              >
                 <div
-                  class="mclCenteredContainer"
-                  style="visibility: hidden; height: 0px; padding: 0px; width: 0px;"
+                  class="mclEndOfListContainer"
+                  data-end-of-list="1"
                 >
                   <div
-                    class="textCentered"
-                    data-test-layout="true"
+                    class="mclCenteredContainer"
+                    style="visibility: hidden; height: 0px; padding: 0px; width: 0px;"
                   >
                     <div
-                      class="mclEndOfList"
+                      class="textCentered"
                       data-test-layout="true"
                     >
-                      <span>
-                        Icon
-                      </span>
+                      <div
+                        class="mclEndOfList"
+                        data-test-layout="true"
+                      >
+                        <span>
+                          Icon
+                        </span>
+                      </div>
                     </div>
                   </div>
                 </div>
diff --git a/src/contacts/ViewContact/__snapshots__/ViewContact.test.js.snap b/src/contacts/ViewContact/__snapshots__/ViewContact.test.js.snap
index 626cfe88..e238b370 100644
--- a/src/contacts/ViewContact/__snapshots__/ViewContact.test.js.snap
+++ b/src/contacts/ViewContact/__snapshots__/ViewContact.test.js.snap
@@ -439,148 +439,152 @@ exports[`ViewContact should render correct structure 1`] = `
                     role="region"
                   >
                     <div
-                      aria-live="assertive"
-                      aria-relevant="additions"
-                      class="sr-only"
-                      tabindex="-1"
-                    />
-                    <div
-                      aria-rowcount="2"
                       class="mclContainer"
-                      data-total-count="0"
-                      role="grid"
                       style="position: relative; overflow: hidden; height: auto; width: 100%;"
-                      tabindex="0"
+                      tabindex="-1"
                     >
                       <div
-                        class="mclHeaderContainer"
+                        aria-live="assertive"
+                        aria-relevant="additions"
+                        class="sr-only"
+                      />
+                      <div
+                        aria-rowcount="2"
+                        class=""
+                        data-total-count="0"
+                        role="grid"
+                        tabindex="0"
                       >
                         <div
-                          aria-rowindex="1"
-                          class="mclHeaderRow"
-                          role="row"
-                          style="display: flex; width: 17px;"
+                          class="mclHeaderContainer"
                         >
                           <div
-                            aria-sort="none"
-                            class="mclHeader"
-                            id="list-column-email"
-                            role="columnheader"
-                            style="flex: 0 0 auto;"
-                          >
-                            ui-organizations.contactPeople.email
-                          </div>
-                          <div
-                            aria-sort="none"
-                            class="mclHeader"
-                            id="list-column-emaildescription"
-                            role="columnheader"
-                            style="flex: 0 0 auto;"
-                          >
-                            ui-organizations.contactPeople.description
-                          </div>
-                          <div
-                            aria-sort="none"
-                            class="mclHeader"
-                            id="list-column-emaillanguage"
-                            role="columnheader"
-                            style="flex: 0 0 auto;"
-                          >
-                            ui-organizations.contactPeople.language
-                          </div>
-                          <div
-                            aria-sort="none"
-                            class="mclHeader"
-                            id="list-column-emailcategories"
-                            role="columnheader"
-                            style="flex: 0 0 auto;"
-                          >
-                            ui-organizations.contactPeople.categories
-                          </div>
-                          <div
-                            aria-sort="none"
-                            class="mclHeader"
-                            id="list-column-emailprimary"
-                            role="columnheader"
-                            style="flex: 0 0 auto;"
+                            aria-rowindex="1"
+                            class="mclHeaderRow"
+                            role="row"
+                            style="display: flex; width: 17px;"
                           >
-                            ui-organizations.primaryItem
+                            <div
+                              aria-sort="none"
+                              class="mclHeader"
+                              id="list-column-email"
+                              role="columnheader"
+                              style="flex: 0 0 auto;"
+                            >
+                              ui-organizations.contactPeople.email
+                            </div>
+                            <div
+                              aria-sort="none"
+                              class="mclHeader"
+                              id="list-column-emaildescription"
+                              role="columnheader"
+                              style="flex: 0 0 auto;"
+                            >
+                              ui-organizations.contactPeople.description
+                            </div>
+                            <div
+                              aria-sort="none"
+                              class="mclHeader"
+                              id="list-column-emaillanguage"
+                              role="columnheader"
+                              style="flex: 0 0 auto;"
+                            >
+                              ui-organizations.contactPeople.language
+                            </div>
+                            <div
+                              aria-sort="none"
+                              class="mclHeader"
+                              id="list-column-emailcategories"
+                              role="columnheader"
+                              style="flex: 0 0 auto;"
+                            >
+                              ui-organizations.contactPeople.categories
+                            </div>
+                            <div
+                              aria-sort="none"
+                              class="mclHeader"
+                              id="list-column-emailprimary"
+                              role="columnheader"
+                              style="flex: 0 0 auto;"
+                            >
+                              ui-organizations.primaryItem
+                            </div>
                           </div>
                         </div>
-                      </div>
-                      <div
-                        class="mclScrollable"
-                        style="position: static; width: 100%;"
-                        tabindex="0"
-                      >
                         <div
-                          class="mclRowContainer"
-                          role="rowgroup"
-                          style="position: static;"
+                          class="mclScrollable"
+                          style="position: static; width: 100%;"
+                          tabindex="0"
                         >
                           <div
-                            aria-rowindex="2"
-                            class="mclRowFormatterContainer"
-                            data-row-index="row-0"
-                            role="row"
+                            class="mclRowContainer"
+                            role="rowgroup"
                             style="position: static;"
                           >
                             <div
-                              class="mclRow mclIsOdd"
-                              data-row-inner="0"
-                              style="min-width: 0px;"
+                              aria-rowindex="2"
+                              class="mclRowFormatterContainer"
+                              data-row-index="row-0"
+                              role="row"
+                              style="position: static;"
                             >
                               <div
-                                class="mclCell mclCellStyle"
-                                role="gridcell"
+                                class="mclRow mclIsOdd"
+                                data-row-inner="0"
+                                style="min-width: 0px;"
                               >
-                                cust.service03@amazon.com
-                              </div>
-                              <div
-                                class="mclCell mclCellStyle"
-                                role="gridcell"
-                              >
-                                customer service
-                              </div>
-                              <div
-                                class="mclCell mclCellStyle"
-                                role="gridcell"
-                              >
-                                English
-                              </div>
-                              <div
-                                class="mclCell mclCellStyle"
-                                role="gridcell"
-                              >
-                                Customer Service
-                              </div>
-                              <div
-                                class="mclCell mclCellStyle"
-                                role="gridcell"
-                              >
-                                ui-organizations.primaryItem
+                                <div
+                                  class="mclCell mclCellStyle"
+                                  role="gridcell"
+                                >
+                                  cust.service03@amazon.com
+                                </div>
+                                <div
+                                  class="mclCell mclCellStyle"
+                                  role="gridcell"
+                                >
+                                  customer service
+                                </div>
+                                <div
+                                  class="mclCell mclCellStyle"
+                                  role="gridcell"
+                                >
+                                  English
+                                </div>
+                                <div
+                                  class="mclCell mclCellStyle"
+                                  role="gridcell"
+                                >
+                                  Customer Service
+                                </div>
+                                <div
+                                  class="mclCell mclCellStyle"
+                                  role="gridcell"
+                                >
+                                  ui-organizations.primaryItem
+                                </div>
                               </div>
                             </div>
-                          </div>
-                          <div
-                            class="mclEndOfListContainer"
-                            data-end-of-list="1"
-                          >
                             <div
-                              class="mclCenteredContainer"
-                              style="visibility: hidden; height: 0px; padding: 0px; width: 0px;"
+                              class="mclEndOfListContainer"
+                              data-end-of-list="1"
                             >
                               <div
-                                class="textCentered"
-                                data-test-layout="true"
+                                class="mclCenteredContainer"
+                                style="visibility: hidden; height: 0px; padding: 0px; width: 0px;"
                               >
                                 <div
-                                  class="mclEndOfList"
+                                  class="textCentered"
                                   data-test-layout="true"
                                 >
-                                  <span>
-                                    Icon
-                                  </span>
+                                  <div
+                                    class="mclEndOfList"
+                                    data-test-layout="true"
+                                  >
+                                    <span>
+                                      Icon
+                                    </span>
+                                  </div>
                                 </div>
                               </div>
                             </div>
@@ -646,148 +650,152 @@ exports[`ViewContact should render correct structure 1`] = `
                     role="region"
                   >
                     <div
-                      aria-live="assertive"
-                      aria-relevant="additions"
-                      class="sr-only"
-                      tabindex="-1"
-                    />
-                    <div
-                      aria-rowcount="2"
                       class="mclContainer"
-                      data-total-count="0"
-                      role="grid"
                       style="position: relative; overflow: hidden; height: auto; width: 100%;"
-                      tabindex="0"
+                      tabindex="-1"
                     >
                       <div
-                        class="mclHeaderContainer"
+                        aria-live="assertive"
+                        aria-relevant="additions"
+                        class="sr-only"
+                      />
+                      <div
+                        aria-rowcount="2"
+                        class=""
+                        data-total-count="0"
+                        role="grid"
+                        tabindex="0"
                       >
                         <div
-                          aria-rowindex="1"
-                          class="mclHeaderRow"
-                          role="row"
-                          style="display: flex; width: 17px;"
+                          class="mclHeaderContainer"
                         >
                           <div
-                            aria-sort="none"
-                            class="mclHeader"
-                            id="list-column-phonenumber"
-                            role="columnheader"
-                            style="flex: 0 0 auto;"
-                          >
-                            ui-organizations.contactPeople.phoneNumber
-                          </div>
-                          <div
-                            aria-sort="none"
-                            class="mclHeader"
-                            id="list-column-phonetype"
-                            role="columnheader"
-                            style="flex: 0 0 auto;"
-                          >
-                            ui-organizations.contactPeople.type
-                          </div>
-                          <div
-                            aria-sort="none"
-                            class="mclHeader"
-                            id="list-column-phonelanguage"
-                            role="columnheader"
-                            style="flex: 0 0 auto;"
-                          >
-                            ui-organizations.contactPeople.language
-                          </div>
-                          <div
-                            aria-sort="none"
-                            class="mclHeader"
-                            id="list-column-phonecategories"
-                            role="columnheader"
-                            style="flex: 0 0 auto;"
-                          >
-                            ui-organizations.contactPeople.categories
-                          </div>
-                          <div
-                            aria-sort="none"
-                            class="mclHeader"
-                            id="list-column-phoneprimary"
-                            role="columnheader"
-                            style="flex: 0 0 auto;"
+                            aria-rowindex="1"
+                            class="mclHeaderRow"
+                            role="row"
+                            style="display: flex; width: 17px;"
                           >
-                            ui-organizations.primaryItem
+                            <div
+                              aria-sort="none"
+                              class="mclHeader"
+                              id="list-column-phonenumber"
+                              role="columnheader"
+                              style="flex: 0 0 auto;"
+                            >
+                              ui-organizations.contactPeople.phoneNumber
+                            </div>
+                            <div
+                              aria-sort="none"
+                              class="mclHeader"
+                              id="list-column-phonetype"
+                              role="columnheader"
+                              style="flex: 0 0 auto;"
+                            >
+                              ui-organizations.contactPeople.type
+                            </div>
+                            <div
+                              aria-sort="none"
+                              class="mclHeader"
+                              id="list-column-phonelanguage"
+                              role="columnheader"
+                              style="flex: 0 0 auto;"
+                            >
+                              ui-organizations.contactPeople.language
+                            </div>
+                            <div
+                              aria-sort="none"
+                              class="mclHeader"
+                              id="list-column-phonecategories"
+                              role="columnheader"
+                              style="flex: 0 0 auto;"
+                            >
+                              ui-organizations.contactPeople.categories
+                            </div>
+                            <div
+                              aria-sort="none"
+                              class="mclHeader"
+                              id="list-column-phoneprimary"
+                              role="columnheader"
+                              style="flex: 0 0 auto;"
+                            >
+                              ui-organizations.primaryItem
+                            </div>
                           </div>
                         </div>
-                      </div>
-                      <div
-                        class="mclScrollable"
-                        style="position: static; width: 100%;"
-                        tabindex="0"
-                      >
                         <div
-                          class="mclRowContainer"
-                          role="rowgroup"
-                          style="position: static;"
+                          class="mclScrollable"
+                          style="position: static; width: 100%;"
+                          tabindex="0"
                         >
                           <div
-                            aria-rowindex="2"
-                            class="mclRowFormatterContainer"
-                            data-row-index="row-0"
-                            role="row"
+                            class="mclRowContainer"
+                            role="rowgroup"
                             style="position: static;"
                           >
                             <div
-                              class="mclRow mclIsOdd"
-                              data-row-inner="0"
-                              style="min-width: 0px;"
+                              aria-rowindex="2"
+                              class="mclRowFormatterContainer"
+                              data-row-index="row-0"
+                              role="row"
+                              style="position: static;"
                             >
                               <div
-                                class="mclCell mclCellStyle"
-                                role="gridcell"
-                              >
-                                1-888-238-22090
-                              </div>
-                              <div
-                                class="mclCell mclCellStyle"
-                                role="gridcell"
-                              >
-                                Mobile
-                              </div>
-                              <div
-                                class="mclCell mclCellStyle"
-                                role="gridcell"
-                              >
-                                English
-                              </div>
-                              <div
-                                class="mclCell mclCellStyle"
-                                role="gridcell"
+                                class="mclRow mclIsOdd"
+                                data-row-inner="0"
+                                style="min-width: 0px;"
                               >
-                                Customer Service
-                              </div>
-                              <div
-                                class="mclCell mclCellStyle"
-                                role="gridcell"
-                              >
-                                ui-organizations.primaryItem
+                                <div
+                                  class="mclCell mclCellStyle"
+                                  role="gridcell"
+                                >
+                                  1-888-238-22090
+                                </div>
+                                <div
+                                  class="mclCell mclCellStyle"
+                                  role="gridcell"
+                                >
+                                  Mobile
+                                </div>
+                                <div
+                                  class="mclCell mclCellStyle"
+                                  role="gridcell"
+                                >
+                                  English
+                                </div>
+                                <div
+                                  class="mclCell mclCellStyle"
+                                  role="gridcell"
+                                >
+                                  Customer Service
+                                </div>
+                                <div
+                                  class="mclCell mclCellStyle"
+                                  role="gridcell"
+                                >
+                                  ui-organizations.primaryItem
+                                </div>
                               </div>
                             </div>
-                          </div>
-                          <div
-                            class="mclEndOfListContainer"
-                            data-end-of-list="1"
-                          >
                             <div
-                              class="mclCenteredContainer"
-                              style="visibility: hidden; height: 0px; padding: 0px; width: 0px;"
+                              class="mclEndOfListContainer"
+                              data-end-of-list="1"
                             >
                               <div
-                                class="textCentered"
-                                data-test-layout="true"
+                                class="mclCenteredContainer"
+                                style="visibility: hidden; height: 0px; padding: 0px; width: 0px;"
                               >
                                 <div
-                                  class="mclEndOfList"
+                                  class="textCentered"
                                   data-test-layout="true"
                                 >
-                                  <span>
-                                    Icon
-                                  </span>
+                                  <div
+                                    class="mclEndOfList"
+                                    data-test-layout="true"
+                                  >
+                                    <span>
+                                      Icon
+                                    </span>
+                                  </div>
                                 </div>
                               </div>
                             </div>
@@ -853,155 +861,159 @@ exports[`ViewContact should render correct structure 1`] = `
                     role="region"
                   >
                     <div
-                      aria-live="assertive"
-                      aria-relevant="additions"
-                      class="sr-only"
-                      tabindex="-1"
-                    />
-                    <div
-                      aria-rowcount="2"
                       class="mclContainer"
-                      data-total-count="0"
-                      role="grid"
                       style="position: relative; overflow: hidden; height: auto; width: 100%;"
-                      tabindex="0"
+                      tabindex="-1"
                     >
                       <div
-                        class="mclHeaderContainer"
+                        aria-live="assertive"
+                        aria-relevant="additions"
+                        class="sr-only"
+                      />
+                      <div
+                        aria-rowcount="2"
+                        class=""
+                        data-total-count="0"
+                        role="grid"
+                        tabindex="0"
                       >
                         <div
-                          aria-rowindex="1"
-                          class="mclHeaderRow"
-                          role="row"
-                          style="display: flex; width: 17px;"
+                          class="mclHeaderContainer"
                         >
                           <div
-                            aria-sort="none"
-                            class="mclHeader"
-                            id="list-column-url"
-                            role="columnheader"
-                            style="flex: 0 0 auto;"
-                          >
-                            ui-organizations.contactPeople.name
-                          </div>
-                          <div
-                            aria-sort="none"
-                            class="mclHeader"
-                            id="list-column-urldescription"
-                            role="columnheader"
-                            style="flex: 0 0 auto;"
-                          >
-                            ui-organizations.contactPeople.description
-                          </div>
-                          <div
-                            aria-sort="none"
-                            class="mclHeader"
-                            id="list-column-urllanguage"
-                            role="columnheader"
-                            style="flex: 0 0 auto;"
-                          >
-                            ui-organizations.contactPeople.language
-                          </div>
-                          <div
-                            aria-sort="none"
-                            class="mclHeader"
-                            id="list-column-urlcategories"
-                            role="columnheader"
-                            style="flex: 0 0 auto;"
-                          >
-                            ui-organizations.contactPeople.categories
-                          </div>
-                          <div
-                            aria-sort="none"
-                            class="mclHeader"
-                            id="list-column-urlprimary"
-                            role="columnheader"
-                            style="flex: 0 0 auto;"
+                            aria-rowindex="1"
+                            class="mclHeaderRow"
+                            role="row"
+                            style="display: flex; width: 17px;"
                           >
-                            ui-organizations.primaryItem
+                            <div
+                              aria-sort="none"
+                              class="mclHeader"
+                              id="list-column-url"
+                              role="columnheader"
+                              style="flex: 0 0 auto;"
+                            >
+                              ui-organizations.contactPeople.name
+                            </div>
+                            <div
+                              aria-sort="none"
+                              class="mclHeader"
+                              id="list-column-urldescription"
+                              role="columnheader"
+                              style="flex: 0 0 auto;"
+                            >
+                              ui-organizations.contactPeople.description
+                            </div>
+                            <div
+                              aria-sort="none"
+                              class="mclHeader"
+                              id="list-column-urllanguage"
+                              role="columnheader"
+                              style="flex: 0 0 auto;"
+                            >
+                              ui-organizations.contactPeople.language
+                            </div>
+                            <div
+                              aria-sort="none"
+                              class="mclHeader"
+                              id="list-column-urlcategories"
+                              role="columnheader"
+                              style="flex: 0 0 auto;"
+                            >
+                              ui-organizations.contactPeople.categories
+                            </div>
+                            <div
+                              aria-sort="none"
+                              class="mclHeader"
+                              id="list-column-urlprimary"
+                              role="columnheader"
+                              style="flex: 0 0 auto;"
+                            >
+                              ui-organizations.primaryItem
+                            </div>
                           </div>
                         </div>
-                      </div>
-                      <div
-                        class="mclScrollable"
-                        style="position: static; width: 100%;"
-                      >
                         <div
-                          class="mclRowContainer"
-                          role="rowgroup"
-                          style="position: static;"
+                          class="mclScrollable"
+                          style="position: static; width: 100%;"
                         >
                           <div
-                            aria-rowindex="2"
-                            class="mclRowFormatterContainer"
-                            data-row-index="row-0"
-                            role="row"
+                            class="mclRowContainer"
+                            role="rowgroup"
                             style="position: static;"
                           >
                             <div
-                              class="mclRow mclIsOdd"
-                              data-row-inner="0"
-                              style="min-width: 0px;"
+                              aria-rowindex="2"
+                              class="mclRowFormatterContainer"
+                              data-row-index="row-0"
+                              role="row"
+                              style="position: static;"
                             >
                               <div
-                                class="mclCell mclCellStyle"
-                                role="gridcell"
+                                class="mclRow mclIsOdd"
+                                data-row-inner="0"
+                                style="min-width: 0px;"
                               >
-                                <a
-                                  class="root"
-                                  data-test-text-link="true"
-                                  href="https://www.amazon.com"
-                                  rel="noopener noreferrer"
-                                  target="_blank"
+                                <div
+                                  class="mclCell mclCellStyle"
+                                  role="gridcell"
                                 >
-                                  https://www.amazon.com
-                                </a>
-                              </div>
-                              <div
-                                class="mclCell mclCellStyle"
-                                role="gridcell"
-                              >
-                                main website
-                              </div>
-                              <div
-                                class="mclCell mclCellStyle"
-                                role="gridcell"
-                              >
-                                en-us
-                              </div>
-                              <div
-                                class="mclCell mclCellStyle"
-                                role="gridcell"
-                              >
-                                Customer Service
-                              </div>
-                              <div
-                                class="mclCell mclCellStyle"
-                                role="gridcell"
-                              >
-                                ui-organizations.primaryItem
+                                  <a
+                                    class="root"
+                                    data-test-text-link="true"
+                                    href="https://www.amazon.com"
+                                    rel="noopener noreferrer"
+                                    target="_blank"
+                                  >
+                                    https://www.amazon.com
+                                  </a>
+                                </div>
+                                <div
+                                  class="mclCell mclCellStyle"
+                                  role="gridcell"
+                                >
+                                  main website
+                                </div>
+                                <div
+                                  class="mclCell mclCellStyle"
+                                  role="gridcell"
+                                >
+                                  en-us
+                                </div>
+                                <div
+                                  class="mclCell mclCellStyle"
+                                  role="gridcell"
+                                >
+                                  Customer Service
+                                </div>
+                                <div
+                                  class="mclCell mclCellStyle"
+                                  role="gridcell"
+                                >
+                                  ui-organizations.primaryItem
+                                </div>
                               </div>
                             </div>
-                          </div>
-                          <div
-                            class="mclEndOfListContainer"
-                            data-end-of-list="1"
-                          >
                             <div
-                              class="mclCenteredContainer"
-                              style="visibility: hidden; height: 0px; padding: 0px; width: 0px;"
+                              class="mclEndOfListContainer"
+                              data-end-of-list="1"
                             >
                               <div
-                                class="textCentered"
-                                data-test-layout="true"
+                                class="mclCenteredContainer"
+                                style="visibility: hidden; height: 0px; padding: 0px; width: 0px;"
                               >
                                 <div
-                                  class="mclEndOfList"
+                                  class="textCentered"
                                   data-test-layout="true"
                                 >
-                                  <span>
-                                    Icon
-                                  </span>
+                                  <div
+                                    class="mclEndOfList"
+                                    data-test-layout="true"
+                                  >
+                                    <span>
+                                      Icon
+                                    </span>
+                                  </div>
                                 </div>
                               </div>
                             </div>