@truedat/df 7.5.7 → 7.5.10

package/src/templates/components/templateForm/__tests__/__snapshots__/FieldForm.spec.js.snap

@@ -1,355 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<FieldForm /> manages handleCardinalityChange 1`] = `
-<Segment>
-  <ButtonGroup
-    basic={true}
-    buttons={
-      [
-        {
-          "disabled": true,
-          "icon": "arrow up",
-          "key": "up",
-          "onClick": [Function],
-        },
-        {
-          "disabled": true,
-          "icon": "arrow down",
-          "key": "down",
-          "onClick": [Function],
-        },
-        {
-          "disabled": false,
-          "icon": "trash alternate outline",
-          "key": "delete",
-          "onClick": [MockFunction],
-        },
-      ]
-    }
-    color="orange"
-    floated="right"
-    size="tiny"
-  />
-  <Divider
-    clearing={true}
-    hidden={true}
-  />
-  <FormGroup
-    size="small"
-    widths="equal"
-  >
-    <FormInput
-      as={[Function]}
-      control={[Function]}
-      label={
-        <label>
-          template.field.label
-        </label>
-      }
-      name="Group.fields[0].label"
-      onChange={[MockFunction]}
-      required={true}
-      size="small"
-      value="Name"
-    />
-    <FormInput
-      as={[Function]}
-      control={[Function]}
-      disabled={false}
-      fluid={true}
-      label={
-        <label>
-          template.field.name
-        </label>
-      }
-      name="Group.fields[0].name"
-      onChange={[MockFunction]}
-      required={true}
-      size="small"
-      value="name"
-    />
-  </FormGroup>
-  <FormTextArea
-    as={[Function]}
-    control={[Function]}
-    label="template.field.description"
-    name="Group.fields[0].description"
-    onChange={[MockFunction]}
-    rows={4}
-    size="small"
-    value=""
-  />
-  <FormGroup
-    size="small"
-    widths="equal"
-  >
-    <FormDropdown
-      as={[Function]}
-      control={[Function]}
-      fluid={true}
-      label="template.field.widget"
-      name="Group.fields[0].widget"
-      onChange={[Function]}
-      options={
-        [
-          {
-            "icon": "hashtag",
-            "key": undefined,
-            "text": "Identifier",
-            "value": "identifier",
-          },
-          {
-            "icon": "minus",
-            "key": undefined,
-            "text": "Text Input",
-            "value": "string",
-          },
-          {
-            "icon": "align justify",
-            "key": undefined,
-            "text": "Textarea",
-            "value": "textarea",
-          },
-          {
-            "icon": "arrow down",
-            "key": undefined,
-            "text": "Dropdown",
-            "value": "dropdown",
-          },
-          {
-            "icon": "radio",
-            "key": undefined,
-            "text": "Radio",
-            "value": "radio",
-          },
-          {
-            "icon": "check square outline",
-            "key": undefined,
-            "text": "Checkbox",
-            "value": "checkbox",
-          },
-          {
-            "icon": "linkify",
-            "key": undefined,
-            "text": "Links",
-            "value": "pair_list",
-          },
-          {
-            "icon": "tint",
-            "key": undefined,
-            "text": "Colorpicker",
-            "value": "color_picker",
-          },
-          {
-            "icon": "text cursor",
-            "key": undefined,
-            "text": "Enrichedtext",
-            "value": "enriched_text",
-          },
-          {
-            "icon": "table",
-            "key": undefined,
-            "text": "Table",
-            "value": "table",
-          },
-          {
-            "icon": "asterisk",
-            "key": undefined,
-            "text": "Password",
-            "value": "password",
-          },
-          {
-            "icon": "image",
-            "key": undefined,
-            "text": "Image",
-            "value": "image",
-          },
-          {
-            "icon": "hashtag",
-            "key": undefined,
-            "text": "Number",
-            "value": "number",
-          },
-          {
-            "icon": "calendar",
-            "key": undefined,
-            "text": "Date",
-            "value": "date",
-          },
-          {
-            "icon": "calendar",
-            "key": undefined,
-            "text": "Date Time",
-            "value": "datetime",
-          },
-        ]
-      }
-      required={true}
-      selection={true}
-    />
-    <FormDropdown
-      as={[Function]}
-      control={[Function]}
-      fluid={true}
-      label="template.field.type"
-      name="Group.fields[0].type"
-      onChange={[Function]}
-      options={[]}
-      required={true}
-      selection={true}
-    />
-    <FormDropdown
-      as={[Function]}
-      control={[Function]}
-      fluid={true}
-      label="template.field.cardinality"
-      name="Group.fields[0].cardinality"
-      onChange={[Function]}
-      options={[]}
-      required={true}
-      selection={true}
-      value="?"
-    />
-  </FormGroup>
-  <ValuesField
-    defaultField="Group.fields[0].default"
-    field={
-      {
-        "cardinality": "?",
-        "label": "Name",
-        "mandatory": {
-          "on": "bar",
-          "to_be": [
-            "3",
-          ],
-        },
-        "name": "name",
-      }
-    }
-    fieldNamePrefix="Group.fields[0]"
-    name="Group.fields[0].values"
-    onChange={[MockFunction]}
-    onSelectionChange={[Function]}
-    subscribableField="Group.fields[0].subscribable"
-    values={[]}
-  />
-  <ConditionalFieldForm
-    allFields={
-      [
-        {
-          "cardinality": "+",
-          "label": "Foo",
-          "name": "foo",
-          "type": "string",
-          "values": {
-            "fixed": [
-              "1",
-              "2",
-            ],
-          },
-        },
-        {
-          "cardinality": "?",
-          "label": "Bar",
-          "name": "bar",
-          "type": "string",
-          "values": {
-            "fixed": [
-              "3",
-              "4",
-            ],
-          },
-        },
-        {
-          "cardinality": "?",
-          "label": "Xyz",
-          "name": "xyz",
-          "type": "string",
-        },
-        {
-          "cardinality": "?",
-          "label": "Name",
-          "name": "name",
-          "type": "string",
-        },
-      ]
-    }
-    field={
-      {
-        "cardinality": "?",
-        "label": "Name",
-        "mandatory": {
-          "on": "bar",
-          "to_be": [
-            "3",
-          ],
-        },
-        "name": "name",
-      }
-    }
-    fieldNamePrefix="Group.fields[0]"
-    onChange={[MockFunction]}
-  />
-  <MandatoryConditional
-    allFields={
-      [
-        {
-          "cardinality": "+",
-          "label": "Foo",
-          "name": "foo",
-          "type": "string",
-          "values": {
-            "fixed": [
-              "1",
-              "2",
-            ],
-          },
-        },
-        {
-          "cardinality": "?",
-          "label": "Bar",
-          "name": "bar",
-          "type": "string",
-          "values": {
-            "fixed": [
-              "3",
-              "4",
-            ],
-          },
-        },
-        {
-          "cardinality": "?",
-          "label": "Xyz",
-          "name": "xyz",
-          "type": "string",
-        },
-        {
-          "cardinality": "?",
-          "label": "Name",
-          "name": "name",
-          "type": "string",
-        },
-      ]
-    }
-    field={
-      {
-        "cardinality": "?",
-        "label": "Name",
-        "mandatory": {
-          "on": "bar",
-          "to_be": [
-            "3",
-          ],
-        },
-        "name": "name",
-      }
-    }
-    fieldNamePrefix="Group.fields[0]"
-    onChange={[MockFunction]}
-  />
-</Segment>
-`;
-
 exports[`<FieldForm /> matches the latest snapshot 1`] = `
 <div>
   <div
@@ -959,688 +609,1713 @@ exports[`<FieldForm /> matches the latest snapshot 1`] = `
 `;
 
 exports[`<FieldForm /> renders MandatoryConditional 1`] = `
-<Segment>
-  <ButtonGroup
-    basic={true}
-    buttons={
-      [
-        {
-          "disabled": true,
-          "icon": "arrow up",
-          "key": "up",
-          "onClick": [Function],
-        },
-        {
-          "disabled": true,
-          "icon": "arrow down",
-          "key": "down",
-          "onClick": [Function],
-        },
-        {
-          "disabled": false,
-          "icon": "trash alternate outline",
-          "key": "delete",
-          "onClick": [MockFunction],
-        },
-      ]
-    }
-    color="orange"
-    floated="right"
-    size="tiny"
-  />
-  <Divider
-    clearing={true}
-    hidden={true}
-  />
-  <FormGroup
-    size="small"
-    widths="equal"
+<div>
+  <div
+    class="ui segment"
   >
-    <FormInput
-      as={[Function]}
-      control={[Function]}
-      label={
+    <div
+      class="ui orange tiny basic right floated buttons"
+    >
+      <button
+        class="ui icon disabled button"
+        disabled=""
+        tabindex="-1"
+      >
+        <i
+          aria-hidden="true"
+          class="arrow up icon"
+        />
+      </button>
+      <button
+        class="ui icon disabled button"
+        disabled=""
+        tabindex="-1"
+      >
+        <i
+          aria-hidden="true"
+          class="arrow down icon"
+        />
+      </button>
+      <button
+        class="ui icon button"
+      >
+        <i
+          aria-hidden="true"
+          class="trash alternate outline icon"
+        />
+      </button>
+    </div>
+    <div
+      class="ui clearing hidden divider"
+    />
+    <div
+      class="equal width fields"
+    >
+      <div
+        class="required field"
+      >
         <label>
           template.field.label
         </label>
-      }
-      name="Group.fields[0].label"
-      onChange={[MockFunction]}
-      required={true}
-      size="small"
-      value="Name"
-    />
-    <FormInput
-      as={[Function]}
-      control={[Function]}
-      disabled={false}
-      fluid={true}
-      label={
+        <div
+          class="ui small input"
+        >
+          <input
+            name="Group.fields[0].label"
+            required=""
+            type="text"
+            value="Name"
+          />
+        </div>
+      </div>
+      <div
+        class="required field"
+      >
         <label>
           template.field.name
         </label>
-      }
-      name="Group.fields[0].name"
-      onChange={[MockFunction]}
-      required={true}
-      size="small"
-      value="name"
-    />
-  </FormGroup>
-  <FormTextArea
-    as={[Function]}
-    control={[Function]}
-    label="template.field.description"
-    name="Group.fields[0].description"
-    onChange={[MockFunction]}
-    rows={4}
-    size="small"
-    value=""
-  />
-  <FormGroup
-    size="small"
-    widths="equal"
-  >
-    <FormDropdown
-      as={[Function]}
-      control={[Function]}
-      fluid={true}
-      label="template.field.widget"
-      name="Group.fields[0].widget"
-      onChange={[Function]}
-      options={
-        [
-          {
-            "icon": "hashtag",
-            "key": undefined,
-            "text": "Identifier",
-            "value": "identifier",
-          },
-          {
-            "icon": "minus",
-            "key": undefined,
-            "text": "Text Input",
-            "value": "string",
-          },
-          {
-            "icon": "align justify",
-            "key": undefined,
-            "text": "Textarea",
-            "value": "textarea",
-          },
-          {
-            "icon": "arrow down",
-            "key": undefined,
-            "text": "Dropdown",
-            "value": "dropdown",
-          },
-          {
-            "icon": "radio",
-            "key": undefined,
-            "text": "Radio",
-            "value": "radio",
-          },
-          {
-            "icon": "check square outline",
-            "key": undefined,
-            "text": "Checkbox",
-            "value": "checkbox",
-          },
-          {
-            "icon": "linkify",
-            "key": undefined,
-            "text": "Links",
-            "value": "pair_list",
-          },
-          {
-            "icon": "tint",
-            "key": undefined,
-            "text": "Colorpicker",
-            "value": "color_picker",
-          },
-          {
-            "icon": "text cursor",
-            "key": undefined,
-            "text": "Enrichedtext",
-            "value": "enriched_text",
-          },
-          {
-            "icon": "table",
-            "key": undefined,
-            "text": "Table",
-            "value": "table",
-          },
-          {
-            "icon": "asterisk",
-            "key": undefined,
-            "text": "Password",
-            "value": "password",
-          },
-          {
-            "icon": "image",
-            "key": undefined,
-            "text": "Image",
-            "value": "image",
-          },
-          {
-            "icon": "hashtag",
-            "key": undefined,
-            "text": "Number",
-            "value": "number",
-          },
-          {
-            "icon": "calendar",
-            "key": undefined,
-            "text": "Date",
-            "value": "date",
-          },
-          {
-            "icon": "calendar",
-            "key": undefined,
-            "text": "Date Time",
-            "value": "datetime",
-          },
-        ]
-      }
-      required={true}
-      selection={true}
-    />
-    <FormDropdown
-      as={[Function]}
-      control={[Function]}
-      fluid={true}
-      label="template.field.type"
-      name="Group.fields[0].type"
-      onChange={[Function]}
-      options={[]}
-      required={true}
-      selection={true}
-    />
-    <FormDropdown
-      as={[Function]}
-      control={[Function]}
-      fluid={true}
-      label="template.field.cardinality"
-      name="Group.fields[0].cardinality"
-      onChange={[Function]}
-      options={[]}
-      required={true}
-      selection={true}
-      value="?"
-    />
-  </FormGroup>
-  <ValuesField
-    defaultField="Group.fields[0].default"
-    field={
-      {
-        "cardinality": "?",
-        "label": "Name",
-        "mandatory": {
-          "on": "bar",
-          "to_be": [
-            "3",
-          ],
-        },
-        "name": "name",
-      }
-    }
-    fieldNamePrefix="Group.fields[0]"
-    name="Group.fields[0].values"
-    onChange={[MockFunction]}
-    onSelectionChange={[Function]}
-    subscribableField="Group.fields[0].subscribable"
-    values={[]}
-  />
-  <ConditionalFieldForm
-    allFields={
-      [
-        {
-          "cardinality": "+",
-          "label": "Foo",
-          "name": "foo",
-          "type": "string",
-          "values": {
-            "fixed": [
-              "1",
-              "2",
-            ],
-          },
-        },
-        {
-          "cardinality": "?",
-          "label": "Bar",
-          "name": "bar",
-          "type": "string",
-          "values": {
-            "fixed": [
-              "3",
-              "4",
-            ],
-          },
-        },
-        {
-          "cardinality": "?",
-          "label": "Xyz",
-          "name": "xyz",
-          "type": "string",
-        },
-        {
-          "cardinality": "?",
-          "label": "Name",
-          "name": "name",
-          "type": "string",
-        },
-      ]
-    }
-    field={
-      {
-        "cardinality": "?",
-        "label": "Name",
-        "mandatory": {
-          "on": "bar",
-          "to_be": [
-            "3",
-          ],
-        },
-        "name": "name",
-      }
-    }
-    fieldNamePrefix="Group.fields[0]"
-    onChange={[MockFunction]}
-  />
-  <MandatoryConditional
-    allFields={
-      [
-        {
-          "cardinality": "+",
-          "label": "Foo",
-          "name": "foo",
-          "type": "string",
-          "values": {
-            "fixed": [
-              "1",
-              "2",
-            ],
-          },
-        },
-        {
-          "cardinality": "?",
-          "label": "Bar",
-          "name": "bar",
-          "type": "string",
-          "values": {
-            "fixed": [
-              "3",
-              "4",
-            ],
-          },
-        },
-        {
-          "cardinality": "?",
-          "label": "Xyz",
-          "name": "xyz",
-          "type": "string",
-        },
-        {
-          "cardinality": "?",
-          "label": "Name",
-          "name": "name",
-          "type": "string",
-        },
-      ]
-    }
-    field={
-      {
-        "cardinality": "?",
-        "label": "Name",
-        "mandatory": {
-          "on": "bar",
-          "to_be": [
-            "3",
-          ],
-        },
-        "name": "name",
-      }
-    }
-    fieldNamePrefix="Group.fields[0]"
-    onChange={[MockFunction]}
-  />
-</Segment>
-`;
-
-exports[`<FieldForm /> renders ValuesField and manages onChange 1`] = `
-<Segment>
-  <ButtonGroup
-    basic={true}
-    buttons={
-      [
-        {
-          "disabled": true,
-          "icon": "arrow up",
-          "key": "up",
-          "onClick": [Function],
-        },
-        {
-          "disabled": true,
-          "icon": "arrow down",
-          "key": "down",
-          "onClick": [Function],
-        },
-        {
-          "disabled": false,
-          "icon": "trash alternate outline",
-          "key": "delete",
-          "onClick": [MockFunction],
-        },
-      ]
-    }
-    color="orange"
-    floated="right"
-    size="tiny"
-  />
-  <Divider
-    clearing={true}
-    hidden={true}
-  />
-  <FormGroup
-    size="small"
-    widths="equal"
-  >
-    <FormInput
-      as={[Function]}
-      control={[Function]}
-      label={
-        <label>
-          template.field.label
-        </label>
-      }
-      name="Group.fields[0].label"
-      onChange={[MockFunction]}
-      required={true}
-      size="small"
-      value="Field 1"
-    />
-    <FormInput
-      as={[Function]}
-      control={[Function]}
-      disabled={false}
-      fluid={true}
-      label={
+        <div
+          class="ui small fluid input"
+        >
+          <input
+            name="Group.fields[0].name"
+            required=""
+            type="text"
+            value="name"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      class="field"
+    >
+      <label>
+        template.field.description
+      </label>
+      <textarea
+        name="Group.fields[0].description"
+        rows="4"
+      />
+    </div>
+    <div
+      class="equal width fields"
+    >
+      <div
+        class="required field"
+      >
         <label>
-          template.field.name
+          template.field.widget
         </label>
-      }
-      name="Group.fields[0].name"
-      onChange={[MockFunction]}
-      required={true}
-      size="small"
-      value="field1"
-    />
-  </FormGroup>
-  <FormTextArea
-    as={[Function]}
-    control={[Function]}
-    label="template.field.description"
-    name="Group.fields[0].description"
-    onChange={[MockFunction]}
-    rows={4}
-    size="small"
-    value="A field for testing"
-  />
-  <FormGroup
-    size="small"
-    widths="equal"
-  >
-    <FormDropdown
-      as={[Function]}
-      control={[Function]}
-      fluid={true}
-      label="template.field.widget"
-      name="Group.fields[0].widget"
-      onChange={[Function]}
-      options={
-        [
-          {
-            "icon": "hashtag",
-            "key": undefined,
-            "text": "Identifier",
-            "value": "identifier",
-          },
-          {
-            "icon": "minus",
-            "key": undefined,
-            "text": "Text Input",
-            "value": "string",
-          },
-          {
-            "icon": "align justify",
-            "key": undefined,
-            "text": "Textarea",
-            "value": "textarea",
-          },
-          {
-            "icon": "arrow down",
-            "key": undefined,
-            "text": "Dropdown",
-            "value": "dropdown",
-          },
-          {
-            "icon": "radio",
-            "key": undefined,
-            "text": "Radio",
-            "value": "radio",
-          },
-          {
-            "icon": "check square outline",
-            "key": undefined,
-            "text": "Checkbox",
-            "value": "checkbox",
-          },
-          {
-            "icon": "linkify",
-            "key": undefined,
-            "text": "Links",
-            "value": "pair_list",
-          },
-          {
-            "icon": "tint",
-            "key": undefined,
-            "text": "Colorpicker",
-            "value": "color_picker",
-          },
-          {
-            "icon": "text cursor",
-            "key": undefined,
-            "text": "Enrichedtext",
-            "value": "enriched_text",
-          },
-          {
-            "icon": "table",
-            "key": undefined,
-            "text": "Table",
-            "value": "table",
-          },
-          {
-            "icon": "asterisk",
-            "key": undefined,
-            "text": "Password",
-            "value": "password",
-          },
-          {
-            "icon": "image",
-            "key": undefined,
-            "text": "Image",
-            "value": "image",
-          },
-          {
-            "icon": "hashtag",
-            "key": undefined,
-            "text": "Number",
-            "value": "number",
-          },
-          {
-            "icon": "calendar",
-            "key": undefined,
-            "text": "Date",
-            "value": "date",
-          },
-          {
-            "icon": "calendar",
-            "key": undefined,
-            "text": "Date Time",
-            "value": "datetime",
-          },
-        ]
-      }
-      required={true}
-      selection={true}
-      value="dropdown"
-    />
-    <FormDropdown
-      as={[Function]}
-      control={[Function]}
-      fluid={true}
-      label="template.field.type"
-      name="Group.fields[0].type"
-      onChange={[Function]}
-      options={
-        [
-          {
-            "key": "string",
-            "text": "template.field.type.string",
-            "value": "string",
-          },
-          {
-            "key": "system",
-            "text": "template.field.type.system",
-            "value": "system",
-          },
-          {
-            "key": "domain",
-            "text": "template.field.type.domain",
-            "value": "domain",
-          },
-          {
-            "key": "user",
-            "text": "template.field.type.user",
-            "value": "user",
-          },
-          {
-            "key": "user_group",
-            "text": "template.field.type.user_group",
-            "value": "user_group",
-          },
-          {
-            "key": "hierarchy",
-            "text": "template.field.type.hierarchy",
-            "value": "hierarchy",
-          },
-        ]
-      }
-      required={true}
-      selection={true}
-      value="string"
-    />
-    <FormDropdown
-      as={[Function]}
-      control={[Function]}
-      fluid={true}
-      label="template.field.cardinality"
-      name="Group.fields[0].cardinality"
-      onChange={[Function]}
-      options={
-        [
-          {
-            "key": "?",
-            "text": "template.field.cardinality.?",
-            "value": "?",
-          },
-          {
-            "key": "1",
-            "text": "template.field.cardinality.1",
-            "value": "1",
-          },
-          {
-            "key": "*",
-            "text": "template.field.cardinality.*",
-            "value": "*",
-          },
-          {
-            "key": "+",
-            "text": "template.field.cardinality.+",
-            "value": "+",
-          },
-        ]
-      }
-      required={true}
-      selection={true}
-    />
-  </FormGroup>
-  <ValuesField
-    defaultField="Group.fields[0].default"
-    field={
-      {
-        "description": "A field for testing",
-        "label": "Field 1",
-        "name": "field1",
-        "required": true,
-        "type": "string",
-        "values": {
-          "fixed": [
-            "A",
-            "B",
-          ],
-        },
-        "widget": "dropdown",
-      }
-    }
-    fieldNamePrefix="Group.fields[0]"
-    fieldType="string"
-    keyType="fixed"
-    name="Group.fields[0].values"
-    onChange={[MockFunction]}
-    onSelectionChange={[Function]}
-    subscribableField="Group.fields[0].subscribable"
-    values={
-      [
-        {
-          "id": "template.field.values.fixed",
-          "value": "fixed",
-        },
-        {
-          "id": "template.field.values.fixed_tuple",
-          "value": "fixed_tuple",
-        },
-        {
-          "id": "template.field.values.switch",
-          "value": "switch",
-        },
-        {
-          "id": "template.field.values.domain",
-          "value": "domain",
-        },
-      ]
-    }
-  />
-  <ConditionalFieldForm
-    field={
-      {
-        "description": "A field for testing",
-        "label": "Field 1",
-        "name": "field1",
-        "required": true,
-        "type": "string",
-        "values": {
-          "fixed": [
-            "A",
-            "B",
-          ],
-        },
-        "widget": "dropdown",
-      }
-    }
-    fieldNamePrefix="Group.fields[0]"
-    onChange={[MockFunction]}
-  />
-</Segment>
+        <div
+          aria-expanded="false"
+          class="ui fluid selection dropdown"
+          name="Group.fields[0].widget"
+          required=""
+          role="listbox"
+          tabindex="0"
+        >
+          <i
+            aria-hidden="true"
+            class="dropdown icon"
+          />
+          <div
+            class="menu transition"
+          >
+            <div
+              aria-checked="false"
+              aria-selected="true"
+              class="selected item"
+              role="option"
+              style="pointer-events: all;"
+            >
+              <i
+                aria-hidden="true"
+                class="hashtag icon"
+              />
+              <span
+                class="text"
+              >
+                Identifier
+              </span>
+            </div>
+            <div
+              aria-checked="false"
+              aria-selected="false"
+              class="item"
+              role="option"
+              style="pointer-events: all;"
+            >
+              <i
+                aria-hidden="true"
+                class="minus icon"
+              />
+              <span
+                class="text"
+              >
+                Text Input
+              </span>
+            </div>
+            <div
+              aria-checked="false"
+              aria-selected="false"
+              class="item"
+              role="option"
+              style="pointer-events: all;"
+            >
+              <i
+                aria-hidden="true"
+                class="align justify icon"
+              />
+              <span
+                class="text"
+              >
+                Textarea
+              </span>
+            </div>
+            <div
+              aria-checked="false"
+              aria-selected="false"
+              class="item"
+              role="option"
+              style="pointer-events: all;"
+            >
+              <i
+                aria-hidden="true"
+                class="arrow down icon"
+              />
+              <span
+                class="text"
+              >
+                Dropdown
+              </span>
+            </div>
+            <div
+              aria-checked="false"
+              aria-selected="false"
+              class="item"
+              role="option"
+              style="pointer-events: all;"
+            >
+              <i
+                aria-hidden="true"
+                class="radio icon"
+              />
+              <span
+                class="text"
+              >
+                Radio
+              </span>
+            </div>
+            <div
+              aria-checked="false"
+              aria-selected="false"
+              class="item"
+              role="option"
+              style="pointer-events: all;"
+            >
+              <i
+                aria-hidden="true"
+                class="check square outline icon"
+              />
+              <span
+                class="text"
+              >
+                Checkbox
+              </span>
+            </div>
+            <div
+              aria-checked="false"
+              aria-selected="false"
+              class="item"
+              role="option"
+              style="pointer-events: all;"
+            >
+              <i
+                aria-hidden="true"
+                class="linkify icon"
+              />
+              <span
+                class="text"
+              >
+                Links
+              </span>
+            </div>
+            <div
+              aria-checked="false"
+              aria-selected="false"
+              class="item"
+              role="option"
+              style="pointer-events: all;"
+            >
+              <i
+                aria-hidden="true"
+                class="tint icon"
+              />
+              <span
+                class="text"
+              >
+                Colorpicker
+              </span>
+            </div>
+            <div
+              aria-checked="false"
+              aria-selected="false"
+              class="item"
+              role="option"
+              style="pointer-events: all;"
+            >
+              <i
+                aria-hidden="true"
+                class="text cursor icon"
+              />
+              <span
+                class="text"
+              >
+                Enrichedtext
+              </span>
+            </div>
+            <div
+              aria-checked="false"
+              aria-selected="false"
+              class="item"
+              role="option"
+              style="pointer-events: all;"
+            >
+              <i
+                aria-hidden="true"
+                class="table icon"
+              />
+              <span
+                class="text"
+              >
+                Table
+              </span>
+            </div>
+            <div
+              aria-checked="false"
+              aria-selected="false"
+              class="item"
+              role="option"
+              style="pointer-events: all;"
+            >
+              <i
+                aria-hidden="true"
+                class="asterisk icon"
+              />
+              <span
+                class="text"
+              >
+                Password
+              </span>
+            </div>
+            <div
+              aria-checked="false"
+              aria-selected="false"
+              class="item"
+              role="option"
+              style="pointer-events: all;"
+            >
+              <i
+                aria-hidden="true"
+                class="image icon"
+              />
+              <span
+                class="text"
+              >
+                Image
+              </span>
+            </div>
+            <div
+              aria-checked="false"
+              aria-selected="false"
+              class="item"
+              role="option"
+              style="pointer-events: all;"
+            >
+              <i
+                aria-hidden="true"
+                class="hashtag icon"
+              />
+              <span
+                class="text"
+              >
+                Number
+              </span>
+            </div>
+            <div
+              aria-checked="false"
+              aria-selected="false"
+              class="item"
+              role="option"
+              style="pointer-events: all;"
+            >
+              <i
+                aria-hidden="true"
+                class="calendar icon"
+              />
+              <span
+                class="text"
+              >
+                Date
+              </span>
+            </div>
+            <div
+              aria-checked="false"
+              aria-selected="false"
+              class="item"
+              role="option"
+              style="pointer-events: all;"
+            >
+              <i
+                aria-hidden="true"
+                class="calendar icon"
+              />
+              <span
+                class="text"
+              >
+                Date Time
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="required field"
+      >
+        <label>
+          template.field.type
+        </label>
+        <div
+          aria-expanded="false"
+          class="ui fluid selection dropdown"
+          name="Group.fields[0].type"
+          required=""
+          role="listbox"
+          tabindex="0"
+        >
+          <i
+            aria-hidden="true"
+            class="dropdown icon"
+          />
+          <div
+            class="menu transition"
+          />
+        </div>
+      </div>
+      <div
+        class="required field"
+      >
+        <label>
+          template.field.cardinality
+        </label>
+        <div
+          aria-expanded="false"
+          class="ui fluid selection dropdown"
+          name="Group.fields[0].cardinality"
+          required=""
+          role="listbox"
+          tabindex="0"
+        >
+          <i
+            aria-hidden="true"
+            class="dropdown icon"
+          />
+          <div
+            class="menu transition"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      class="ui segment"
+    >
+      <div
+        class="equal width fields"
+      >
+        <div
+          class="field"
+        >
+          <div
+            class="field"
+          >
+            <div
+              class="ui checked checkbox"
+            >
+              <input
+                checked=""
+                class="hidden"
+                name="Group.fields[0].editable"
+                readonly=""
+                tabindex="0"
+                type="checkbox"
+              />
+              <label>
+                Editable
+              </label>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="field"
+      >
+        <label>
+          template.field.values.default_value
+        </label>
+        <div
+          class="ui input"
+        >
+          <input
+            name="default_value"
+            type="text"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      class="field"
+    >
+      <label>
+        <label>
+          template.field.depends
+        </label>
+      </label>
+      <div
+        class="equal width fields"
+      >
+        <div
+          class="field"
+        >
+          <div
+            class="field"
+          >
+            <div
+              aria-disabled="false"
+              aria-expanded="false"
+              class="ui fluid search selection dropdown"
+              name="Group.fields[0].depends.on"
+              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"
+              >
+                template.field.depends.on
+              </div>
+              <i
+                aria-hidden="true"
+                class="dropdown icon"
+              />
+              <div
+                class="menu transition"
+                role="listbox"
+              >
+                <div
+                  aria-checked="false"
+                  aria-selected="true"
+                  class="selected item"
+                  role="option"
+                  style="pointer-events: all;"
+                >
+                  <span
+                    class="text"
+                  >
+                    Foo
+                  </span>
+                </div>
+                <div
+                  aria-checked="false"
+                  aria-selected="false"
+                  class="item"
+                  role="option"
+                  style="pointer-events: all;"
+                >
+                  <span
+                    class="text"
+                  >
+                    Bar
+                  </span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          class="field"
+        >
+          <div
+            class="disabled field"
+          >
+            <div
+              aria-disabled="true"
+              aria-expanded="false"
+              class="ui disabled fluid multiple search selection dropdown"
+              name="Group.fields[0].depends.to_be"
+              role="combobox"
+            >
+              <input
+                aria-autocomplete="list"
+                autocomplete="off"
+                class="search"
+                tabindex="-1"
+                type="text"
+                value=""
+              />
+              <span
+                class="sizer"
+              />
+              <div
+                aria-atomic="true"
+                aria-live="polite"
+                class="divider default text"
+                role="alert"
+              >
+                template.field.depends.to_be
+              </div>
+              <i
+                aria-hidden="true"
+                class="dropdown icon"
+              />
+              <div
+                aria-multiselectable="true"
+                class="menu transition"
+                role="listbox"
+              >
+                <div
+                  class="message"
+                >
+                  No results found.
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="field"
+    >
+      <label>
+        <label>
+          template.field.mandatory.depends
+        </label>
+      </label>
+      <div
+        class="equal width fields"
+      >
+        <div
+          class="field"
+        >
+          <div
+            class="field"
+          >
+            <div
+              aria-disabled="false"
+              aria-expanded="false"
+              class="ui fluid search selection dropdown"
+              name="Group.fields[0].mandatory.on"
+              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"
+              >
+                Bar
+              </div>
+              <i
+                aria-hidden="true"
+                class="dropdown icon clear"
+              />
+              <div
+                class="menu transition"
+                role="listbox"
+              >
+                <div
+                  aria-checked="false"
+                  aria-selected="false"
+                  class="item"
+                  role="option"
+                  style="pointer-events: all;"
+                >
+                  <span
+                    class="text"
+                  >
+                    Foo
+                  </span>
+                </div>
+                <div
+                  aria-checked="true"
+                  aria-selected="true"
+                  class="active selected item"
+                  role="option"
+                  style="pointer-events: all;"
+                >
+                  <span
+                    class="text"
+                  >
+                    Bar
+                  </span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div
+          class="field"
+        >
+          <div
+            class="field"
+          >
+            <div
+              aria-disabled="false"
+              aria-expanded="false"
+              class="ui fluid multiple search selection dropdown"
+              name="Group.fields[0].mandatory.to_be"
+              role="combobox"
+            >
+              <a
+                class="ui label"
+                value="3"
+              >
+                3
+                <i
+                  aria-hidden="true"
+                  class="delete icon"
+                />
+              </a>
+              <input
+                aria-autocomplete="list"
+                autocomplete="off"
+                class="search"
+                tabindex="0"
+                type="text"
+                value=""
+              />
+              <span
+                class="sizer"
+              />
+              <div
+                aria-atomic="true"
+                aria-live="polite"
+                class="divider text"
+                role="alert"
+              >
+                template.field.mandatory.depends.to_be
+              </div>
+              <i
+                aria-hidden="true"
+                class="dropdown icon clear"
+              />
+              <div
+                aria-multiselectable="true"
+                class="menu transition"
+                role="listbox"
+              >
+                <div
+                  aria-checked="false"
+                  aria-selected="true"
+                  class="selected item"
+                  role="option"
+                  style="pointer-events: all;"
+                >
+                  <span
+                    class="text"
+                  >
+                    4
+                  </span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`<FieldForm /> renders ValuesField and manages onChange 1`] = `
+<div>
+  <div
+    class="ui segment"
+  >
+    <div
+      class="ui orange tiny basic right floated buttons"
+    >
+      <button
+        class="ui icon disabled button"
+        disabled=""
+        tabindex="-1"
+      >
+        <i
+          aria-hidden="true"
+          class="arrow up icon"
+        />
+      </button>
+      <button
+        class="ui icon disabled button"
+        disabled=""
+        tabindex="-1"
+      >
+        <i
+          aria-hidden="true"
+          class="arrow down icon"
+        />
+      </button>
+      <button
+        class="ui icon button"
+      >
+        <i
+          aria-hidden="true"
+          class="trash alternate outline icon"
+        />
+      </button>
+    </div>
+    <div
+      class="ui clearing hidden divider"
+    />
+    <div
+      class="equal width fields"
+    >
+      <div
+        class="required field"
+      >
+        <label>
+          template.field.label
+        </label>
+        <div
+          class="ui small input"
+        >
+          <input
+            name="Group.fields[0].label"
+            required=""
+            type="text"
+            value="Field 1"
+          />
+        </div>
+      </div>
+      <div
+        class="required field"
+      >
+        <label>
+          template.field.name
+        </label>
+        <div
+          class="ui small fluid input"
+        >
+          <input
+            name="Group.fields[0].name"
+            required=""
+            type="text"
+            value="field1"
+          />
+        </div>
+      </div>
+    </div>
+    <div
+      class="field"
+    >
+      <label>
+        template.field.description
+      </label>
+      <textarea
+        name="Group.fields[0].description"
+        rows="4"
+      >
+        A field for testing
+      </textarea>
+    </div>
+    <div
+      class="equal width fields"
+    >
+      <div
+        class="required field"
+      >
+        <label>
+          template.field.widget
+        </label>
+        <div
+          aria-expanded="false"
+          class="ui fluid selection dropdown"
+          name="Group.fields[0].widget"
+          required=""
+          role="listbox"
+          tabindex="0"
+        >
+          <div
+            aria-atomic="true"
+            aria-live="polite"
+            class="divider text"
+            role="alert"
+          >
+            Dropdown
+          </div>
+          <i
+            aria-hidden="true"
+            class="dropdown icon"
+          />
+          <div
+            class="menu transition"
+          >
+            <div
+              aria-checked="false"
+              aria-selected="false"
+              class="item"
+              role="option"
+              style="pointer-events: all;"
+            >
+              <i
+                aria-hidden="true"
+                class="hashtag icon"
+              />
+              <span
+                class="text"
+              >
+                Identifier
+              </span>
+            </div>
+            <div
+              aria-checked="false"
+              aria-selected="false"
+              class="item"
+              role="option"
+              style="pointer-events: all;"
+            >
+              <i
+                aria-hidden="true"
+                class="minus icon"
+              />
+              <span
+                class="text"
+              >
+                Text Input
+              </span>
+            </div>
+            <div
+              aria-checked="false"
+              aria-selected="false"
+              class="item"
+              role="option"
+              style="pointer-events: all;"
+            >
+              <i
+                aria-hidden="true"
+                class="align justify icon"
+              />
+              <span
+                class="text"
+              >
+                Textarea
+              </span>
+            </div>
+            <div
+              aria-checked="true"
+              aria-selected="true"
+              class="active selected item"
+              role="option"
+              style="pointer-events: all;"
+            >
+              <i
+                aria-hidden="true"
+                class="arrow down icon"
+              />
+              <span
+                class="text"
+              >
+                Dropdown
+              </span>
+            </div>
+            <div
+              aria-checked="false"
+              aria-selected="false"
+              class="item"
+              role="option"
+              style="pointer-events: all;"
+            >
+              <i
+                aria-hidden="true"
+                class="radio icon"
+              />
+              <span
+                class="text"
+              >
+                Radio
+              </span>
+            </div>
+            <div
+              aria-checked="false"
+              aria-selected="false"
+              class="item"
+              role="option"
+              style="pointer-events: all;"
+            >
+              <i
+                aria-hidden="true"
+                class="check square outline icon"
+              />
+              <span
+                class="text"
+              >
+                Checkbox
+              </span>
+            </div>
+            <div
+              aria-checked="false"
+              aria-selected="false"
+              class="item"
+              role="option"
+              style="pointer-events: all;"
+            >
+              <i
+                aria-hidden="true"
+                class="linkify icon"
+              />
+              <span
+                class="text"
+              >
+                Links
+              </span>
+            </div>
+            <div
+              aria-checked="false"
+              aria-selected="false"
+              class="item"
+              role="option"
+              style="pointer-events: all;"
+            >
+              <i
+                aria-hidden="true"
+                class="tint icon"
+              />
+              <span
+                class="text"
+              >
+                Colorpicker
+              </span>
+            </div>
+            <div
+              aria-checked="false"
+              aria-selected="false"
+              class="item"
+              role="option"
+              style="pointer-events: all;"
+            >
+              <i
+                aria-hidden="true"
+                class="text cursor icon"
+              />
+              <span
+                class="text"
+              >
+                Enrichedtext
+              </span>
+            </div>
+            <div
+              aria-checked="false"
+              aria-selected="false"
+              class="item"
+              role="option"
+              style="pointer-events: all;"
+            >
+              <i
+                aria-hidden="true"
+                class="table icon"
+              />
+              <span
+                class="text"
+              >
+                Table
+              </span>
+            </div>
+            <div
+              aria-checked="false"
+              aria-selected="false"
+              class="item"
+              role="option"
+              style="pointer-events: all;"
+            >
+              <i
+                aria-hidden="true"
+                class="asterisk icon"
+              />
+              <span
+                class="text"
+              >
+                Password
+              </span>
+            </div>
+            <div
+              aria-checked="false"
+              aria-selected="false"
+              class="item"
+              role="option"
+              style="pointer-events: all;"
+            >
+              <i
+                aria-hidden="true"
+                class="image icon"
+              />
+              <span
+                class="text"
+              >
+                Image
+              </span>
+            </div>
+            <div
+              aria-checked="false"
+              aria-selected="false"
+              class="item"
+              role="option"
+              style="pointer-events: all;"
+            >
+              <i
+                aria-hidden="true"
+                class="hashtag icon"
+              />
+              <span
+                class="text"
+              >
+                Number
+              </span>
+            </div>
+            <div
+              aria-checked="false"
+              aria-selected="false"
+              class="item"
+              role="option"
+              style="pointer-events: all;"
+            >
+              <i
+                aria-hidden="true"
+                class="calendar icon"
+              />
+              <span
+                class="text"
+              >
+                Date
+              </span>
+            </div>
+            <div
+              aria-checked="false"
+              aria-selected="false"
+              class="item"
+              role="option"
+              style="pointer-events: all;"
+            >
+              <i
+                aria-hidden="true"
+                class="calendar icon"
+              />
+              <span
+                class="text"
+              >
+                Date Time
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="required field"
+      >
+        <label>
+          template.field.type
+        </label>
+        <div
+          aria-expanded="false"
+          class="ui fluid selection dropdown"
+          name="Group.fields[0].type"
+          required=""
+          role="listbox"
+          tabindex="0"
+        >
+          <div
+            aria-atomic="true"
+            aria-live="polite"
+            class="divider text"
+            role="alert"
+          >
+            template.field.type.string
+          </div>
+          <i
+            aria-hidden="true"
+            class="dropdown icon"
+          />
+          <div
+            class="menu transition"
+          >
+            <div
+              aria-checked="true"
+              aria-selected="true"
+              class="active selected item"
+              role="option"
+              style="pointer-events: all;"
+            >
+              <span
+                class="text"
+              >
+                template.field.type.string
+              </span>
+            </div>
+            <div
+              aria-checked="false"
+              aria-selected="false"
+              class="item"
+              role="option"
+              style="pointer-events: all;"
+            >
+              <span
+                class="text"
+              >
+                template.field.type.system
+              </span>
+            </div>
+            <div
+              aria-checked="false"
+              aria-selected="false"
+              class="item"
+              role="option"
+              style="pointer-events: all;"
+            >
+              <span
+                class="text"
+              >
+                template.field.type.domain
+              </span>
+            </div>
+            <div
+              aria-checked="false"
+              aria-selected="false"
+              class="item"
+              role="option"
+              style="pointer-events: all;"
+            >
+              <span
+                class="text"
+              >
+                template.field.type.user
+              </span>
+            </div>
+            <div
+              aria-checked="false"
+              aria-selected="false"
+              class="item"
+              role="option"
+              style="pointer-events: all;"
+            >
+              <span
+                class="text"
+              >
+                template.field.type.user_group
+              </span>
+            </div>
+            <div
+              aria-checked="false"
+              aria-selected="false"
+              class="item"
+              role="option"
+              style="pointer-events: all;"
+            >
+              <span
+                class="text"
+              >
+                template.field.type.hierarchy
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="required field"
+      >
+        <label>
+          template.field.cardinality
+        </label>
+        <div
+          aria-expanded="false"
+          class="ui fluid selection dropdown"
+          name="Group.fields[0].cardinality"
+          required=""
+          role="listbox"
+          tabindex="0"
+        >
+          <i
+            aria-hidden="true"
+            class="dropdown icon"
+          />
+          <div
+            class="menu transition"
+          >
+            <div
+              aria-checked="false"
+              aria-selected="true"
+              class="selected item"
+              role="option"
+              style="pointer-events: all;"
+            >
+              <span
+                class="text"
+              >
+                template.field.cardinality.?
+              </span>
+            </div>
+            <div
+              aria-checked="false"
+              aria-selected="false"
+              class="item"
+              role="option"
+              style="pointer-events: all;"
+            >
+              <span
+                class="text"
+              >
+                template.field.cardinality.1
+              </span>
+            </div>
+            <div
+              aria-checked="false"
+              aria-selected="false"
+              class="item"
+              role="option"
+              style="pointer-events: all;"
+            >
+              <span
+                class="text"
+              >
+                template.field.cardinality.*
+              </span>
+            </div>
+            <div
+              aria-checked="false"
+              aria-selected="false"
+              class="item"
+              role="option"
+              style="pointer-events: all;"
+            >
+              <span
+                class="text"
+              >
+                template.field.cardinality.+
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="ui segment"
+    >
+      <div
+        class="required field"
+      >
+        <label>
+          template.field.values
+        </label>
+        <div
+          aria-expanded="false"
+          class="ui fluid selection dropdown"
+          required=""
+          role="listbox"
+          tabindex="0"
+        >
+          <div
+            aria-atomic="true"
+            aria-live="polite"
+            class="divider text"
+            role="alert"
+          >
+            template.field.values.fixed
+          </div>
+          <i
+            aria-hidden="true"
+            class="dropdown icon"
+          />
+          <div
+            class="menu transition"
+          >
+            <div
+              aria-checked="true"
+              aria-selected="true"
+              class="active selected item"
+              role="option"
+              style="pointer-events: all;"
+            >
+              <span
+                class="text"
+              >
+                template.field.values.fixed
+              </span>
+            </div>
+            <div
+              aria-checked="false"
+              aria-selected="false"
+              class="item"
+              role="option"
+              style="pointer-events: all;"
+            >
+              <span
+                class="text"
+              >
+                template.field.values.fixed_tuple
+              </span>
+            </div>
+            <div
+              aria-checked="false"
+              aria-selected="false"
+              class="item"
+              role="option"
+              style="pointer-events: all;"
+            >
+              <span
+                class="text"
+              >
+                template.field.values.switch
+              </span>
+            </div>
+            <div
+              aria-checked="false"
+              aria-selected="false"
+              class="item"
+              role="option"
+              style="pointer-events: all;"
+            >
+              <span
+                class="text"
+              >
+                template.field.values.domain
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="ui middle aligned list"
+        role="list"
+      >
+        <div
+          class="item"
+          role="listitem"
+        >
+          <i
+            aria-hidden="true"
+            class="remove circle link icon"
+          />
+          <i
+            aria-hidden="true"
+            class="chevron circle up disabled link icon"
+          />
+          <i
+            aria-hidden="true"
+            class="chevron circle down link icon"
+          />
+          <div
+            class="content"
+          >
+            A
+          </div>
+        </div>
+        <div
+          class="item"
+          role="listitem"
+        >
+          <i
+            aria-hidden="true"
+            class="remove circle link icon"
+          />
+          <i
+            aria-hidden="true"
+            class="chevron circle up link icon"
+          />
+          <i
+            aria-hidden="true"
+            class="chevron circle down disabled link icon"
+          />
+          <div
+            class="content"
+          >
+            B
+          </div>
+        </div>
+        <div
+          class="item"
+          role="listitem"
+        >
+          <div
+            class="field"
+          >
+            <div
+              class="ui icon input"
+            >
+              <input
+                name="fixed_value"
+                placeholder="template.field.values.add_value"
+                type="text"
+                value=""
+              />
+              <i
+                aria-hidden="true"
+                class="add circle link icon"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="equal width fields"
+      >
+        <div
+          class="field"
+        >
+          <div
+            class="field"
+          >
+            <div
+              class="ui checked checkbox"
+            >
+              <input
+                checked=""
+                class="hidden"
+                name="Group.fields[0].editable"
+                readonly=""
+                tabindex="0"
+                type="checkbox"
+              />
+              <label>
+                Editable
+              </label>
+            </div>
+          </div>
+        </div>
+        <div
+          class="field"
+        >
+          <div
+            class="field"
+          >
+            <div
+              class="ui checkbox"
+            >
+              <input
+                class="hidden"
+                name="Group.fields[0].ai_suggestion"
+                readonly=""
+                tabindex="0"
+                type="checkbox"
+              />
+              <label>
+                AI Suggestions
+              </label>
+            </div>
+          </div>
+        </div>
+        <div
+          class="field"
+        >
+          <div
+            class="ui checkbox"
+          >
+            <input
+              class="hidden"
+              name="Group.fields[0].subscribable"
+              readonly=""
+              tabindex="0"
+              type="checkbox"
+            />
+            <label>
+              template.field.subscribable
+            </label>
+          </div>
+        </div>
+      </div>
+      <div
+        class="field"
+      >
+        <label>
+          template.field.values.default_value
+        </label>
+        <div
+          aria-expanded="false"
+          class="ui fluid selection dropdown"
+          role="listbox"
+          tabindex="0"
+        >
+          <i
+            aria-hidden="true"
+            class="dropdown icon"
+          />
+          <div
+            class="menu transition"
+          >
+            <div
+              aria-checked="true"
+              aria-selected="true"
+              class="active selected item"
+              role="option"
+              style="pointer-events: all;"
+            >
+              <span
+                class="text"
+              />
+            </div>
+            <div
+              aria-checked="false"
+              aria-selected="false"
+              class="item"
+              role="option"
+              style="pointer-events: all;"
+            >
+              <span
+                class="text"
+              >
+                A
+              </span>
+            </div>
+            <div
+              aria-checked="false"
+              aria-selected="false"
+              class="item"
+              role="option"
+              style="pointer-events: all;"
+            >
+              <span
+                class="text"
+              >
+                B
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="field"
+    >
+      <label>
+        <label>
+          template.field.depends
+        </label>
+      </label>
+      <div
+        class="equal width fields"
+      >
+        <div
+          class="field"
+        >
+          <div
+            class="disabled field"
+          >
+            <div
+              aria-disabled="true"
+              aria-expanded="false"
+              class="ui disabled fluid search selection dropdown"
+              name="Group.fields[0].depends.on"
+              role="combobox"
+            >
+              <input
+                aria-autocomplete="list"
+                autocomplete="off"
+                class="search"
+                tabindex="-1"
+                type="text"
+                value=""
+              />
+              <div
+                aria-atomic="true"
+                aria-live="polite"
+                class="divider default text"
+                role="alert"
+              >
+                template.field.depends.on
+              </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>
+        <div
+          class="field"
+        >
+          <div
+            class="disabled field"
+          >
+            <div
+              aria-disabled="true"
+              aria-expanded="false"
+              class="ui disabled fluid multiple search selection dropdown"
+              name="Group.fields[0].depends.to_be"
+              role="combobox"
+            >
+              <input
+                aria-autocomplete="list"
+                autocomplete="off"
+                class="search"
+                tabindex="-1"
+                type="text"
+                value=""
+              />
+              <span
+                class="sizer"
+              />
+              <div
+                aria-atomic="true"
+                aria-live="polite"
+                class="divider default text"
+                role="alert"
+              >
+                template.field.depends.to_be
+              </div>
+              <i
+                aria-hidden="true"
+                class="dropdown icon"
+              />
+              <div
+                aria-multiselectable="true"
+                class="menu transition"
+                role="listbox"
+              >
+                <div
+                  class="message"
+                >
+                  No results found.
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
 `;