@vidispine/vdt-materialui 23.2.0-pre.2 → 23.2.0

package/dist/es/fieldgroup/Editor.js

@@ -0,0 +1,219 @@
+import { jsxs as i, jsx as l, Fragment as F } from "react/jsx-runtime";
+import { useState as r, useEffect as N } from "react";
+import { withStyles as _, Grid as c, Typography as ee, IconButton as A, FormControl as T, TextField as f, Select as O, MenuItem as W, InputLabel as le, Button as h, List as te, ListItem as ae, ListItemText as ne, ListItemSecondaryAction as ie, DialogActions as V, Dialog as oe, DialogTitle as de, DialogContent as ce, DialogContentText as re } from "@material-ui/core";
+import { Clear as se, Delete as pe } from "@material-ui/icons";
+const ue = {
+  root: {
+    "& > *": {
+      marginTop: "20px",
+      width: "100%"
+    }
+  },
+  rootNoMargin: {
+    "& > *": {
+      marginTop: "0px",
+      width: "100%",
+      lineHeight: "40px"
+    }
+  },
+  editorContainer: {
+    padding: "24px"
+  },
+  editorTitle: {
+    float: "left",
+    width: "90%"
+  },
+  closeEditor: {
+    float: "right",
+    padding: "4px"
+  },
+  deleteField: {
+    marginLeft: "8px"
+  }
+}, ye = [
+  { value: "date", label: "Date" },
+  { value: "float", label: "Float" },
+  { value: "integer", label: "Integer" },
+  { value: "long", label: "Long" },
+  { value: "string", label: "String" },
+  { value: "string-exact", label: "String Exact" },
+  { value: "boolean", label: "Boolean" },
+  { value: "timeCode", label: "Time-Code" }
+], $ = {
+  string: [
+    { value: "text", label: "Text" },
+    { value: "select", label: "Select" },
+    { value: "textArea", label: "Text area" }
+  ],
+  boolean: [
+    { value: "checkbox", label: "Checkbox" },
+    { value: "switch", label: "Switch" }
+  ]
+}, he = ["select"];
+function me({ classes: s, item: p, onClose: g, onDelete: j, onEdit: B, isNewItem: b, autoAdd: x = !1 }) {
+  const k = {
+    name: "",
+    data: [
+      { key: "displayType", value: "text" },
+      { key: "label", value: "" }
+    ],
+    type: "string",
+    values: { field: [] }
+  }, [a, o] = r(k), [H, D] = r(!1), [I, u] = r(""), [M, L] = r(a.name), [G, P] = r(a.type), [E, m] = r([]), [v, S] = r({ key: "", value: "" });
+  N(() => o(p), [p]);
+  const R = () => {
+    const e = { ...a };
+    e.data = [], a.type === "boolean" ? (e.data.push({ key: "displayType", value: "checkbox" }), u("checkbox")) : ["date", "timecode"].includes(a.type) ? (e.data.push({ key: "displayType", value: "datePicker" }), u("datePicker")) : (e.data.push({ key: "displayType", value: "text" }), e.data.push({ key: "label", value: "" }), u("text")), o(e);
+  };
+  N(() => {
+    if (typeof a.data > "u")
+      R();
+    else {
+      const { value: e } = a.data.find((n) => n.key === "label") || {}, { value: t } = a.data.find((n) => n.key === "displayType") || {};
+      L(e), u(t);
+    }
+    if (!b)
+      if (typeof a.values.field > "u") {
+        const e = { ...a };
+        e.values = { field: [] }, o(e);
+      } else
+        m(a.values.field);
+  }, [a]);
+  const U = (e) => {
+    const { value: t, name: n } = e.target, d = { [n]: t }, y = { ...a, ...d };
+    o(y);
+  }, q = (e) => {
+    const { value: t } = e.target;
+    P(t), m([]);
+    const n = { ...a };
+    n.type = t, o(n);
+  }, z = (e) => {
+    const { value: t } = e.target;
+    L(t);
+    const n = { ...a }, d = n.data.findIndex((y) => y.key === "label");
+    d > -1 ? n.data[d].value = t : n.data.push({ key: "label", value: t }), o(n);
+  }, J = (e) => {
+    const { value: t } = e.target;
+    u(t);
+    const n = { ...a }, d = n.data.findIndex((y) => y.key === "displayType");
+    d > -1 ? n.data[d].value = t : n.data.push({ key: "displayType", value: t }), o(n);
+  }, w = (e) => {
+    S({
+      ...v,
+      [e.target.name]: e.target.value
+    });
+  }, K = (e) => {
+    const t = { ...a };
+    typeof t.values.field > "u" && (t.values = { field: [] }), t.values.field.unshift(e), o(t), S({ key: "", value: "" }), m(t.values.field);
+  }, Q = (e) => {
+    const t = E, n = e;
+    t.splice(n, 1), m(t);
+    const d = { ...a };
+    d.values.field = t, o(d);
+  }, X = () => {
+    D(!0);
+  }, C = () => {
+    D(!1);
+  }, Y = () => {
+    B(p, a), g();
+  }, Z = () => {
+    o(k), C(), g(), j(p);
+  };
+  return /* @__PURE__ */ i("div", { className: s.editorContainer, children: [
+    /* @__PURE__ */ i(c, { container: !0, spacing: 2, children: [
+      /* @__PURE__ */ i(c, { item: !0, xs: 12, children: [
+        /* @__PURE__ */ l(ee, { variant: "h6", align: "center", className: s.editorTitle, children: `Editor - ${a.name}` }),
+        /* @__PURE__ */ l(A, { className: s.closeEditor, onClick: g, children: /* @__PURE__ */ l(se, {}) })
+      ] }),
+      /* @__PURE__ */ i(T, { className: s.root, autoComplete: "off", fullWidth: !0, children: [
+        b && /* @__PURE__ */ i(F, { children: [
+          /* @__PURE__ */ l(
+            f,
+            {
+              name: "name",
+              label: "Name",
+              value: a.name,
+              onChange: U,
+              disabled: !b
+            }
+          ),
+          /* @__PURE__ */ l(O, { name: "type", label: "Type", value: G, onChange: q, children: ye.map((e) => /* @__PURE__ */ l(W, { value: e.value, children: e.label }, e.value)) })
+        ] }),
+        /* @__PURE__ */ l(f, { name: "label", label: "Label", value: M, onChange: z })
+      ] }),
+      Object.keys($).includes(a.type) && /* @__PURE__ */ i(T, { className: s.rootNoMargin, autoComplete: "off", fullWidth: !0, children: [
+        /* @__PURE__ */ l(le, { id: "displayType", children: "Select display type" }),
+        /* @__PURE__ */ l(O, { labelId: "displayType", value: I, onChange: J, children: $[a.type].map((e) => /* @__PURE__ */ l(W, { value: e.value, children: e.label }, e.value)) })
+      ] }),
+      he.includes(I) && /* @__PURE__ */ i(F, { children: [
+        /* @__PURE__ */ l(T, { className: s.root, autoComplete: "off", fullWidth: !0, children: /* @__PURE__ */ i(c, { container: !0, spacing: 2, children: [
+          /* @__PURE__ */ l(c, { item: !0, xs: x ? 6 : 5, children: /* @__PURE__ */ l(
+            f,
+            {
+              name: "key",
+              label: "Add option label",
+              value: v.key,
+              onChange: w,
+              fullWidth: !0
+            }
+          ) }),
+          /* @__PURE__ */ l(c, { item: !0, xs: x ? 6 : 5, children: /* @__PURE__ */ l(
+            f,
+            {
+              id: "optionValue",
+              name: "value",
+              label: "Add option value",
+              value: v.value,
+              onChange: w,
+              fullWidth: !0
+            }
+          ) }),
+          !x && /* @__PURE__ */ l(c, { item: !0, xs: 2, style: { display: "flex", alignItems: "center" }, children: /* @__PURE__ */ l(
+            h,
+            {
+              onClick: () => K(v),
+              variant: "outlined",
+              color: "primary",
+              children: "Add option"
+            }
+          ) })
+        ] }) }),
+        /* @__PURE__ */ l(c, { container: !0, spacing: 2, children: /* @__PURE__ */ l(c, { item: !0, xs: 12, children: /* @__PURE__ */ l(te, { children: E.map((e, t) => /* @__PURE__ */ i(ae, { children: [
+          /* @__PURE__ */ l(
+            ne,
+            {
+              primary: `Label:${e.key}`,
+              secondary: `Value:${e.value}`
+            }
+          ),
+          /* @__PURE__ */ l(ie, { children: /* @__PURE__ */ l(
+            A,
+            {
+              edge: "end",
+              "aria-label": "delete",
+              onClick: () => Q(t),
+              children: /* @__PURE__ */ l(pe, {})
+            }
+          ) })
+        ] }, e.key)) }) }) })
+      ] }),
+      /* @__PURE__ */ l(c, { container: !0, spacing: 2, children: /* @__PURE__ */ l(c, { item: !0, xs: 12, children: /* @__PURE__ */ i(V, { children: [
+        /* @__PURE__ */ l(h, { onClick: X, color: "secondary", children: "Delete" }),
+        !1,
+        /* @__PURE__ */ l(h, { onClick: Y, variant: "contained", color: "primary", children: "Update" })
+      ] }) }) })
+    ] }),
+    /* @__PURE__ */ i(oe, { open: H, onClose: C, children: [
+      /* @__PURE__ */ l(de, { id: "alert-dialog-title", children: "Delete Field?" }),
+      /* @__PURE__ */ l(ce, { children: /* @__PURE__ */ l(re, { children: `Are you sure that you want to delete ${p.name}` }) }),
+      /* @__PURE__ */ i(V, { children: [
+        /* @__PURE__ */ l(h, { onClick: C, color: "primary", children: "Cancel" }),
+        /* @__PURE__ */ l(h, { variant: "contained", onClick: Z, color: "secondary", children: "Delete" })
+      ] })
+    ] })
+  ] });
+}
+const xe = _(ue, { name: "VdtFieldGroupEditor" })(me);
+export {
+  xe as default
+};

package/dist/es/fieldgroup/FieldGroupDesigner.js

@@ -0,0 +1,480 @@
+import { jsxs as a, Fragment as Ve, jsx as t } from "react/jsx-runtime";
+import { useState as d, useEffect as R } from "react";
+import { DragDropContext as _e } from "react-beautiful-dnd";
+import { withStyles as Pe, Grid as p, Typography as le, IconButton as je, Button as h, Dialog as b, DialogTitle as L, DialogContent as v, TextField as Y, DialogActions as y, DialogContentText as Be, List as Re, ListItem as Ye, ListItemText as qe } from "@material-ui/core";
+import { Edit as ze } from "@material-ui/icons";
+import { createFilterOptions as Ke, Autocomplete as oe } from "@material-ui/lab";
+import { fieldgroup as q, metadatafield as He, utils as Je } from "@vidispine/vdt-api";
+import Qe from "./Editor.js";
+import Xe from "./MyFieldList.js";
+const { vFetch: Ze, isRequired: de } = Je;
+function Te({
+  groupName: s = de(),
+  orderedFieldIds: l = de(),
+  ...$
+}) {
+  const o = `/API/metadata-field/field-group/${s}/metadata/order`;
+  return Ze({
+    path: o,
+    method: "PUT",
+    headers: {
+      contentType: "text/plain",
+      accept: "text/plain"
+    },
+    body: l.join(","),
+    ...$
+  });
+}
+const re = Ke();
+function et() {
+  return ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(
+    /[018]/g,
+    (s) => (
+      // eslint-disable-next-line
+      (s ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> s / 4).toString(16)
+    )
+  );
+}
+const tt = {
+  data: {
+    display: "flex",
+    width: "100%"
+  },
+  margin: {
+    margin: 20
+  },
+  button: {
+    width: "100%"
+  },
+  addNewField: {
+    float: "right"
+  },
+  title: {
+    "&:hover": {
+      cursor: "pointer"
+    }
+  }
+}, u = "MY_FIELDS", it = {
+  [u]: []
+};
+function nt({
+  classes: s,
+  groupName: l,
+  groups: $,
+  metadataFieldGroupType: o = {},
+  onSuccess: g,
+  onError: m,
+  onChangeGroup: ae,
+  isLoading: se
+}) {
+  const [c, I] = d(it), [D, A] = d(), [ce, G] = d(!1), [W, O] = d(), [z, S] = d(null), [he, ue] = d([]), [fe, me] = d([]), [pe, K] = d(!1), [ge, H] = d(!1), [De, J] = d(!1), [xe, Q] = d(!1), [Ce, X] = d(!1), [we, Z] = d(!1), T = () => {
+    J(!0);
+  }, N = () => {
+    J(!1);
+  }, Ie = () => {
+    Z(!0);
+  }, U = () => {
+    Z(!1);
+  }, Fe = () => {
+    K(!0);
+  }, M = () => {
+    K(!1);
+  }, be = () => {
+    H(!0);
+  }, V = () => {
+    H(!1);
+  }, ve = () => {
+    Q(!0);
+  }, _ = () => {
+    Q(!1);
+  }, ye = () => {
+    X(!0);
+  }, P = () => {
+    X(!1);
+  }, Ee = (e) => {
+    O(e.target.value);
+  };
+  R(() => {
+    if (!l)
+      return;
+    const { field: e = [] } = o;
+    if (o) {
+      if (typeof o.data > "u")
+        O(l);
+      else {
+        const i = o.data.findIndex((n) => n.key === "label");
+        i > -1 && O(o.data[i].value);
+      }
+      if (o.data) {
+        const i = o.data.find((n) => n.key === "order");
+        if (i) {
+          const n = i.value.split(",");
+          e.sort((r, f) => n.indexOf(r.name) - n.indexOf(f.name));
+        }
+      }
+      o.group && me(o.group), e && I({ [u]: e });
+    }
+  }, [l, o]);
+  const E = () => {
+    l && q.updateFieldGroup({
+      groupName: l,
+      metadataFieldGroupDocument: {
+        ...o,
+        field: [...c[u]],
+        data: [{ key: "label", value: W }]
+      }
+    }).then((e) => {
+      e.ok && g && g({
+        message: `${l} has been saved`
+      });
+    }).catch((e) => {
+      if (m)
+        m({
+          error: e,
+          message: `Error saving ${l}`
+        });
+      else
+        throw new Error(e);
+    });
+  };
+  R(() => {
+    ce && E();
+  }, [c]);
+  const ke = () => {
+    const e = {
+      data: [
+        { key: "displayType", value: "text" },
+        { key: "label", value: "" }
+      ],
+      type: "string",
+      values: { field: [] }
+    }, i = [...c[u]], n = { ...c }, [r] = et().split("-"), [f] = l.split("_"), [x] = [`${f}_meta${r}`], w = { ...e, name: x };
+    i.splice(0, 0, w), n[u] = i, I(n), A(x), T();
+  }, Le = (e) => {
+    if (!o || !e)
+      return !0;
+    const { name: i } = e, { field: n = [] } = o;
+    return n.findIndex(({ name: f }) => f === i) === -1;
+  }, $e = ({ source: e, destination: i }) => {
+    if (!i)
+      return;
+    const { droppableId: n, index: r } = e, { droppableId: f, index: x } = i, w = [...c[f]], F = { ...c };
+    if (n === f) {
+      const [C] = w.splice(r, 1);
+      w.splice(x, 0, C), F[f] = w;
+    }
+    I(F);
+    const B = F[u].map((C) => C.name);
+    Te({
+      groupName: l,
+      orderedFieldIds: B
+    }).then((C) => {
+      C.ok && g && g({
+        message: `${l} has been saved`
+      });
+    }).catch((C) => {
+      if (m)
+        m({
+          message: `Error saving ${l}`,
+          error: C
+        });
+      else
+        throw new Error(C);
+    });
+  }, Ae = (e) => (i, n) => {
+    const { name: r } = i, { name: f } = n, x = [...c[e]], w = x.findIndex(({ name: B }) => B === r);
+    x.splice(w, 1, n);
+    const F = { ...c };
+    F[e] = x, I(F), G(!0), A(f);
+  }, ee = c[u], [te, Ge] = d({});
+  R(() => {
+    Ge(ee.find(({ name: e }) => e === D));
+  }, [D]);
+  const j = () => {
+    const e = [...c[u]], i = e.findIndex((r) => r.name === D);
+    e.splice(i, 1);
+    const n = { ...c };
+    n[u] = e, o && q.removeFieldGroupField({ groupName: l, fieldName: D }).then((r) => {
+      r.ok && g && g({
+        message: `${D} has been deleted`
+      });
+    }).catch((r) => {
+      if (m)
+        m({
+          message: `Error deleting ${D}`,
+          error: r
+        });
+      else
+        throw new Error(r);
+    }), I(n), G(!0);
+  }, We = () => {
+    He.listMetadataField().then((e) => {
+      ue(e.data.field);
+    });
+  };
+  function Oe() {
+    const e = [...c[u]], i = { ...c };
+    e.splice(0, 0, z), i[u] = e, I(i), G(!0);
+  }
+  const [k, Se] = d("");
+  function ie(e) {
+    Se(e);
+  }
+  const [Ne, ne] = d(null), Ue = () => {
+    try {
+      q.updateFieldGroupChild({ groupName: l, childGroupName: k }).then((e) => {
+        e.ok && g && g({
+          message: `${k} has been added to ${l}`
+        });
+      }).catch((e) => {
+        if (m)
+          m({
+            message: `Error adding ${k}to ${l}`,
+            error: e
+          });
+        else
+          throw new Error(e);
+      });
+    } catch (e) {
+      if (m)
+        m({
+          message: `Error adding ${k}to ${l}`,
+          error: e
+        });
+      else
+        throw new Error(e);
+    }
+  }, Me = (e) => {
+    e.stopPropagation(), Fe();
+  };
+  return /* @__PURE__ */ a(Ve, { children: [
+    !se && /* @__PURE__ */ a(p, { container: !0, spacing: 2, children: [
+      /* @__PURE__ */ t(p, { item: !0, xs: 8, children: /* @__PURE__ */ a(le, { variant: "h5", className: s.title, children: [
+        `Field-group: ${W}`,
+        /* @__PURE__ */ t(je, { "aria-label": "edit label", onClick: Me, children: /* @__PURE__ */ t(ze, { fontSize: "small" }) })
+      ] }) }),
+      /* @__PURE__ */ a(p, { item: !0, xs: 4, children: [
+        /* @__PURE__ */ t(
+          h,
+          {
+            variant: "contained",
+            color: "default",
+            style: { marginLeft: "10px" },
+            className: s.addNewField,
+            onClick: ye,
+            children: "Child groups"
+          }
+        ),
+        /* @__PURE__ */ t(
+          h,
+          {
+            variant: "contained",
+            color: "primary",
+            onClick: ke,
+            style: { marginLeft: "10px" },
+            className: s.addNewField,
+            children: "Add new field"
+          }
+        ),
+        /* @__PURE__ */ t(
+          h,
+          {
+            variant: "outlined",
+            color: "default",
+            onClick: () => {
+              be(), We();
+            },
+            className: s.addNewField,
+            children: "Add existing field"
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ t(_e, { onDragEnd: $e, children: /* @__PURE__ */ t(p, { container: !0, spacing: 2, children: /* @__PURE__ */ t("div", { className: s.data, children: /* @__PURE__ */ t(p, { item: !0, xs: 12, className: s.margin, children: /* @__PURE__ */ t(
+      Xe,
+      {
+        items: ee,
+        setSelectedItem: A,
+        selectedItem: D,
+        droppableId: u,
+        openEditor: T,
+        closeEditor: N,
+        onDelete: j,
+        onUpdateGroup: E,
+        openDeleteDialog: ve
+      }
+    ) }) }) }) }),
+    /* @__PURE__ */ t(b, { onClose: N, open: De, maxWidth: "md", fullWidth: !0, children: /* @__PURE__ */ t(
+      Qe,
+      {
+        item: te,
+        isNewItem: Le(te),
+        onClose: N,
+        onEdit: Ae(u),
+        onDelete: j,
+        onUpdateGroup: E
+      }
+    ) }),
+    /* @__PURE__ */ a(b, { onClose: M, open: pe, maxWidth: "sm", fullWidth: !0, children: [
+      /* @__PURE__ */ t(L, { children: "Edit group label" }),
+      /* @__PURE__ */ t(v, { children: /* @__PURE__ */ t(
+        Y,
+        {
+          name: "label",
+          label: "Label",
+          value: W,
+          onChange: Ee,
+          fullWidth: !0
+        }
+      ) }),
+      /* @__PURE__ */ a(y, { children: [
+        /* @__PURE__ */ t(h, { onClick: M, color: "primary", children: "Cancel" }),
+        /* @__PURE__ */ t(
+          h,
+          {
+            onClick: () => {
+              E(), M();
+            },
+            color: "primary",
+            autoFocus: !0,
+            children: "Save"
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ a(
+      b,
+      {
+        onClose: V,
+        open: ge,
+        maxWidth: "sm",
+        fullWidth: !0,
+        children: [
+          /* @__PURE__ */ t(L, { children: "Choose existing field to add" }),
+          /* @__PURE__ */ t(v, { children: /* @__PURE__ */ t(
+            oe,
+            {
+              options: he,
+              value: z,
+              onChange: (e, i) => {
+                if (i && i.inputValue) {
+                  S({
+                    name: i.inputValue
+                  });
+                  return;
+                }
+                S(i);
+              },
+              filterOptions: (e, i) => re(e, i),
+              getOptionLabel: (e) => typeof e == "string" ? e : e.inputValue ? (S(e), e.inputValue) : e.name,
+              renderOption: (e) => e.name,
+              renderInput: (e) => /* @__PURE__ */ t(Y, { ...e, label: "Select field", variant: "outlined" })
+            }
+          ) }),
+          /* @__PURE__ */ a(y, { children: [
+            /* @__PURE__ */ t(h, { onClick: V, color: "primary", children: "Cancel" }),
+            /* @__PURE__ */ t(
+              h,
+              {
+                onClick: () => {
+                  V(), Oe();
+                },
+                color: "primary",
+                autoFocus: !0,
+                children: "Add"
+              }
+            )
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ a(b, { open: xe, onClose: _, maxWidth: "sm", fullWidth: !0, children: [
+      /* @__PURE__ */ t(L, { children: "Delete Field?" }),
+      /* @__PURE__ */ t(v, { children: /* @__PURE__ */ t(Be, { children: `Are you sure that you want to delete ${D}` }) }),
+      /* @__PURE__ */ a(y, { children: [
+        /* @__PURE__ */ t(h, { onClick: _, color: "primary", children: "Cancel" }),
+        /* @__PURE__ */ t(
+          h,
+          {
+            variant: "contained",
+            onClick: () => {
+              _(), j();
+            },
+            color: "secondary",
+            children: "Delete"
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ a(b, { onClose: P, open: Ce, maxWidth: "sm", fullWidth: !0, children: [
+      /* @__PURE__ */ t(v, { children: /* @__PURE__ */ a(p, { container: !0, spacing: 2, children: [
+        /* @__PURE__ */ t(p, { item: !0, xs: 8, children: /* @__PURE__ */ t(le, { variant: "h5", className: s.title, children: "Child groups" }) }),
+        /* @__PURE__ */ t(p, { item: !0, xs: 4, children: /* @__PURE__ */ t(
+          h,
+          {
+            variant: "contained",
+            color: "primary",
+            style: { marginLeft: "10px" },
+            className: s.addNewField,
+            onClick: Ie,
+            children: "Add Child Group"
+          }
+        ) }),
+        /* @__PURE__ */ t(p, { item: !0, xs: 12, children: /* @__PURE__ */ t(Re, { children: fe.map(({ name: e }) => /* @__PURE__ */ t(
+          Ye,
+          {
+            button: !0,
+            onClick: () => {
+              ae(e), P();
+            },
+            children: /* @__PURE__ */ t(qe, { primary: e })
+          },
+          e
+        )) }) })
+      ] }) }),
+      /* @__PURE__ */ t(y, { children: /* @__PURE__ */ t(h, { onClick: P, color: "primary", children: "Close" }) })
+    ] }),
+    /* @__PURE__ */ a(b, { onClose: U, open: we, maxWidth: "sm", fullWidth: !0, children: [
+      /* @__PURE__ */ t(L, { children: "Choose child group to add" }),
+      /* @__PURE__ */ t(v, { children: /* @__PURE__ */ t(
+        oe,
+        {
+          options: $,
+          value: Ne,
+          onChange: (e, i) => {
+            if (i && i.inputValue) {
+              ne({
+                name: i.inputValue
+              });
+              return;
+            }
+            ne(i), i && ie(i.name);
+          },
+          filterOptions: (e, i) => re(e, i),
+          getOptionLabel: (e) => typeof e == "string" ? e : e.inputValue ? (ie(e.inputValue), e.inputValue) : e.name,
+          renderOption: (e) => e.name,
+          renderInput: (e) => /* @__PURE__ */ t(Y, { ...e, label: "Select group", variant: "outlined" })
+        }
+      ) }),
+      /* @__PURE__ */ a(y, { children: [
+        /* @__PURE__ */ t(h, { onClick: U, color: "primary", children: "Cancel" }),
+        /* @__PURE__ */ t(
+          h,
+          {
+            onClick: () => {
+              U(), Ue();
+            },
+            color: "primary",
+            autoFocus: !0,
+            children: "Add"
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+const ft = Pe(tt, { name: "VdtFieldGroupDesigner" })(nt);
+export {
+  ft as default,
+  Te as updateGroupFieldOrder
+};