@truedat/dd 7.5.7 → 7.5.10

package/src/components/__tests__/__snapshots__/StructureSelectorInputFieldJoin.spec.js.snap

@@ -1,441 +1,1039 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`<StructureSelectorInputFieldJoin /> matches the latest JoinClause snapshot 1`] = `
-<Grid
-  style={
-    {
-      "alignItems": "center",
-      "display": "flex",
-    }
-  }
->
-  <GridColumn
-    width={4}
-  >
-    <Connect(StructureFieldsDropdown)
-      fluid={true}
-      onSelectField={[Function]}
-      parentStructures={
-        [
-          {
-            "alias": undefined,
-          },
-        ]
-      }
-      value="7"
-    />
-  </GridColumn>
-  <GridColumn
-    style={
-      {
-        "fontSize": "x-large",
-        "textAlign": "center",
-      }
-    }
-    width={1}
-  >
-    =
-  </GridColumn>
-  <GridColumn
-    width={4}
-  >
-    <Connect(StructureFieldsDropdown)
-      fluid={true}
-      onSelectField={[Function]}
-      parentStructures={[]}
-      value="8"
-    />
-  </GridColumn>
-  <GridColumn
-    width={1}
+<div>
+  <label>
+    structureSelector.union.type
+  </label>
+  <div
+    class="ui grid"
   >
-    <Popup
-      content="dataset.form.button.add_join.popup"
-      disabled={true}
-      eventsEnabled={true}
-      on={
-        [
-          "click",
-          "hover",
-        ]
-      }
-      pinned={false}
-      popperModifiers={[]}
-      position="top left"
-      trigger={
-        <Icon
-          as="i"
-          className="selectable"
-          disabled={false}
-          name="add circle"
-          onClick={[Function]}
+    <div
+      class="four wide column"
+    >
+      <div
+        aria-expanded="false"
+        class="ui dropdown"
+        role="listbox"
+        tabindex="0"
+      >
+        <i
+          aria-hidden="true"
+          class="dropdown icon"
         />
-      }
-    />
-  </GridColumn>
-  <GridColumn
-    width={1}
+        <div
+          class="menu transition"
+        >
+          <div
+            aria-selected="false"
+            class="item"
+            role="option"
+          >
+            <div
+              class="ui middle aligned grid"
+            >
+              <div
+                class="four wide column"
+              >
+                <div
+                  class="join_type"
+                >
+                  <div
+                    class="circle circle-left"
+                  >
+                    <div
+                      class="circle circle-center fill"
+                    />
+                  </div>
+                  <div
+                    class="circle circle-right"
+                  />
+                </div>
+              </div>
+              <div
+                class="column"
+              >
+                joinType.inner
+              </div>
+            </div>
+          </div>
+          <div
+            aria-selected="false"
+            class="item"
+            role="option"
+          >
+            <div
+              class="ui middle aligned grid"
+            >
+              <div
+                class="four wide column"
+              >
+                <div
+                  class="join_type"
+                >
+                  <div
+                    class="circle circle-left fill"
+                  >
+                    <div
+                      class="circle circle-center fill"
+                    />
+                  </div>
+                  <div
+                    class="circle circle-right"
+                  />
+                </div>
+              </div>
+              <div
+                class="column"
+              >
+                joinType.left
+              </div>
+            </div>
+          </div>
+          <div
+            aria-selected="false"
+            class="item"
+            role="option"
+          >
+            <div
+              class="ui middle aligned grid"
+            >
+              <div
+                class="four wide column"
+              >
+                <div
+                  class="join_type"
+                >
+                  <div
+                    class="circle circle-left"
+                  >
+                    <div
+                      class="circle circle-center fill"
+                    />
+                  </div>
+                  <div
+                    class="circle circle-right fill"
+                  />
+                </div>
+              </div>
+              <div
+                class="column"
+              >
+                joinType.right
+              </div>
+            </div>
+          </div>
+          <div
+            aria-selected="false"
+            class="item"
+            role="option"
+          >
+            <div
+              class="ui middle aligned grid"
+            >
+              <div
+                class="four wide column"
+              >
+                <div
+                  class="join_type"
+                >
+                  <div
+                    class="circle circle-left fill"
+                  >
+                    <div
+                      class="circle circle-center fill"
+                    />
+                  </div>
+                  <div
+                    class="circle circle-right fill"
+                  />
+                </div>
+              </div>
+              <div
+                class="column"
+              >
+                joinType.full_outer
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <label>
+    structureSelector.union.criteria
+  </label>
+  <div
+    style="margin-bottom: 1em;"
   >
-    <Button
-      as="button"
-      basic={true}
-      className="selectable"
-      color="red"
-      icon={true}
-      onClick={[Function]}
-      size="mini"
+    <div
+      class="ui grid"
+      style="display: flex; align-items: center;"
     >
-      <Icon
-        as="i"
-        color="red"
-        name="trash alternate outline"
+      <div
+        class="four wide column"
+      >
+        <div
+          aria-expanded="false"
+          class="ui fluid search dropdown selection"
+          role="combobox"
+        >
+          <input
+            aria-autocomplete="list"
+            autocomplete="off"
+            class="search"
+            tabindex="0"
+            type="text"
+            value=""
+          />
+          <div
+            aria-atomic="true"
+            aria-live="polite"
+            class="divider text"
+            role="alert"
+          >
+            structureFields.dropdown.placeholder
+          </div>
+          <i
+            aria-hidden="true"
+            class="dropdown icon"
+          />
+          <div
+            class="menu transition"
+            role="listbox"
+          >
+            <div
+              class="message"
+            >
+              No results found.
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="one wide column"
+        style="text-align: center; font-size: x-large;"
+      >
+        =
+      </div>
+      <div
+        class="four wide column"
+      >
+        <div
+          aria-expanded="false"
+          class="ui fluid search dropdown selection"
+          role="combobox"
+        >
+          <input
+            aria-autocomplete="list"
+            autocomplete="off"
+            class="search"
+            tabindex="0"
+            type="text"
+            value=""
+          />
+          <div
+            aria-atomic="true"
+            aria-live="polite"
+            class="divider text"
+            role="alert"
+          >
+            structureFields.dropdown.placeholder
+          </div>
+          <i
+            aria-hidden="true"
+            class="dropdown icon"
+          />
+          <div
+            class="menu transition"
+            role="listbox"
+          >
+            <div
+              class="message"
+            >
+              No results found.
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="one wide column"
+      >
+        <i
+          aria-hidden="true"
+          class="add circle icon selectable"
+        />
+      </div>
+      <div
+        class="one wide column"
       />
-    </Button>
-  </GridColumn>
-</Grid>
+    </div>
+    <div
+      class="ui grid"
+      style="display: flex; align-items: center;"
+    >
+      <div
+        class="four wide column"
+      >
+        <div
+          aria-expanded="false"
+          class="ui fluid search dropdown selection"
+          role="combobox"
+        >
+          <input
+            aria-autocomplete="list"
+            autocomplete="off"
+            class="search"
+            tabindex="0"
+            type="text"
+            value=""
+          />
+          <div
+            aria-atomic="true"
+            aria-live="polite"
+            class="divider text"
+            role="alert"
+          >
+            structureFields.dropdown.placeholder
+          </div>
+          <i
+            aria-hidden="true"
+            class="dropdown icon"
+          />
+          <div
+            class="menu transition"
+            role="listbox"
+          >
+            <div
+              class="message"
+            >
+              No results found.
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="one wide column"
+        style="text-align: center; font-size: x-large;"
+      >
+        =
+      </div>
+      <div
+        class="four wide column"
+      >
+        <div
+          aria-expanded="false"
+          class="ui fluid search dropdown selection"
+          role="combobox"
+        >
+          <input
+            aria-autocomplete="list"
+            autocomplete="off"
+            class="search"
+            tabindex="0"
+            type="text"
+            value=""
+          />
+          <div
+            aria-atomic="true"
+            aria-live="polite"
+            class="divider text"
+            role="alert"
+          >
+            structureFields.dropdown.placeholder
+          </div>
+          <i
+            aria-hidden="true"
+            class="dropdown icon"
+          />
+          <div
+            class="menu transition"
+            role="listbox"
+          >
+            <div
+              class="message"
+            >
+              No results found.
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="one wide column"
+      >
+        <i
+          aria-hidden="true"
+          class="add circle icon selectable"
+        />
+      </div>
+      <div
+        class="one wide column"
+      >
+        <button
+          class="ui red mini basic icon button selectable"
+        >
+          <i
+            aria-hidden="true"
+            class="red trash alternate outline icon"
+          />
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
 `;
 
 exports[`<StructureSelectorInputFieldJoin /> matches the latest snapshot 1`] = `
-<Fragment>
+<div>
   <label>
     structureSelector.union.type
   </label>
-  <Grid>
-    <GridColumn
-      width={4}
+  <div
+    class="ui grid"
+  >
+    <div
+      class="four wide column"
     >
-      <Dropdown
-        additionLabel="Add "
-        additionPosition="top"
-        closeOnBlur={true}
-        closeOnEscape={true}
-        deburr={false}
-        icon="dropdown"
-        minCharacters={1}
-        noResultsMessage="No results found."
-        openOnFocus={true}
-        renderLabel={[Function]}
-        searchInput="text"
-        selectOnBlur={true}
-        selectOnNavigation={true}
-        trigger={<UNDEFINED />}
-        wrapSelection={true}
+      <div
+        aria-expanded="false"
+        class="ui dropdown"
+        role="listbox"
+        tabindex="0"
       >
-        <DropdownMenu>
-          <DropdownItem
-            key="0"
-            onClick={[Function]}
-            selected={false}
-          >
-            <Grid
-              verticalAlign="middle"
+        <i
+          aria-hidden="true"
+          class="dropdown icon"
+        />
+        <div
+          class="menu transition"
+        >
+          <div
+            aria-selected="false"
+            class="item"
+            role="option"
+          >
+            <div
+              class="ui middle aligned grid"
             >
-              <GridColumn
-                width={4}
+              <div
+                class="four wide column"
+              >
+                <div
+                  class="join_type"
+                >
+                  <div
+                    class="circle circle-left"
+                  >
+                    <div
+                      class="circle circle-center fill"
+                    />
+                  </div>
+                  <div
+                    class="circle circle-right"
+                  />
+                </div>
+              </div>
+              <div
+                class="column"
               >
-                <lazy
-                  type="inner"
-                />
-              </GridColumn>
-              <GridColumn>
                 joinType.inner
-              </GridColumn>
-            </Grid>
-          </DropdownItem>
-          <DropdownItem
-            key="1"
-            onClick={[Function]}
-            selected={false}
-          >
-            <Grid
-              verticalAlign="middle"
+              </div>
+            </div>
+          </div>
+          <div
+            aria-selected="false"
+            class="item"
+            role="option"
+          >
+            <div
+              class="ui middle aligned grid"
             >
-              <GridColumn
-                width={4}
+              <div
+                class="four wide column"
+              >
+                <div
+                  class="join_type"
+                >
+                  <div
+                    class="circle circle-left fill"
+                  >
+                    <div
+                      class="circle circle-center fill"
+                    />
+                  </div>
+                  <div
+                    class="circle circle-right"
+                  />
+                </div>
+              </div>
+              <div
+                class="column"
               >
-                <lazy
-                  type="left"
-                />
-              </GridColumn>
-              <GridColumn>
                 joinType.left
-              </GridColumn>
-            </Grid>
-          </DropdownItem>
-          <DropdownItem
-            key="2"
-            onClick={[Function]}
-            selected={false}
-          >
-            <Grid
-              verticalAlign="middle"
+              </div>
+            </div>
+          </div>
+          <div
+            aria-selected="false"
+            class="item"
+            role="option"
+          >
+            <div
+              class="ui middle aligned grid"
             >
-              <GridColumn
-                width={4}
+              <div
+                class="four wide column"
+              >
+                <div
+                  class="join_type"
+                >
+                  <div
+                    class="circle circle-left"
+                  >
+                    <div
+                      class="circle circle-center fill"
+                    />
+                  </div>
+                  <div
+                    class="circle circle-right fill"
+                  />
+                </div>
+              </div>
+              <div
+                class="column"
               >
-                <lazy
-                  type="right"
-                />
-              </GridColumn>
-              <GridColumn>
                 joinType.right
-              </GridColumn>
-            </Grid>
-          </DropdownItem>
-          <DropdownItem
-            key="3"
-            onClick={[Function]}
-            selected={false}
-          >
-            <Grid
-              verticalAlign="middle"
+              </div>
+            </div>
+          </div>
+          <div
+            aria-selected="false"
+            class="item"
+            role="option"
+          >
+            <div
+              class="ui middle aligned grid"
             >
-              <GridColumn
-                width={4}
+              <div
+                class="four wide column"
+              >
+                <div
+                  class="join_type"
+                >
+                  <div
+                    class="circle circle-left fill"
+                  >
+                    <div
+                      class="circle circle-center fill"
+                    />
+                  </div>
+                  <div
+                    class="circle circle-right fill"
+                  />
+                </div>
+              </div>
+              <div
+                class="column"
               >
-                <lazy
-                  type="full_outer"
-                />
-              </GridColumn>
-              <GridColumn>
                 joinType.full_outer
-              </GridColumn>
-            </Grid>
-          </DropdownItem>
-        </DropdownMenu>
-      </Dropdown>
-    </GridColumn>
-  </Grid>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
   <label>
     structureSelector.union.criteria
   </label>
   <div
-    style={
-      {
-        "marginBottom": "1em",
-      }
-    }
+    style="margin-bottom: 1em;"
   >
-    <JoinClause
-      createClause={[Function]}
-      deleteClause={[Function]}
-      handleChange={[Function]}
-      idx={0}
-      key="0"
-      parentStructures={[]}
-      selectedStructure={
-        {
-          "id": "456",
-        }
-      }
-    />
+    <div
+      class="ui grid"
+      style="display: flex; align-items: center;"
+    >
+      <div
+        class="four wide column"
+      >
+        <div
+          aria-expanded="false"
+          class="ui fluid search dropdown selection"
+          role="combobox"
+        >
+          <input
+            aria-autocomplete="list"
+            autocomplete="off"
+            class="search"
+            tabindex="0"
+            type="text"
+            value=""
+          />
+          <div
+            aria-atomic="true"
+            aria-live="polite"
+            class="divider default text"
+            role="alert"
+          >
+            structureFields.dropdown.placeholder
+          </div>
+          <i
+            aria-hidden="true"
+            class="dropdown icon"
+          />
+          <div
+            class="menu transition"
+            role="listbox"
+          >
+            <div
+              class="message"
+            >
+              No results found.
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="one wide column"
+        style="text-align: center; font-size: x-large;"
+      >
+        =
+      </div>
+      <div
+        class="four wide column"
+      >
+        <div
+          aria-expanded="false"
+          class="ui fluid search dropdown selection"
+          role="combobox"
+        >
+          <input
+            aria-autocomplete="list"
+            autocomplete="off"
+            class="search"
+            tabindex="0"
+            type="text"
+            value=""
+          />
+          <div
+            aria-atomic="true"
+            aria-live="polite"
+            class="divider default text"
+            role="alert"
+          >
+            structureFields.dropdown.placeholder
+          </div>
+          <i
+            aria-hidden="true"
+            class="dropdown icon"
+          />
+          <div
+            class="menu transition"
+            role="listbox"
+          >
+            <div
+              class="message"
+            >
+              No results found.
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="one wide column"
+      >
+        <i
+          aria-hidden="true"
+          class="add circle disabled icon selectable"
+        />
+      </div>
+      <div
+        class="one wide column"
+      />
+    </div>
   </div>
-</Fragment>
+</div>
 `;
 
 exports[`<StructureSelectorInputFieldJoin /> matches the latest snapshot with various clauses 1`] = `
-<Fragment>
+<div>
   <label>
     structureSelector.union.type
   </label>
-  <Grid>
-    <GridColumn
-      width={4}
+  <div
+    class="ui grid"
+  >
+    <div
+      class="four wide column"
     >
-      <Dropdown
-        additionLabel="Add "
-        additionPosition="top"
-        closeOnBlur={true}
-        closeOnEscape={true}
-        deburr={false}
-        icon="dropdown"
-        minCharacters={1}
-        noResultsMessage="No results found."
-        openOnFocus={true}
-        renderLabel={[Function]}
-        searchInput="text"
-        selectOnBlur={true}
-        selectOnNavigation={true}
-        trigger={<UNDEFINED />}
-        wrapSelection={true}
+      <div
+        aria-expanded="false"
+        class="ui dropdown"
+        role="listbox"
+        tabindex="0"
       >
-        <DropdownMenu>
-          <DropdownItem
-            key="0"
-            onClick={[Function]}
-            selected={false}
-          >
-            <Grid
-              verticalAlign="middle"
+        <i
+          aria-hidden="true"
+          class="dropdown icon"
+        />
+        <div
+          class="menu transition"
+        >
+          <div
+            aria-selected="false"
+            class="item"
+            role="option"
+          >
+            <div
+              class="ui middle aligned grid"
             >
-              <GridColumn
-                width={4}
+              <div
+                class="four wide column"
+              >
+                <div
+                  class="join_type"
+                >
+                  <div
+                    class="circle circle-left"
+                  >
+                    <div
+                      class="circle circle-center fill"
+                    />
+                  </div>
+                  <div
+                    class="circle circle-right"
+                  />
+                </div>
+              </div>
+              <div
+                class="column"
               >
-                <lazy
-                  type="inner"
-                />
-              </GridColumn>
-              <GridColumn>
                 joinType.inner
-              </GridColumn>
-            </Grid>
-          </DropdownItem>
-          <DropdownItem
-            key="1"
-            onClick={[Function]}
-            selected={false}
-          >
-            <Grid
-              verticalAlign="middle"
+              </div>
+            </div>
+          </div>
+          <div
+            aria-selected="false"
+            class="item"
+            role="option"
+          >
+            <div
+              class="ui middle aligned grid"
             >
-              <GridColumn
-                width={4}
+              <div
+                class="four wide column"
+              >
+                <div
+                  class="join_type"
+                >
+                  <div
+                    class="circle circle-left fill"
+                  >
+                    <div
+                      class="circle circle-center fill"
+                    />
+                  </div>
+                  <div
+                    class="circle circle-right"
+                  />
+                </div>
+              </div>
+              <div
+                class="column"
               >
-                <lazy
-                  type="left"
-                />
-              </GridColumn>
-              <GridColumn>
                 joinType.left
-              </GridColumn>
-            </Grid>
-          </DropdownItem>
-          <DropdownItem
-            key="2"
-            onClick={[Function]}
-            selected={false}
-          >
-            <Grid
-              verticalAlign="middle"
+              </div>
+            </div>
+          </div>
+          <div
+            aria-selected="false"
+            class="item"
+            role="option"
+          >
+            <div
+              class="ui middle aligned grid"
             >
-              <GridColumn
-                width={4}
+              <div
+                class="four wide column"
+              >
+                <div
+                  class="join_type"
+                >
+                  <div
+                    class="circle circle-left"
+                  >
+                    <div
+                      class="circle circle-center fill"
+                    />
+                  </div>
+                  <div
+                    class="circle circle-right fill"
+                  />
+                </div>
+              </div>
+              <div
+                class="column"
               >
-                <lazy
-                  type="right"
-                />
-              </GridColumn>
-              <GridColumn>
                 joinType.right
-              </GridColumn>
-            </Grid>
-          </DropdownItem>
-          <DropdownItem
-            key="3"
-            onClick={[Function]}
-            selected={false}
-          >
-            <Grid
-              verticalAlign="middle"
+              </div>
+            </div>
+          </div>
+          <div
+            aria-selected="false"
+            class="item"
+            role="option"
+          >
+            <div
+              class="ui middle aligned grid"
             >
-              <GridColumn
-                width={4}
+              <div
+                class="four wide column"
+              >
+                <div
+                  class="join_type"
+                >
+                  <div
+                    class="circle circle-left fill"
+                  >
+                    <div
+                      class="circle circle-center fill"
+                    />
+                  </div>
+                  <div
+                    class="circle circle-right fill"
+                  />
+                </div>
+              </div>
+              <div
+                class="column"
               >
-                <lazy
-                  type="full_outer"
-                />
-              </GridColumn>
-              <GridColumn>
                 joinType.full_outer
-              </GridColumn>
-            </Grid>
-          </DropdownItem>
-        </DropdownMenu>
-      </Dropdown>
-    </GridColumn>
-  </Grid>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
   <label>
     structureSelector.union.criteria
   </label>
   <div
-    style={
-      {
-        "marginBottom": "1em",
-      }
-    }
+    style="margin-bottom: 1em;"
   >
-    <JoinClause
-      createClause={[Function]}
-      deleteClause={[Function]}
-      handleChange={[Function]}
-      idx={0}
-      key="0"
-      left={
-        {
-          "id": "5",
-        }
-      }
-      parentStructures={[]}
-      right={
-        {
-          "id": "6",
-        }
-      }
-      selectedStructure={
-        {
-          "clauses": [
-            {
-              "left": {
-                "id": "5",
-              },
-              "right": {
-                "id": "6",
-              },
-            },
-            {
-              "left": {
-                "id": "7",
-              },
-              "right": {
-                "id": "8",
-              },
-            },
-          ],
-          "id": "456",
-        }
-      }
-    />
-    <JoinClause
-      createClause={[Function]}
-      deleteClause={[Function]}
-      handleChange={[Function]}
-      idx={1}
-      key="1"
-      left={
-        {
-          "id": "7",
-        }
-      }
-      parentStructures={[]}
-      right={
-        {
-          "id": "8",
-        }
-      }
-      selectedStructure={
-        {
-          "clauses": [
-            {
-              "left": {
-                "id": "5",
-              },
-              "right": {
-                "id": "6",
-              },
-            },
-            {
-              "left": {
-                "id": "7",
-              },
-              "right": {
-                "id": "8",
-              },
-            },
-          ],
-          "id": "456",
-        }
-      }
-    />
+    <div
+      class="ui grid"
+      style="display: flex; align-items: center;"
+    >
+      <div
+        class="four wide column"
+      >
+        <div
+          aria-expanded="false"
+          class="ui fluid search dropdown selection"
+          role="combobox"
+        >
+          <input
+            aria-autocomplete="list"
+            autocomplete="off"
+            class="search"
+            tabindex="0"
+            type="text"
+            value=""
+          />
+          <div
+            aria-atomic="true"
+            aria-live="polite"
+            class="divider text"
+            role="alert"
+          >
+            structureFields.dropdown.placeholder
+          </div>
+          <i
+            aria-hidden="true"
+            class="dropdown icon"
+          />
+          <div
+            class="menu transition"
+            role="listbox"
+          >
+            <div
+              class="message"
+            >
+              No results found.
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="one wide column"
+        style="text-align: center; font-size: x-large;"
+      >
+        =
+      </div>
+      <div
+        class="four wide column"
+      >
+        <div
+          aria-expanded="false"
+          class="ui fluid search dropdown selection"
+          role="combobox"
+        >
+          <input
+            aria-autocomplete="list"
+            autocomplete="off"
+            class="search"
+            tabindex="0"
+            type="text"
+            value=""
+          />
+          <div
+            aria-atomic="true"
+            aria-live="polite"
+            class="divider text"
+            role="alert"
+          >
+            structureFields.dropdown.placeholder
+          </div>
+          <i
+            aria-hidden="true"
+            class="dropdown icon"
+          />
+          <div
+            class="menu transition"
+            role="listbox"
+          >
+            <div
+              class="message"
+            >
+              No results found.
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="one wide column"
+      >
+        <i
+          aria-hidden="true"
+          class="add circle icon selectable"
+        />
+      </div>
+      <div
+        class="one wide column"
+      />
+    </div>
+    <div
+      class="ui grid"
+      style="display: flex; align-items: center;"
+    >
+      <div
+        class="four wide column"
+      >
+        <div
+          aria-expanded="false"
+          class="ui fluid search dropdown selection"
+          role="combobox"
+        >
+          <input
+            aria-autocomplete="list"
+            autocomplete="off"
+            class="search"
+            tabindex="0"
+            type="text"
+            value=""
+          />
+          <div
+            aria-atomic="true"
+            aria-live="polite"
+            class="divider text"
+            role="alert"
+          >
+            structureFields.dropdown.placeholder
+          </div>
+          <i
+            aria-hidden="true"
+            class="dropdown icon"
+          />
+          <div
+            class="menu transition"
+            role="listbox"
+          >
+            <div
+              class="message"
+            >
+              No results found.
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="one wide column"
+        style="text-align: center; font-size: x-large;"
+      >
+        =
+      </div>
+      <div
+        class="four wide column"
+      >
+        <div
+          aria-expanded="false"
+          class="ui fluid search dropdown selection"
+          role="combobox"
+        >
+          <input
+            aria-autocomplete="list"
+            autocomplete="off"
+            class="search"
+            tabindex="0"
+            type="text"
+            value=""
+          />
+          <div
+            aria-atomic="true"
+            aria-live="polite"
+            class="divider text"
+            role="alert"
+          >
+            structureFields.dropdown.placeholder
+          </div>
+          <i
+            aria-hidden="true"
+            class="dropdown icon"
+          />
+          <div
+            class="menu transition"
+            role="listbox"
+          >
+            <div
+              class="message"
+            >
+              No results found.
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="one wide column"
+      >
+        <i
+          aria-hidden="true"
+          class="add circle icon selectable"
+        />
+      </div>
+      <div
+        class="one wide column"
+      >
+        <button
+          class="ui red mini basic icon button selectable"
+        >
+          <i
+            aria-hidden="true"
+            class="red trash alternate outline icon"
+          />
+        </button>
+      </div>
+    </div>
   </div>
-</Fragment>
+</div>
 `;