@hybridcore/ui 1.6.0 → 1.6.2

package/dist/components/property-mapping/index.js

@@ -1,176 +1,28 @@
-import { jsxs as f, jsx as i, Fragment as T } from "react/jsx-runtime";
-import { CloseOutlined as le, ChevronRight as ie, ErrorOutline as ne, Check as oe, Refresh as ae } from "@mui/icons-material";
-import { Dialog as de, DialogTitle as pe, Box as m, Typography as b, TextField as R, IconButton as J, DialogContent as se, DialogActions as ce, Button as W, FormControl as V, Select as _, MenuItem as k } from "@mui/material";
-import { DataGrid as fe } from "@mui/x-data-grid";
-import { useState as G, useEffect as ue } from "react";
-import h from "lodash";
-import { d as ye } from "../../ol-yOE-NV0X.js";
-import { V as he } from "../../index-CcdvNlgr.js";
-import { RangeSelector as me } from "../range-selector/index.js";
-const $e = ({
-  open: F,
-  data: H,
-  objectTemplate: P,
-  agent: a,
-  enableValueInput: S,
-  loading: B,
-  agentTemplates: K,
-  catalogueInstances: v,
-  objectInstance: I,
-  disableCatalogueSource: U,
-  disableObjectSource: q,
-  scenario: M,
-  mapboxAccessToken: E,
-  onSubmit: g,
-  onClose: O
-}) => {
-  const [$, j] = G(H), [L, N] = G(/* @__PURE__ */ new Map());
-  ue(() => (N(/* @__PURE__ */ new Map()), () => {
-  }), [F]);
-  const Q = () => {
-    a ? g(a, !0) : g($);
-  }, D = (n) => {
-    const { name: d, value: p } = n.target;
-    let o = p;
-    d === "criticalityScore" && (o = o.replace(",", "."), o = o.replace(/[^\d.-]+/g, "")), X(d)(o);
-  }, X = (n) => (d) => {
-    a && g({ ...a, [n]: d });
-  }, A = (n, d, p, o) => (r) => {
-    if (a) {
-      let t = [...a.propertyInfoMap];
-      const e = t.findIndex(
-        (l) => l.policyKey === n && l.key === d
-      );
-      if (t[e]) {
-        let l = r.value;
-        t.splice(e, 1, {
-          ...t[e],
-          value: l,
-          source: p ? p || "" : t[e].source,
-          sourceField: o !== void 0 ? o || "" : t[e].sourceField
-        }), g && g({ ...a, propertyInfoMap: t });
-      }
-    }
-  }, Y = (n) => () => {
-    const { policyKey: d, key: p, source: o, sourceField: r } = n;
-    let t = "";
-    if (o === "OBJECT")
-      t = h.get(
-        I,
-        `variables.${n.dataType.type}.${r}`
-      );
-    else if (o) {
-      const e = parseInt(String(o)), l = v == null ? void 0 : v.find((u) => u.id === e);
-      l ? t = h.get(
-        l.variables,
-        `${n.dataType.type}.${r}`
-      ) : console.log(
-        "Catalogue instance could not be found!",
-        o,
-        v
-      );
-    }
-    t && (A(d, p)({ value: t }), N((e) => {
-      const l = new Map(e);
-      return l.set(
-        `${h.get(a, "referenceObjectInstanceId")}:${d}:${p}`,
-        "Updated"
-      ), l;
-    }), setTimeout(() => {
-      N((e) => {
-        const l = new Map(e);
-        return l.set(
-          `${h.get(
-            a,
-            "referenceObjectInstanceId"
-          )}:${d}:${p}`,
-          "Default"
-        ), l;
-      });
-    }, 2e3));
-  }, Z = (n, d) => (p) => {
-    if (a) {
-      let o = [...a.propertyInfoMap];
-      const r = o.findIndex(
-        (t) => t.policyKey === n && t.key === d
-      );
-      o[r] && (o.splice(r, 1, {
-        ...o[r],
-        randomInfo: p
-      }), g && g({ ...a, propertyInfoMap: o }));
-    }
-  }, ee = (n) => (d) => {
-    const p = d.target.name;
-    let o = [...$];
-    const r = o[n], t = r.propertyMappings.findIndex(
-      (l) => l.key === p
-    ), e = r.propertyMappings[t];
-    h.set(
-      o,
-      `${n}.propertyMappings.${t}.source`,
-      d.target.value
-    ), h.set(
-      o,
-      `${n}.propertyMappings.${t}.sourceField`,
-      ""
-    ), j(o), a && A(
-      r.key,
-      e.key,
-      String(d.target.value),
-      ""
-    )({ value: "" });
-  }, re = (n) => (d) => {
-    const p = d.target.name;
-    let o = [...$];
-    const r = o[n], t = r.propertyMappings.findIndex(
-      (l) => l.key === p
-    ), e = r.propertyMappings[t];
-    if (h.set(
-      o,
-      `${n}.propertyMappings.${t}.sourceField`,
-      d.target.value
-    ), j(o), S && a) {
-      const l = h.get(
-        o,
-        `${n}.propertyMappings.${t}.source`
-      );
-      if (l === "OBJECT") {
-        if (I) {
-          const u = h.get(
-            I.variables,
-            `${e.dataType.type}.${d.target.value}`
-          ) || "";
-          A(
-            r.key,
-            e.key,
-            void 0,
-            d.target.value
-          )({ value: u });
-        }
-      } else if (l !== "STATIC") {
-        if (l !== "RANDOM") {
-          if (l !== "SMART_RANDOM") {
-            const u = v == null ? void 0 : v.find(
-              (y) => y.id === Number(l)
-            );
-            if (u) {
-              const y = h.get(
-                u.variables,
-                `${e.dataType.type}.${d.target.value}`
-              ) || "";
-              A(
-                r.key,
-                e.key,
-                void 0,
-                d.target.value
-              )({ value: y });
-            }
-          }
-        }
-      }
-    }
-  }, te = (n, d) => {
-    let p = {
+import { jsxs as a, jsx as e, Fragment as m } from "react/jsx-runtime";
+import { CloseOutlined as W, ChevronRight as $, ErrorOutline as q, Refresh as J, Check as U } from "@mui/icons-material";
+import { Button as N, IconButton as _, FormControl as O, Select as D, MenuItem as C, Typography as H } from "@mui/material";
+import F from "lodash";
+import { V as G } from "../../index-BtlzPygz.js";
+import { d as L } from "../../ol-yOE-NV0X.js";
+import { RangeSelector as Q } from "../range-selector/index.js";
+import { usePropertyMappingLogic as X } from "./logic.js";
+import { PropertyMappingRoot as Y, PropertyMappingTitle as Z, PropertyMappingTitleContent as ee, PropertyMappingTitleHeading as te, PropertyMappingTitleSubtitle as re, PropertyMappingTitleAgentForm as ne, PropertyMappingTitleAgentFields as le, PropertyMappingTitleAgentNameInput as ae, PropertyMappingTitleAgentDescriptionInput as ie, PropertyMappingTitleAgentMetaRow as oe, PropertyMappingTitleAgentCountInput as pe, PropertyMappingTitleAgentCriticalityInput as de, PropertyMappingTitleClose as ce, PropertyMappingTitleCloseButton as ue, PropertyMappingContent as se, PropertyMappingPolicyCard as ye, PropertyMappingPolicyCardHeader as he, PropertyMappingPolicyCardCatalogueNames as ge, PropertyMappingPolicyCardArrow as fe, PropertyMappingPolicyCardPolicyName as me, PropertyMappingDataGrid as Ce, PropertyMappingActions as Me, PropertyMappingValueErrorIcon as Te, PropertyMappingValueCell as be, PropertyMappingValueCellInner as ve, PropertyMappingNameCell as Pe, PropertyMappingRequiredAsterisk as Ie, PropertyMappingDataTypeCell as Ae, PropertyMappingValueUpdatedIcon as Se } from "./styled.js";
+const Be = (A) => {
+  const {
+    open: V,
+    objectTemplate: j,
+    agent: i,
+    enableValueInput: b,
+    loading: S,
+    agentTemplates: x,
+    catalogueInstances: P,
+    scenario: y,
+    mapboxAccessToken: R,
+    disableCatalogueSource: B,
+    disableObjectSource: E,
+    onClose: I
+  } = A, { refs: z, state: v, actions: c } = X(A), K = (p, M) => {
+    const T = {
       field: "value",
       headerName: "Value",
       sortable: !1,
@@ -178,95 +30,84 @@ const $e = ({
       disableColumnMenu: !0,
       flex: 2.5,
       renderCell: (r) => {
-        var x, w;
-        const { key: t, dataType: e } = r.row;
-        let l = "", u = /* @__PURE__ */ i(T, {}), y = /* @__PURE__ */ i(T, {}), c = r.row.source;
-        if (S && a) {
-          const s = a.propertyInfoMap.find(
-            (C) => C.key === t && C.policyKey === n.key
+        var u, g;
+        const { key: o, dataType: t } = r.row;
+        let d = "", f = /* @__PURE__ */ e(m, {}), h = /* @__PURE__ */ e(m, {}), l = r.row.source;
+        if (b && i) {
+          const n = i.propertyInfoMap.find(
+            (s) => s.key === o && s.policyKey === p.key
           );
-          if (s) {
-            const { valid: C, validationErrors: z } = s;
-            l = s.value, c = s.source, C === !1 && (u = /* @__PURE__ */ i(
-              ne,
+          if (n) {
+            const { valid: s, validationErrors: w } = n;
+            d = n.value, l = n.source, s === !1 && (f = /* @__PURE__ */ e(Te, { children: /* @__PURE__ */ e(
+              q,
               {
                 color: "error",
                 fontSize: "small",
-                sx: { ml: 1 },
-                titleAccess: z ? z.join(", ") : "Value is not valid!"
+                titleAccess: w ? w.join(", ") : "Value is not valid!"
               }
-            )), c && (L.get(
-              `${h.get(a, "referenceObjectInstanceId")}:${s.policyKey}:${s.key}`
-            ) === "Updated" ? y = /* @__PURE__ */ i(oe, { color: "success", sx: { mr: 1 }, titleAccess: "Updated" }) : y = /* @__PURE__ */ i(
-              J,
+            ) })), l && (v.valueRefreshStatus.get(
+              `${F.get(i, "referenceObjectInstanceId")}:${n.policyKey}:${n.key}`
+            ) === "Updated" ? h = /* @__PURE__ */ e(Se, { children: /* @__PURE__ */ e(U, { color: "success", titleAccess: "Updated" }) }) : h = /* @__PURE__ */ e(
+              _,
               {
-                onClick: Y(s),
-                title: `Reload value from the ${c === "OBJECT" ? "Object" : "Catalogue"}`,
-                children: /* @__PURE__ */ i(ae, {})
+                onClick: c.handleValueRefresh(n),
+                title: `Reload value from the ${l === "OBJECT" ? "Object" : "Catalogue"}`,
+                children: /* @__PURE__ */ e(J, {})
               }
             ));
           }
-          if (c === "STATIC") {
-            const C = (x = M == null ? void 0 : M.environment.context) != null && x.boundingBox ? ye(M.environment.context.boundingBox) : void 0;
-            return /* @__PURE__ */ f(T, { children: [
-              /* @__PURE__ */ i(
-                he,
+          if (l === "STATIC") {
+            const s = (u = y == null ? void 0 : y.environment.context) != null && u.boundingBox ? L(y.environment.context.boundingBox) : void 0;
+            return /* @__PURE__ */ a(m, { children: [
+              /* @__PURE__ */ e(
+                G,
                 {
-                  mapboxAccessToken: E,
+                  mapboxAccessToken: R,
                   property: {
                     propertyId: "value",
-                    type: e.type,
+                    type: t.type,
                     editable: !0,
                     dataTypeInfo: {
-                      innerType: e.innerType
+                      innerType: t.innerType
                     }
                   },
                   variant: "outlined",
-                  value: l,
+                  value: d,
                   size: "small",
-                  defaultExtent: C,
-                  onChange: A(n.key, t)
+                  defaultExtent: s,
+                  onChange: c.handleValueChange(p.key, o)
                 }
               ),
-              u
+              f
             ] });
           }
-          if (c === "RANDOM" || c === "SMART_RANDOM")
-            return /* @__PURE__ */ f(T, { children: [
-              /* @__PURE__ */ i(
-                me,
+          if (l === "RANDOM" || l === "SMART_RANDOM")
+            return /* @__PURE__ */ a(m, { children: [
+              /* @__PURE__ */ e(
+                Q,
                 {
-                  type: e.type,
-                  value: s == null ? void 0 : s.randomInfo,
-                  innerType: (w = e.innerType) == null ? void 0 : w.type,
-                  minDate: M ? M.startTime : "",
-                  maxDate: M ? M.endTime : "",
-                  mapboxAccessToken: E,
-                  onChange: Z(n.key, t)
+                  type: t.type,
+                  value: n == null ? void 0 : n.randomInfo,
+                  innerType: (g = t.innerType) == null ? void 0 : g.type,
+                  minDate: y ? y.startTime : "",
+                  maxDate: y ? y.endTime : "",
+                  mapboxAccessToken: R,
+                  onChange: c.handleRandomInfoChange(p.key, o)
                 }
               ),
-              u
+              f
             ] });
         }
-        return h.isArray(l) && (l = l.join(", ")), /* @__PURE__ */ f(
-          m,
-          {
-            display: "flex",
-            justifyContent: "space-between",
-            alignItems: "center",
-            width: "100%",
-            children: [
-              /* @__PURE__ */ f(m, { flex: 1, children: [
-                l,
-                u
-              ] }),
-              y
-            ]
-          }
-        );
+        return F.isArray(d) && (d = d.join(", ")), /* @__PURE__ */ a(be, { children: [
+          /* @__PURE__ */ a(ve, { children: [
+            d,
+            f
+          ] }),
+          h
+        ] });
       }
-    };
-    const o = [
+    }, k = [
       {
         field: "name",
         headerName: "Policy Field",
@@ -274,22 +115,10 @@ const $e = ({
         filterable: !1,
         disableColumnMenu: !0,
         flex: 1,
-        renderCell: (r) => /* @__PURE__ */ f(
-          m,
-          {
-            sx: {
-              overflow: "hidden",
-              whiteSpace: "nowrap",
-              textOverflow: "ellipsis",
-              width: "100%"
-            },
-            title: r.row.name || r.row.key,
-            children: [
-              r.row.name || r.row.key,
-              r.row.required ? /* @__PURE__ */ i(b, { color: "red", ml: 1, title: "Required", display: "inline", children: "*" }) : null
-            ]
-          }
-        )
+        renderCell: (r) => /* @__PURE__ */ a(Pe, { title: r.row.name || r.row.key, children: [
+          r.row.name || r.row.key,
+          r.row.required ? /* @__PURE__ */ e(Ie, { title: "Required", children: "*" }) : null
+        ] })
       },
       {
         field: "description",
@@ -307,21 +136,9 @@ const $e = ({
         disableColumnMenu: !0,
         flex: 1,
         renderCell: (r) => {
-          const { dataType: t } = r.row;
-          let e = t.type;
-          return t.type === "composite-list" && (e += ` <${t.innerType.type}>`), /* @__PURE__ */ i(
-            m,
-            {
-              sx: {
-                overflow: "hidden",
-                whiteSpace: "nowrap",
-                textOverflow: "ellipsis",
-                width: "100%"
-              },
-              title: e,
-              children: e
-            }
-          );
+          const { dataType: o } = r.row;
+          let t = o.type;
+          return o.type === "composite-list" && (t += ` <${o.innerType.type}>`), /* @__PURE__ */ e(Ae, { title: t, children: t });
         }
       },
       {
@@ -332,24 +149,24 @@ const $e = ({
         disableColumnMenu: !0,
         flex: 1,
         renderCell: (r) => {
-          let t = r.row.source || "";
-          if (a) {
-            const e = a.propertyInfoMap.find(
-              (l) => l.policyKey === n.key && l.key === r.id
+          let o = r.row.source || "";
+          if (i) {
+            const t = i.propertyInfoMap.find(
+              (d) => d.policyKey === p.key && d.key === r.id
             );
-            e && (t = e.source || "");
+            t && (o = t.source || "");
           }
-          return /* @__PURE__ */ i(V, { fullWidth: !0, size: "small", children: /* @__PURE__ */ f(
-            _,
+          return /* @__PURE__ */ e(O, { fullWidth: !0, size: "small", children: /* @__PURE__ */ a(
+            D,
             {
-              onChange: ee(d),
+              onChange: c.handleSourceChange(M),
               name: String(r.id),
-              value: t,
+              value: o,
               children: [
-                /* @__PURE__ */ i(k, { children: /* @__PURE__ */ i(b, { fontStyle: "italic", color: "GrayText", children: "Undefined" }) }),
-                !q && /* @__PURE__ */ i(k, { value: "OBJECT", children: "OBJECT" }),
-                !U && n.catalogInstances.map((e) => /* @__PURE__ */ i(k, { value: e.id, children: e.name }, e.id)),
-                S && ["STATIC", "RANDOM", "SMART_RANDOM"].map((e) => /* @__PURE__ */ i(k, { value: e, children: e }, e))
+                /* @__PURE__ */ e(C, { children: /* @__PURE__ */ e(H, { fontStyle: "italic", color: "GrayText", children: "Undefined" }) }),
+                !E && /* @__PURE__ */ e(C, { value: "OBJECT", children: "OBJECT" }),
+                !B && p.catalogInstances.map((t) => /* @__PURE__ */ e(C, { value: t.id, children: t.name }, t.id)),
+                b && ["STATIC", "RANDOM", "SMART_RANDOM"].map((t) => /* @__PURE__ */ e(C, { value: t, children: t }, t))
               ]
             }
           ) });
@@ -363,48 +180,48 @@ const $e = ({
         disableColumnMenu: !0,
         flex: 1,
         renderCell: (r) => {
-          const { dataType: t } = r.row;
-          let e = r.row.source, l = r.row.sourceField;
-          if (a) {
-            const c = a.propertyInfoMap.find(
-              (x) => x.policyKey === n.key && x.key === r.id
+          const { dataType: o } = r.row;
+          let t = r.row.source, d = r.row.sourceField;
+          if (i) {
+            const l = i.propertyInfoMap.find(
+              (u) => u.policyKey === p.key && u.key === r.id
             );
-            c && (e = c.source, l = c.sourceField || "");
+            l && (t = l.source, d = l.sourceField || "");
           }
-          let u = l || "";
-          if (e === "RANDOM" || e === "STATIC" || e === "SMART_RANDOM")
-            return /* @__PURE__ */ i(T, {});
-          let y = [];
-          if (e === "OBJECT")
-            y = P.properties.map((c) => ({
-              value: c.propertyId,
-              text: c.name
+          const f = d || "";
+          if (t === "RANDOM" || t === "STATIC" || t === "SMART_RANDOM")
+            return /* @__PURE__ */ e(m, {});
+          let h = [];
+          if (t === "OBJECT")
+            h = j.properties.map((l) => ({
+              value: l.propertyId,
+              text: l.name
             }));
-          else if (e !== null) {
-            const c = Number(e), x = v == null ? void 0 : v.find(
-              (w) => w.id === c
+          else if (t !== null) {
+            const l = Number(t), u = P == null ? void 0 : P.find(
+              (g) => g.id === l
             );
-            if (x && K) {
-              const w = K.find(
-                (s) => s.templateKey === x.template.templateKey
+            if (u && x) {
+              const g = x.find(
+                (n) => n.templateKey === u.template.templateKey
               );
-              w && (y = w.properties.filter((s) => s.type === t.type).sort((s, C) => s.name < C.name ? -1 : s.name > C.name ? 1 : 0).map((s) => ({
-                value: s.propertyId,
-                text: s.name
+              g && (h = g.properties.filter((n) => n.type === o.type).sort((n, s) => n.name < s.name ? -1 : n.name > s.name ? 1 : 0).map((n) => ({
+                value: n.propertyId,
+                text: n.name
               })));
             }
           }
-          return /* @__PURE__ */ i(V, { fullWidth: !0, size: "small", children: /* @__PURE__ */ f(
-            _,
+          return /* @__PURE__ */ e(O, { fullWidth: !0, size: "small", children: /* @__PURE__ */ a(
+            D,
             {
-              onChange: re(d),
+              onChange: c.handleSourceFieldChange(M),
               name: String(r.id),
-              value: u,
+              value: f,
               children: [
-                y.map((c, x) => /* @__PURE__ */ i(k, { value: c.value, children: c.text }, x)),
-                y.length === 0 && /* @__PURE__ */ f(k, { disabled: !0, children: [
+                h.map((l, u) => /* @__PURE__ */ e(C, { value: l.value, children: l.text }, u)),
+                h.length === 0 && /* @__PURE__ */ a(C, { disabled: !0, children: [
                   "No ",
-                  t.type,
+                  o.type,
                   " property found!"
                 ] })
               ]
@@ -413,146 +230,110 @@ const $e = ({
         }
       }
     ];
-    return S ? [...o, p] : o;
+    return b ? [...k, T] : k;
   };
-  return /* @__PURE__ */ f(de, { open: F, fullWidth: !0, maxWidth: "lg", onClose: O, children: [
-    /* @__PURE__ */ f(
-      pe,
-      {
-        component: "div",
-        lineHeight: 1,
-        display: "flex",
-        justifyContent: "space-between",
-        children: [
-          /* @__PURE__ */ i(m, { children: a === void 0 ? /* @__PURE__ */ f(T, { children: [
-            /* @__PURE__ */ i(b, { variant: "h6", children: "Property Mapping" }),
-            /* @__PURE__ */ i(b, { variant: "caption", children: "Map policy properties with object template or catalog istance properties" })
-          ] }) : /* @__PURE__ */ f(m, { display: "flex", flex: 1, alignItems: "flex-start", children: [
-            /* @__PURE__ */ f(
-              m,
-              {
-                display: "flex",
-                flexDirection: "column",
-                flex: 1,
-                minWidth: 200,
-                children: [
-                  /* @__PURE__ */ i(
-                    R,
-                    {
-                      name: "name",
-                      variant: "standard",
-                      value: a.name,
-                      placeholder: "Add name",
-                      onChange: D,
-                      sx: {
-                        "& .MuiInputBase-root:before": {
-                          border: "none"
-                        }
-                      }
-                    }
-                  ),
-                  "description" in a && /* @__PURE__ */ i(
-                    R,
-                    {
-                      name: "description",
-                      variant: "standard",
-                      size: "small",
-                      value: a.description,
-                      placeholder: "Add description",
-                      onChange: D,
-                      sx: {
-                        "& .MuiInputBase-root:before": {
-                          border: "none"
-                        }
-                      }
-                    }
-                  )
-                ]
-              }
-            ),
-            /* @__PURE__ */ f(m, { ml: 4, children: [
-              "count" in a && /* @__PURE__ */ i(
-                R,
+  return /* @__PURE__ */ a(
+    Y,
+    {
+      ref: z.rootRef,
+      open: V,
+      fullWidth: !0,
+      maxWidth: "lg",
+      onClose: I,
+      sx: v.sx,
+      children: [
+        /* @__PURE__ */ a(Z, { component: "div", children: [
+          /* @__PURE__ */ e(ee, { children: i === void 0 ? /* @__PURE__ */ a(m, { children: [
+            /* @__PURE__ */ e(te, { variant: "h6", children: "Property Mapping" }),
+            /* @__PURE__ */ e(re, { variant: "caption", children: "Map policy properties with object template or catalog istance properties" })
+          ] }) : /* @__PURE__ */ a(ne, { children: [
+            /* @__PURE__ */ a(le, { children: [
+              /* @__PURE__ */ e(
+                ae,
+                {
+                  name: "name",
+                  variant: "standard",
+                  value: i.name,
+                  placeholder: "Add name",
+                  onChange: c.handleInputChange
+                }
+              ),
+              "description" in i && /* @__PURE__ */ e(
+                ie,
+                {
+                  name: "description",
+                  variant: "standard",
+                  size: "small",
+                  value: i.description,
+                  placeholder: "Add description",
+                  onChange: c.handleInputChange
+                }
+              )
+            ] }),
+            /* @__PURE__ */ a(oe, { children: [
+              "count" in i && /* @__PURE__ */ e(
+                pe,
                 {
                   name: "count",
                   label: "Count",
                   size: "small",
                   required: !0,
-                  sx: { width: 100, mr: 1 },
-                  value: a.count,
-                  onChange: D
+                  value: i.count,
+                  onChange: c.handleInputChange
                 }
               ),
-              "criticalityScore" in a && /* @__PURE__ */ i(
-                R,
+              "criticalityScore" in i && /* @__PURE__ */ e(
+                de,
                 {
                   name: "criticalityScore",
                   label: "Criticality Score",
                   size: "small",
                   type: "text",
                   title: "Should be between 0 and 1",
-                  sx: { width: 150 },
-                  value: a.criticalityScore,
-                  onChange: D
+                  value: i.criticalityScore,
+                  onChange: c.handleInputChange
                 }
               )
             ] })
           ] }) }),
-          /* @__PURE__ */ i(m, { flex: 1, textAlign: "end", children: /* @__PURE__ */ i(J, { onClick: O, children: /* @__PURE__ */ i(le, {}) }) })
-        ]
-      }
-    ),
-    /* @__PURE__ */ i(se, { sx: { minHeight: 300 }, children: $.map((n, d) => /* @__PURE__ */ f(
-      m,
-      {
-        boxShadow: (p) => p.shadows[1],
-        mt: 0.1,
-        mb: 2,
-        overflow: "hidden",
-        borderRadius: 1,
-        children: [
-          /* @__PURE__ */ f(m, { display: "flex", alignItems: "center", p: 2, children: [
-            /* @__PURE__ */ i(b, { children: n.catalogInstances.map((p) => p.name).join(", ") }),
-            /* @__PURE__ */ i(ie, { color: "disabled", sx: { mx: 1 } }),
-            /* @__PURE__ */ i(b, { variant: "caption", color: "GrayText", children: n.name || n.key })
+          /* @__PURE__ */ e(ce, { children: /* @__PURE__ */ e(ue, { onClick: I, children: /* @__PURE__ */ e(W, {}) }) })
+        ] }),
+        /* @__PURE__ */ e(se, { children: v.data.map((p, M) => /* @__PURE__ */ a(ye, { children: [
+          /* @__PURE__ */ a(he, { children: [
+            /* @__PURE__ */ e(ge, { children: p.catalogInstances.map((T) => T.name).join(", ") }),
+            /* @__PURE__ */ e(fe, { children: /* @__PURE__ */ e($, { color: "disabled" }) }),
+            /* @__PURE__ */ e(me, { variant: "caption", children: p.name || p.key })
           ] }),
-          /* @__PURE__ */ i(
-            fe,
+          /* @__PURE__ */ e(
+            Ce,
             {
-              columns: te(n, d),
-              rows: n.propertyMappings,
+              columns: K(p, M),
+              rows: p.propertyMappings,
               autoHeight: !0,
-              density: S ? "comfortable" : "standard",
-              sx: {
-                border: "none",
-                "& .MuiDataGrid-columnHeadersInner": {
-                  backgroundColor: (p) => p.palette.grey[200]
-                }
-              },
+              density: b ? "comfortable" : "standard",
               hideFooterPagination: !0,
               hideFooter: !0,
-              getRowId: (p) => p.key
+              getRowId: (T) => T.key
             }
           )
-        ]
-      },
-      d
-    )) }),
-    /* @__PURE__ */ f(ce, { children: [
-      /* @__PURE__ */ i(W, { color: "inherit", variant: "contained", onClick: O, children: "Cancel" }),
-      /* @__PURE__ */ i(
-        W,
-        {
-          color: "primary",
-          variant: "contained",
-          disabled: $.length === 0 || B,
-          onClick: Q,
-          children: B ? "Saving..." : "Save"
-        }
-      )
-    ] })
-  ] });
+        ] }, M)) }),
+        /* @__PURE__ */ a(Me, { children: [
+          /* @__PURE__ */ e(N, { color: "inherit", variant: "contained", onClick: I, children: "Cancel" }),
+          /* @__PURE__ */ e(
+            N,
+            {
+              color: "primary",
+              variant: "contained",
+              disabled: v.data.length === 0 || S,
+              onClick: c.handleSubmit,
+              children: S ? "Saving..." : "Save"
+            }
+          )
+        ] })
+      ]
+    }
+  );
 };
 export {
-  $e as PropertyMapping
+  Be as PropertyMapping
 };