@overmap-ai/forms 1.0.12-links.9 → 1.0.13

package/dist/fields/constants.d.ts

@@ -18,7 +18,3 @@ export declare const FieldTypeToClsMapping: {
     readonly "multi-string": typeof MultiStringField;
     readonly "multi-select": typeof MultiSelectField;
 };
-export declare const linkOptions: {
-    target: string;
-    rel: string;
-};

package/dist/forms.js

@@ -5,14 +5,14 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { Flex, Text, useSeverityColor, Checkbox, Select, IconButton, Badge, MultiSelect, Button, TextArea, ButtonList, divButtonProps, Tooltip, Separator, useDiscardAlertDialog, Dialog, DropdownItemMenu, useAlertDialog, useToast } from "@overmap-ai/blocks";
+import { Flex, Text, useSeverityColor, Checkbox, TextArea, Select, IconButton, Badge, MultiSelect, Button, ButtonList, divButtonProps, Tooltip, Separator, useDiscardAlertDialog, Dialog, DropdownItemMenu, useAlertDialog, useToast } from "@overmap-ai/blocks";
 import { useField, useFormikContext, useFormik, FormikProvider } from "formik";
-import React, { useMemo, memo, useCallback, useState, useRef, useEffect, forwardRef, Fragment as Fragment$1, useReducer } from "react";
-import { CheckCircledIcon, FontFamilyIcon, CalendarIcon, PlusIcon, Cross1Icon, ListBulletIcon, DropdownMenuIcon, CheckboxIcon, UploadIcon, InputIcon, RowsIcon, StarFilledIcon, StarIcon, QuestionMarkCircledIcon, PersonIcon, Pencil1Icon, TrashIcon, CopyIcon, DragHandleDots2Icon, DotsVerticalIcon } from "@radix-ui/react-icons";
+import React, { useMemo, memo, useCallback, useState, useEffect, useRef, forwardRef, Fragment as Fragment$1, useReducer } from "react";
+import { CheckCircledIcon, FontFamilyIcon, CalendarIcon, InputIcon, RowsIcon, PlusIcon, Cross1Icon, ListBulletIcon, DropdownMenuIcon, CheckboxIcon, UploadIcon, StarFilledIcon, StarIcon, QuestionMarkCircledIcon, PersonIcon, Pencil1Icon, TrashIcon, CopyIcon, DragHandleDots2Icon, DotsVerticalIcon } from "@radix-ui/react-icons";
 import { TextField as TextField$1, Box, Card, Heading, Avatar, Em, Strong, Tabs } from "@radix-ui/themes";
 import Linkify from "linkify-react";
+import { classNames, slugify, useAppSelector, selectFormRevision, useSDK, selectSubmissionAttachments, selectFilteredUserForms, selectUserFormMapping, selectOrganization, selectUser, selectNumberOfUserForms, selectCurrentUser, isToday, getLocalDateString, selectLatestFormRevision, useFileSrc, selectSubmissionsForForm } from "@overmap-ai/core";
 import { DragDropContext, Droppable, Draggable } from "@hello-pangea/dnd";
-import { slugify, classNames, useAppSelector, selectFormRevision, useSDK, selectSubmissionAttachments, selectFilteredUserForms, selectUserFormMapping, selectOrganization, selectUser, selectNumberOfUserForms, selectCurrentUser, isToday, getLocalDateString, selectLatestFormRevision, useFileSrc, selectSubmissionsForForm } from "@overmap-ai/core";
 import get from "lodash.get";
 import set from "lodash.set";
 import cloneDeep from "lodash.clonedeep";
@@ -473,12 +473,91 @@ __publicField(StringOrTextField, "_validateMax", (value, allValues) => {
   }
   return null;
 });
-const TextFieldRoot = "_TextFieldRoot_8ge74_1";
-const TextFieldInputCopy = "_TextFieldInputCopy_8ge74_5";
+const clickableLinkContainer = "_clickableLinkContainer_1ace7_1";
+const TextFieldInputCopy = "_TextFieldInputCopy_1ace7_5";
 const styles$3 = {
-  TextFieldRoot,
+  clickableLinkContainer,
   TextFieldInputCopy
 };
+const StringInput = memo(function StringInput2(props) {
+  const [{ inputId, labelId, severity, helpText, label, fieldProps, field }, rest] = useFormikInput(props);
+  const color = useSeverityColor(severity);
+  return /* @__PURE__ */ jsx(InputWithLabelAndHelpText, { helpText, severity, children: /* @__PURE__ */ jsx(InputWithLabel, { severity, inputId, labelId, label, children: !rest.disabled ? /* @__PURE__ */ jsx(TextField$1.Input, { ...rest, ...fieldProps, type: field.inputType, id: inputId, color }) : /* @__PURE__ */ jsxs(TextField$1.Root, { className: styles$3.clickableLinkContainer, children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: classNames(
+          "rt-TextFieldInput rt-r-size-2 rt-variant-surface",
+          styles$3.TextFieldInputCopy
+        ),
+        children: /* @__PURE__ */ jsx(
+          Linkify,
+          {
+            options: {
+              target: "_blank",
+              rel: "noopener"
+            },
+            children: fieldProps.value
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx("div", { className: "rt-TextFieldChrome" })
+  ] }) }) });
+});
+const _StringField = class _StringField extends StringOrTextField {
+  constructor(options) {
+    const { inputType = "text", ...rest } = options;
+    const maxLength = options.maxLength ? Math.min(500, options.maxLength) : 500;
+    const minLength = options.minLength ? Math.min(options.minLength, maxLength) : void 0;
+    super({ ...rest, maxLength, minLength, type: "string" });
+    __publicField(this, "inputType");
+    this.inputType = inputType;
+  }
+  serialize() {
+    return { ...super._serialize(), input_type: this.inputType };
+  }
+  static deserialize(data) {
+    if (data.type !== "string")
+      throw new Error("Type mismatch.");
+    const { maximum_length, minimum_length, input_type, ...rest } = data;
+    return new _StringField({ ...rest, maxLength: maximum_length, minLength: minimum_length, inputType: input_type });
+  }
+  getInput(props) {
+    return /* @__PURE__ */ jsx(StringInput, { field: this, ...props });
+  }
+};
+__publicField(_StringField, "fieldTypeName", "Short Text");
+__publicField(_StringField, "fieldTypeDescription", "Short text fields can hold up to 500 characters on a single line.");
+__publicField(_StringField, "Icon", InputIcon);
+let StringField = _StringField;
+const TextInput = memo(function TextInput2(props) {
+  const [{ inputId, labelId, severity, helpText, label, fieldProps }, rest] = useFormikInput(props);
+  return /* @__PURE__ */ jsx(InputWithLabelAndHelpText, { helpText, severity, children: /* @__PURE__ */ jsx(InputWithLabel, { severity, inputId, labelId, label, children: /* @__PURE__ */ jsx(TextArea, { ...rest, ...fieldProps, resize: "vertical", id: inputId, severity }) }) });
+});
+const _TextField = class _TextField extends StringOrTextField {
+  constructor(options) {
+    const maxLength = options.maxLength ? Math.min(5e3, options.maxLength) : 5e3;
+    const minLength = options.minLength ? Math.min(options.minLength, maxLength) : void 0;
+    super({ ...options, maxLength, minLength, type: "text" });
+  }
+  serialize() {
+    return super._serialize();
+  }
+  static deserialize(data) {
+    if (data.type !== "text")
+      throw new Error("Type mismatch.");
+    const { maximum_length, minimum_length, ...rest } = data;
+    return new _TextField({ ...rest, maxLength: maximum_length, minLength: minimum_length });
+  }
+  getInput(props) {
+    return /* @__PURE__ */ jsx(TextInput, { field: this, ...props });
+  }
+};
+__publicField(_TextField, "fieldTypeName", "Paragraph");
+__publicField(_TextField, "fieldTypeDescription", "Paragraph fields can hold up to 5000 characters and can have multiple lines.");
+__publicField(_TextField, "Icon", RowsIcon);
+let TextField = _TextField;
 const SelectInput = memo(function SelectInput2(props) {
   const [{ inputId, labelId, severity, helpText, label, fieldProps, field }, rest] = useFormikInput(props);
   const { onChange, onBlur } = fieldProps;
@@ -903,6 +982,16 @@ __publicField(_MultiSelectField, "fieldTypeName", "Multi-select");
 __publicField(_MultiSelectField, "fieldTypeDescription", "Allows the user to select a multiple options from a list of options.");
 __publicField(_MultiSelectField, "Icon", CheckboxIcon);
 let MultiSelectField = _MultiSelectField;
+const FieldInputCloner = memo(function FieldInputCloner2({ field, ...props }) {
+  const [{ value: identifier }] = useField(field.options.clonedFieldIdentifier);
+  const deserializedField = useMemo(() => {
+    const options = field.options.getFieldToClone(identifier);
+    if (!options)
+      return null;
+    return deserialize(options);
+  }, [field.options, identifier]);
+  return useFieldInput(deserializedField, props);
+});
 class CustomField extends BaseField {
   constructor(options, Component) {
     super({ ...options, type: "custom" });
@@ -922,6 +1011,164 @@ class CustomField extends BaseField {
 }
 __publicField(CustomField, "fieldTypeName", "Custom");
 __publicField(CustomField, "fieldTypeDescription", "Allows re-rendering of field already in the form");
+class FieldInputClonerField extends CustomField {
+  constructor(options) {
+    super(options, FieldInputCloner);
+  }
+}
+const FieldSectionLayout = memo(function FieldSectionLayout2(props) {
+  const { field: section, ...rest } = props;
+  const { label, description: description2, fields, condition } = section;
+  const { values, setFieldValue } = useFormikContext();
+  const conditionValue = (condition == null ? void 0 : condition.identifier) ? get(values, condition.identifier) : void 0;
+  const conditionMet = useMemo(() => isConditionMet(condition, conditionValue), [condition, conditionValue]);
+  useEffect(() => {
+    if (!conditionMet) {
+      for (const childField of fields) {
+        setFieldValue(childField.getId(), "").then();
+      }
+    }
+  }, [conditionMet, fields, setFieldValue]);
+  const inputs = useFieldInputs(fields, rest);
+  if (!conditionMet) {
+    return null;
+  }
+  if (!label) {
+    return inputs;
+  }
+  return /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: "3", children: [
+    /* @__PURE__ */ jsxs(Flex, { direction: "column", children: [
+      /* @__PURE__ */ jsx(Heading, { as: "h3", size: "3", children: label }),
+      /* @__PURE__ */ jsx(Text, { className: styles$4.description, children: description2 })
+    ] }),
+    inputs
+  ] }) });
+});
+const _FieldSection = class _FieldSection extends BaseFormElement {
+  constructor(options) {
+    const { label = null, fields, condition = null, conditional, ...base } = options;
+    super({ ...base, type: "section" });
+    __publicField(this, "label");
+    __publicField(this, "fields");
+    __publicField(this, "condition");
+    this.fields = fields;
+    this.condition = condition;
+    this.label = label;
+    if (conditional === false) {
+      this.condition = null;
+    }
+  }
+  static getFieldCreationSchema(options) {
+    if (options.length === 0)
+      return [];
+    return [
+      new BooleanField({
+        label: "Conditional",
+        description: "Conditionally show or hide this section.",
+        identifier: "conditional",
+        required: false
+      }),
+      // Declare a section that will hold options for the condition (if any).
+      new _FieldSection({
+        label: "Conditional settings",
+        identifier: "conditional-settings",
+        // This section will only be rendered if the above "Conditional" field is checked.
+        condition: {
+          identifier: "conditional",
+          value: true
+        },
+        // These are the options of the condition.
+        fields: [
+          // Declare a select field that will be used to select the field against which we will check the
+          // condition. This must be selected before the next field is rendered.
+          new SelectField({
+            label: "Field",
+            description: "The field to use for the condition.",
+            // The options (for the field against which we will check the condition) are all the labels of
+            // the fields in the previous section(s) (or fields declared before with no section) that
+            // support conditions. We pass in both the label and the identifier of each supported field. The
+            // identifier becomes the value of the option.
+            options: options.map((option) => {
+              if (!option.label)
+                return null;
+              if (option.type === "upload")
+                return null;
+              return {
+                label: option.label,
+                value: option.identifier
+              };
+            }).filter((option) => !!option),
+            identifier: "condition.identifier",
+            required: true
+          }),
+          // Declare a custom field that will be used to input a value for the condition. The value of the
+          // conditional field selected in the previous step must be equal to the value the user inputs into
+          // this field for the section to be rendered.
+          new FieldInputClonerField({
+            label: "Value",
+            identifier: "condition.value",
+            required: true,
+            clonedFieldIdentifier: "condition.identifier",
+            getFieldToClone(identifier) {
+              if (!identifier) {
+                return null;
+              }
+              const option = options.find((option2) => option2.identifier === identifier);
+              if (!option) {
+                console.error("Could not find field with identifier", identifier);
+                return null;
+              }
+              return {
+                ...option,
+                // Override some options to make it make sense in the context and to make it work with the framework.
+                label: "Value",
+                identifier: "condition.value",
+                description: "The value to compare against.",
+                required: option.type !== "boolean"
+              };
+            }
+          })
+        ]
+      })
+    ];
+  }
+  static deserialize(data) {
+    var _a;
+    if (data.type !== "section")
+      throw new Error("Invalid type");
+    const fields = ((_a = data.fields) == null ? void 0 : _a.map(deserializeField)) ?? [];
+    return new _FieldSection({ ...data, fields });
+  }
+  conditional() {
+    return this.condition !== null;
+  }
+  serialize() {
+    return {
+      ...super._serialize(),
+      label: this.label,
+      condition: this.condition,
+      conditional: this.conditional(),
+      fields: this.fields.map((field) => field.serialize())
+    };
+  }
+  getErrors(allValues) {
+    const errors = {};
+    for (const field of this.fields) {
+      const id = field.getId();
+      const error = field.getError(get(allValues, id), allValues);
+      if (error) {
+        set(errors, field.getId(), error);
+      }
+    }
+    return errors;
+  }
+  getInput(props) {
+    return /* @__PURE__ */ jsx(FieldSectionLayout, { field: this, ...props });
+  }
+};
+__publicField(_FieldSection, "fieldTypeName", "Section");
+__publicField(_FieldSection, "fieldTypeDescription", "Sections can be useful for grouping fields together. They can also be conditionally shown or hidden.");
+let FieldSection = _FieldSection;
 const previewImage = "_previewImage_1ig84_1";
 const styles$2 = {
   previewImage
@@ -1177,253 +1424,6 @@ const FieldTypeToClsMapping = {
   "multi-string": MultiStringField,
   "multi-select": MultiSelectField
 };
-const linkOptions = { target: "_blank", rel: "noopener" };
-const StringInput = memo(function StringInput2(props) {
-  const [{ inputId, labelId, severity, helpText, label, fieldProps, field }, rest] = useFormikInput(props);
-  const color = useSeverityColor(severity);
-  console.log(inputId, label, fieldProps, field, rest);
-  return /* @__PURE__ */ jsx(InputWithLabelAndHelpText, { helpText, severity, children: /* @__PURE__ */ jsxs(InputWithLabel, { severity, inputId, labelId, label, children: [
-    /* @__PURE__ */ jsx(TextField$1.Input, { ...rest, ...fieldProps, type: field.inputType, id: inputId, color }),
-    /* @__PURE__ */ jsxs(TextField$1.Root, { className: styles$3.TextFieldRoot, children: [
-      /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: classNames(
-            "rt-TextFieldInput rt-r-size-2 rt-variant-surface",
-            styles$3.TextFieldInputCopy
-          ),
-          children: /* @__PURE__ */ jsx(Linkify, { options: linkOptions, children: fieldProps.value })
-        }
-      ),
-      /* @__PURE__ */ jsx("div", { className: "rt-TextFieldChrome" })
-    ] })
-  ] }) });
-});
-const _StringField = class _StringField extends StringOrTextField {
-  constructor(options) {
-    const { inputType = "text", ...rest } = options;
-    const maxLength = options.maxLength ? Math.min(500, options.maxLength) : 500;
-    const minLength = options.minLength ? Math.min(options.minLength, maxLength) : void 0;
-    super({ ...rest, maxLength, minLength, type: "string" });
-    __publicField(this, "inputType");
-    this.inputType = inputType;
-  }
-  serialize() {
-    return { ...super._serialize(), input_type: this.inputType };
-  }
-  static deserialize(data) {
-    if (data.type !== "string")
-      throw new Error("Type mismatch.");
-    const { maximum_length, minimum_length, input_type, ...rest } = data;
-    return new _StringField({ ...rest, maxLength: maximum_length, minLength: minimum_length, inputType: input_type });
-  }
-  getInput(props) {
-    return /* @__PURE__ */ jsx(StringInput, { field: this, ...props });
-  }
-};
-__publicField(_StringField, "fieldTypeName", "Short Text");
-__publicField(_StringField, "fieldTypeDescription", "Short text fields can hold up to 500 characters on a single line.");
-__publicField(_StringField, "Icon", InputIcon);
-let StringField = _StringField;
-const TextInput = memo(function TextInput2(props) {
-  const [{ inputId, labelId, severity, helpText, label, fieldProps }, rest] = useFormikInput(props);
-  return /* @__PURE__ */ jsx(InputWithLabelAndHelpText, { helpText, severity, children: /* @__PURE__ */ jsxs(InputWithLabel, { severity, inputId, labelId, label, children: [
-    /* @__PURE__ */ jsx(TextArea, { ...rest, ...fieldProps, resize: "vertical", id: inputId, severity }),
-    /* @__PURE__ */ jsx("div", { className: "rt-TextAreaInput", children: /* @__PURE__ */ jsx(Linkify, { options: linkOptions, children: fieldProps.value }) }),
-    /* @__PURE__ */ jsx("div", { className: "rt-TextAreaChrome" })
-  ] }) });
-});
-const _TextField = class _TextField extends StringOrTextField {
-  constructor(options) {
-    const maxLength = options.maxLength ? Math.min(5e3, options.maxLength) : 5e3;
-    const minLength = options.minLength ? Math.min(options.minLength, maxLength) : void 0;
-    super({ ...options, maxLength, minLength, type: "text" });
-  }
-  serialize() {
-    return super._serialize();
-  }
-  static deserialize(data) {
-    if (data.type !== "text")
-      throw new Error("Type mismatch.");
-    const { maximum_length, minimum_length, ...rest } = data;
-    return new _TextField({ ...rest, maxLength: maximum_length, minLength: minimum_length });
-  }
-  getInput(props) {
-    return /* @__PURE__ */ jsx(TextInput, { field: this, ...props });
-  }
-};
-__publicField(_TextField, "fieldTypeName", "Paragraph");
-__publicField(_TextField, "fieldTypeDescription", "Paragraph fields can hold up to 5000 characters and can have multiple lines.");
-__publicField(_TextField, "Icon", RowsIcon);
-let TextField = _TextField;
-const FieldInputCloner = memo(function FieldInputCloner2({ field, ...props }) {
-  const [{ value: identifier }] = useField(field.options.clonedFieldIdentifier);
-  const deserializedField = useMemo(() => {
-    const options = field.options.getFieldToClone(identifier);
-    if (!options)
-      return null;
-    return deserialize(options);
-  }, [field.options, identifier]);
-  return useFieldInput(deserializedField, props);
-});
-class FieldInputClonerField extends CustomField {
-  constructor(options) {
-    super(options, FieldInputCloner);
-  }
-}
-const FieldSectionLayout = memo(function FieldSectionLayout2(props) {
-  const { field: section, ...rest } = props;
-  const { label, description: description2, fields, condition } = section;
-  const { values, setFieldValue } = useFormikContext();
-  const conditionValue = (condition == null ? void 0 : condition.identifier) ? get(values, condition.identifier) : void 0;
-  const conditionMet = useMemo(() => isConditionMet(condition, conditionValue), [condition, conditionValue]);
-  useEffect(() => {
-    if (!conditionMet) {
-      for (const childField of fields) {
-        setFieldValue(childField.getId(), "").then();
-      }
-    }
-  }, [conditionMet, fields, setFieldValue]);
-  const inputs = useFieldInputs(fields, rest);
-  if (!conditionMet) {
-    return null;
-  }
-  if (!label) {
-    return inputs;
-  }
-  return /* @__PURE__ */ jsx(Card, { children: /* @__PURE__ */ jsxs(Flex, { direction: "column", gap: "3", children: [
-    /* @__PURE__ */ jsxs(Flex, { direction: "column", children: [
-      /* @__PURE__ */ jsx(Heading, { as: "h3", size: "3", children: label }),
-      /* @__PURE__ */ jsx(Text, { className: styles$4.description, children: description2 })
-    ] }),
-    inputs
-  ] }) });
-});
-const _FieldSection = class _FieldSection extends BaseFormElement {
-  constructor(options) {
-    const { label = null, fields, condition = null, conditional, ...base } = options;
-    super({ ...base, type: "section" });
-    __publicField(this, "label");
-    __publicField(this, "fields");
-    __publicField(this, "condition");
-    this.fields = fields;
-    this.condition = condition;
-    this.label = label;
-    if (conditional === false) {
-      this.condition = null;
-    }
-  }
-  static getFieldCreationSchema(options) {
-    if (options.length === 0)
-      return [];
-    return [
-      new BooleanField({
-        label: "Conditional",
-        description: "Conditionally show or hide this section.",
-        identifier: "conditional",
-        required: false
-      }),
-      // Declare a section that will hold options for the condition (if any).
-      new _FieldSection({
-        label: "Conditional settings",
-        identifier: "conditional-settings",
-        // This section will only be rendered if the above "Conditional" field is checked.
-        condition: {
-          identifier: "conditional",
-          value: true
-        },
-        // These are the options of the condition.
-        fields: [
-          // Declare a select field that will be used to select the field against which we will check the
-          // condition. This must be selected before the next field is rendered.
-          new SelectField({
-            label: "Field",
-            description: "The field to use for the condition.",
-            // The options (for the field against which we will check the condition) are all the labels of
-            // the fields in the previous section(s) (or fields declared before with no section) that
-            // support conditions. We pass in both the label and the identifier of each supported field. The
-            // identifier becomes the value of the option.
-            options: options.map((option) => {
-              if (!option.label)
-                return null;
-              if (option.type === "upload")
-                return null;
-              return {
-                label: option.label,
-                value: option.identifier
-              };
-            }).filter((option) => !!option),
-            identifier: "condition.identifier",
-            required: true
-          }),
-          // Declare a custom field that will be used to input a value for the condition. The value of the
-          // conditional field selected in the previous step must be equal to the value the user inputs into
-          // this field for the section to be rendered.
-          new FieldInputClonerField({
-            label: "Value",
-            identifier: "condition.value",
-            required: true,
-            clonedFieldIdentifier: "condition.identifier",
-            getFieldToClone(identifier) {
-              if (!identifier) {
-                return null;
-              }
-              const option = options.find((option2) => option2.identifier === identifier);
-              if (!option) {
-                console.error("Could not find field with identifier", identifier);
-                return null;
-              }
-              return {
-                ...option,
-                // Override some options to make it make sense in the context and to make it work with the framework.
-                label: "Value",
-                identifier: "condition.value",
-                description: "The value to compare against.",
-                required: option.type !== "boolean"
-              };
-            }
-          })
-        ]
-      })
-    ];
-  }
-  static deserialize(data) {
-    var _a;
-    if (data.type !== "section")
-      throw new Error("Invalid type");
-    const fields = ((_a = data.fields) == null ? void 0 : _a.map(deserializeField)) ?? [];
-    return new _FieldSection({ ...data, fields });
-  }
-  conditional() {
-    return this.condition !== null;
-  }
-  serialize() {
-    return {
-      ...super._serialize(),
-      label: this.label,
-      condition: this.condition,
-      conditional: this.conditional(),
-      fields: this.fields.map((field) => field.serialize())
-    };
-  }
-  getErrors(allValues) {
-    const errors = {};
-    for (const field of this.fields) {
-      const id = field.getId();
-      const error = field.getError(get(allValues, id), allValues);
-      if (error) {
-        set(errors, field.getId(), error);
-      }
-    }
-    return errors;
-  }
-  getInput(props) {
-    return /* @__PURE__ */ jsx(FieldSectionLayout, { field: this, ...props });
-  }
-};
-__publicField(_FieldSection, "fieldTypeName", "Section");
-__publicField(_FieldSection, "fieldTypeDescription", "Sections can be useful for grouping fields together. They can also be conditionally shown or hidden.");
-let FieldSection = _FieldSection;
 const deserializeField = (serializedField) => {
   const fieldType = serializedField.type;
   const fieldCls = FieldTypeToClsMapping[fieldType];