@hybridcore/ui 1.5.4 → 1.5.7

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

@@ -1,11 +1,11 @@
-import { jsxs as c, jsx as i, Fragment as w } from "react/jsx-runtime";
+import { jsxs as c, jsx as i, Fragment as b } 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 se, Box as m, Typography as $, TextField as R, IconButton as J, DialogContent as pe, DialogActions as ce, Button as W, FormControl as V, Select as _, MenuItem as A } from "@mui/material";
+import { Dialog as de, DialogTitle as pe, Box as m, Typography as $, TextField as R, IconButton as J, DialogContent as se, DialogActions as ce, Button as W, FormControl as V, Select as _, MenuItem as A } from "@mui/material";
 import { DataGrid as fe } from "@mui/x-data-grid";
 import { useState as H, useEffect as ue } from "react";
 import h from "lodash";
 import { e as ye } from "../../ol-9hySGI6D.js";
-import { V as he } from "../../index-JgBxaIU2.js";
+import { V as he } from "../../index-D-mTkx9Q.js";
 import { RangeSelector as me } from "../range-selector/index.js";
 const $e = ({
   open: F,
@@ -30,12 +30,12 @@ const $e = ({
   const Q = () => {
     a ? M(a, !0) : M(k);
   }, D = (n) => {
-    const { name: d, value: s } = n.target;
-    let o = s;
+    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 && M({ ...a, [n]: d });
-  }, S = (n, d, s, o) => (r) => {
+  }, S = (n, d, p, o) => (r) => {
     if (a) {
       let t = [...a.propertyInfoMap];
       const e = t.findIndex(
@@ -46,13 +46,13 @@ const $e = ({
         t.splice(e, 1, {
           ...t[e],
           value: l,
-          source: s ? s || "" : t[e].source,
+          source: p ? p || "" : t[e].source,
           sourceField: o !== void 0 ? o || "" : t[e].sourceField
         }), M && M({ ...a, propertyInfoMap: t });
       }
     }
   }, Y = (n) => () => {
-    const { policyKey: d, key: s, source: o, sourceField: r } = n;
+    const { policyKey: d, key: p, source: o, sourceField: r } = n;
     let t = "";
     if (o === "OBJECT")
       t = h.get(
@@ -70,10 +70,10 @@ const $e = ({
         v
       );
     }
-    t && (S(d, s)({ value: t }), N((e) => {
+    t && (S(d, p)({ value: t }), N((e) => {
       const l = new Map(e);
       return l.set(
-        `${h.get(a, "referenceObjectInstanceId")}:${d}:${s}`,
+        `${h.get(a, "referenceObjectInstanceId")}:${d}:${p}`,
         "Updated"
       ), l;
     }), setTimeout(() => {
@@ -83,12 +83,12 @@ const $e = ({
           `${h.get(
             a,
             "referenceObjectInstanceId"
-          )}:${d}:${s}`,
+          )}:${d}:${p}`,
           "Default"
         ), l;
       });
     }, 2e3));
-  }, Z = (n, d) => (s) => {
+  }, Z = (n, d) => (p) => {
     if (a) {
       let o = [...a.propertyInfoMap];
       const r = o.findIndex(
@@ -96,14 +96,14 @@ const $e = ({
       );
       o[r] && (o.splice(r, 1, {
         ...o[r],
-        randomInfo: s
+        randomInfo: p
       }), M && M({ ...a, propertyInfoMap: o }));
     }
   }, ee = (n) => (d) => {
-    const s = d.target.name;
+    const p = d.target.name;
     let o = [...k];
     const r = o[n], t = r.propertyMappings.findIndex(
-      (l) => l.key === s
+      (l) => l.key === p
     ), e = r.propertyMappings[t];
     h.set(
       o,
@@ -120,10 +120,10 @@ const $e = ({
       ""
     )({ value: "" });
   }, re = (n) => (d) => {
-    const s = d.target.name;
+    const p = d.target.name;
     let o = [...k];
     const r = o[n], t = r.propertyMappings.findIndex(
-      (l) => l.key === s
+      (l) => l.key === p
     ), e = r.propertyMappings[t];
     if (h.set(
       o,
@@ -170,7 +170,7 @@ const $e = ({
       }
     }
   }, te = (n, d) => {
-    let s = {
+    let p = {
       field: "value",
       headerName: "Value",
       sortable: !1,
@@ -180,14 +180,14 @@ const $e = ({
       renderCell: (r) => {
         var x, g;
         const { key: t, dataType: e } = r.row;
-        let l = "", u = /* @__PURE__ */ i(w, {}), y = /* @__PURE__ */ i(w, {}), p = r.row.source;
+        let l = "", u = /* @__PURE__ */ i(b, {}), y = /* @__PURE__ */ i(b, {}), s = r.row.source;
         if (T && a) {
           const f = a.propertyInfoMap.find(
-            (b) => b.key === t && b.policyKey === n.key
+            (w) => w.key === t && w.policyKey === n.key
           );
           if (f) {
-            const { valid: b, validationErrors: z } = f;
-            l = f.value, p = f.source, b === !1 && (u = /* @__PURE__ */ i(
+            const { valid: w, validationErrors: z } = f;
+            l = f.value, s = f.source, w === !1 && (u = /* @__PURE__ */ i(
               ne,
               {
                 color: "error",
@@ -195,20 +195,20 @@ const $e = ({
                 sx: { ml: 1 },
                 titleAccess: z ? z.join(", ") : "Value is not valid!"
               }
-            )), p && (L.get(
+            )), s && (L.get(
               `${h.get(a, "referenceObjectInstanceId")}:${f.policyKey}:${f.key}`
             ) === "Updated" ? y = /* @__PURE__ */ i(oe, { color: "success", sx: { mr: 1 }, titleAccess: "Updated" }) : y = /* @__PURE__ */ i(
               J,
               {
                 onClick: Y(f),
-                title: `Reload value from the ${p === "OBJECT" ? "Object" : "Catalogue"}`,
+                title: `Reload value from the ${s === "OBJECT" ? "Object" : "Catalogue"}`,
                 children: /* @__PURE__ */ i(ae, {})
               }
             ));
           }
-          if (p === "STATIC") {
-            const b = (x = C == null ? void 0 : C.environment.context) != null && x.boundingBox ? ye(C.environment.context.boundingBox) : void 0;
-            return /* @__PURE__ */ c(w, { children: [
+          if (s === "STATIC") {
+            const w = (x = C == null ? void 0 : C.environment.context) != null && x.boundingBox ? ye(C.environment.context.boundingBox) : void 0;
+            return /* @__PURE__ */ c(b, { children: [
               /* @__PURE__ */ i(
                 he,
                 {
@@ -224,16 +224,15 @@ const $e = ({
                   variant: "outlined",
                   value: l,
                   size: "small",
-                  disableMargin: !0,
-                  defaultExtent: b,
+                  defaultExtent: w,
                   onChange: S(n.key, t)
                 }
               ),
               u
             ] });
           }
-          if (p === "RANDOM" || p === "SMART_RANDOM")
-            return /* @__PURE__ */ c(w, { children: [
+          if (s === "RANDOM" || s === "SMART_RANDOM")
+            return /* @__PURE__ */ c(b, { children: [
               /* @__PURE__ */ i(
                 me,
                 {
@@ -366,23 +365,23 @@ const $e = ({
           const { dataType: t } = r.row;
           let e = r.row.source, l = r.row.sourceField;
           if (a) {
-            const p = a.propertyInfoMap.find(
+            const s = a.propertyInfoMap.find(
               (x) => x.policyKey === n.key && x.key === r.id
             );
-            p && (e = p.source, l = p.sourceField || "");
+            s && (e = s.source, l = s.sourceField || "");
           }
           let u = l || "";
           if (e === "RANDOM" || e === "STATIC" || e === "SMART_RANDOM")
-            return /* @__PURE__ */ i(w, {});
+            return /* @__PURE__ */ i(b, {});
           let y = [];
           if (e === "OBJECT")
-            y = q.properties.map((p) => ({
-              value: p.propertyId,
-              text: p.name
+            y = q.properties.map((s) => ({
+              value: s.propertyId,
+              text: s.name
             }));
           else if (e !== null) {
-            const p = Number(e), x = v == null ? void 0 : v.find(
-              (g) => g.id === p
+            const s = Number(e), x = v == null ? void 0 : v.find(
+              (g) => g.id === s
             );
             if (x && K) {
               const g = K.find(
@@ -401,7 +400,7 @@ const $e = ({
               name: String(r.id),
               value: u,
               children: [
-                y.map((p, x) => /* @__PURE__ */ i(A, { value: p.value, children: p.text }, x)),
+                y.map((s, x) => /* @__PURE__ */ i(A, { value: s.value, children: s.text }, x)),
                 y.length === 0 && /* @__PURE__ */ c(A, { disabled: !0, children: [
                   "No ",
                   t.type,
@@ -413,18 +412,18 @@ const $e = ({
         }
       }
     ];
-    return T ? [...o, s] : o;
+    return T ? [...o, p] : o;
   };
   return /* @__PURE__ */ c(de, { open: F, fullWidth: !0, maxWidth: "lg", onClose: O, children: [
     /* @__PURE__ */ c(
-      se,
+      pe,
       {
         component: "div",
         lineHeight: 1,
         display: "flex",
         justifyContent: "space-between",
         children: [
-          /* @__PURE__ */ i(m, { children: a === void 0 ? /* @__PURE__ */ c(w, { children: [
+          /* @__PURE__ */ i(m, { children: a === void 0 ? /* @__PURE__ */ c(b, { children: [
             /* @__PURE__ */ i($, { variant: "h6", children: "Property Mapping" }),
             /* @__PURE__ */ i($, { variant: "caption", children: "Map policy properties with object template or catalog istance properties" })
           ] }) : /* @__PURE__ */ c(m, { display: "flex", flex: 1, alignItems: "flex-start", children: [
@@ -502,17 +501,17 @@ const $e = ({
         ]
       }
     ),
-    /* @__PURE__ */ i(pe, { sx: { minHeight: 300 }, children: k.map((n, d) => /* @__PURE__ */ c(
+    /* @__PURE__ */ i(se, { sx: { minHeight: 300 }, children: k.map((n, d) => /* @__PURE__ */ c(
       m,
       {
-        boxShadow: (s) => s.shadows[1],
+        boxShadow: (p) => p.shadows[1],
         mt: 0.1,
         mb: 2,
         overflow: "hidden",
         borderRadius: 1,
         children: [
           /* @__PURE__ */ c(m, { display: "flex", alignItems: "center", p: 2, children: [
-            /* @__PURE__ */ i($, { children: n.catalogInstances.map((s) => s.name).join(", ") }),
+            /* @__PURE__ */ i($, { children: n.catalogInstances.map((p) => p.name).join(", ") }),
             /* @__PURE__ */ i(ie, { color: "disabled", sx: { mx: 1 } }),
             /* @__PURE__ */ i($, { variant: "caption", color: "GrayText", children: n.name || n.key })
           ] }),
@@ -526,12 +525,12 @@ const $e = ({
               sx: {
                 border: "none",
                 "& .MuiDataGrid-columnHeadersInner": {
-                  backgroundColor: (s) => s.palette.grey[200]
+                  backgroundColor: (p) => p.palette.grey[200]
                 }
               },
               hideFooterPagination: !0,
               hideFooter: !0,
-              getRowId: (s) => s.key
+              getRowId: (p) => p.key
             }
           )
         ]

package/dist/index-D-mTkx9Q.js

@@ -0,0 +1,349 @@
+import { jsxs as h, Fragment as M, jsx as n } from "react/jsx-runtime";
+import I from "lodash";
+import q from "dayjs";
+import { FormControl as B, FormLabel as N, FormGroup as W, FormControlLabel as j, Checkbox as Y, Typography as P, Button as F, Chip as $, Dialog as v, DialogTitle as _, DialogContent as E, DialogActions as G, InputAdornment as H, Tooltip as K } from "@mui/material";
+import { Container as R, Values as U, MiniButton as J } from "./components/instance-form/components/composite-list/styled.js";
+import { KeyboardArrowUp as Q, KeyboardArrowDown as X, Add as Z, LockOutlined as z } from "@mui/icons-material";
+import O from "./hooks/useToggle.js";
+import { GeometryPicker as ee } from "./components/geometry-picker/index.js";
+import { PhoneInput as ne } from "./components/phone-input/index.js";
+import { DateTimePicker as ae } from "./components/date-time-picker/index.js";
+import { T as p } from "./TextField-BjFXx91l.js";
+import { F as le } from "./FormControlLabel-BNT5EI0b.js";
+import { C as te } from "./Checkbox-B0P8LhCl.js";
+import { F as oe, I as de } from "./InputLabel-ClDXuWBr.js";
+import { S as ie } from "./Select-ush_fSWy.js";
+import { M as re } from "./MenuItem-Lcjh1XlV.js";
+import { B as L } from "./Box-SSMZuKnS.js";
+import { useState as S } from "react";
+function me({
+  property: i,
+  mapboxAccessToken: e,
+  value: a,
+  variant: u = "outlined",
+  size: r = "medium",
+  onChange: g
+}) {
+  var C, V, l;
+  const d = O(!1), [m, T] = S(), [b, w] = S(!1), x = 10, A = (t) => {
+    T(I.get(t, i.propertyId));
+  }, y = () => {
+    g([...a || [], m]), T(""), d.action.close();
+  }, D = (t) => () => {
+    if (a) {
+      const o = [...a];
+      o.splice(t, 1), g(o);
+    }
+  }, k = (t) => {
+    const { value: o, checked: c } = t.target;
+    let s = I.isArray(a) ? a : [];
+    c ? s.push(o) : s = s.filter((f) => f !== o), g(s);
+  };
+  if (((V = (C = i.dataTypeInfo) == null ? void 0 : C.innerType) == null ? void 0 : V.type) === "enum") {
+    const { enumValues: t } = i.dataTypeInfo.innerType;
+    return /* @__PURE__ */ h(M, { children: [
+      /* @__PURE__ */ h(B, { fullWidth: !0, component: "fieldset", variant: u, children: [
+        /* @__PURE__ */ n(N, { component: "legend", sx: { mb: 1 }, children: i.name }),
+        /* @__PURE__ */ n(W, { children: t && t.length > 0 ? t.slice(0, b ? 9999 : x).map((o, c) => /* @__PURE__ */ n(
+          j,
+          {
+            label: o,
+            control: /* @__PURE__ */ n(
+              Y,
+              {
+                name: i.propertyId,
+                value: o,
+                size: "small",
+                checked: I.isArray(a) ? a.includes(o) : !1,
+                onChange: k
+              }
+            ),
+            componentsProps: {
+              typography: {
+                variant: "body2"
+              }
+            }
+          },
+          c
+        )) : /* @__PURE__ */ n(P, { variant: "caption", mb: 1, children: "No enum values!" }) })
+      ] }),
+      I.isArray(t) && t.length > x && /* @__PURE__ */ h(
+        F,
+        {
+          size: "small",
+          sx: { p: 0, textTransform: "none" },
+          endIcon: b ? /* @__PURE__ */ n(Q, {}) : /* @__PURE__ */ n(X, {}),
+          onClick: () => w((o) => !o),
+          children: [
+            "Show ",
+            b ? "Less" : "More"
+          ]
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ h(M, { children: [
+    /* @__PURE__ */ h(R, { variant: u, children: [
+      /* @__PURE__ */ n(P, { children: i.name }),
+      /* @__PURE__ */ n(U, { children: I.isArray(a) && a.map((t, o) => {
+        var c, s;
+        return /* @__PURE__ */ n(
+          $,
+          {
+            label: ((s = (c = i.dataTypeInfo) == null ? void 0 : c.innerType) == null ? void 0 : s.type) === "date" ? q(t).format("DD/MM/YYYY HH:mm:ss") : t,
+            size: r,
+            onDelete: D(o)
+          },
+          o
+        );
+      }) }),
+      /* @__PURE__ */ n(
+        J,
+        {
+          startIcon: /* @__PURE__ */ n(Z, {}),
+          variant: "text",
+          onClick: d.action.open,
+          children: "Add"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ h(
+      v,
+      {
+        open: d.state.isOpen,
+        onClose: d.action.close,
+        maxWidth: "sm",
+        fullWidth: !0,
+        children: [
+          /* @__PURE__ */ n(_, { children: "Add List Value" }),
+          /* @__PURE__ */ n(E, { children: (l = i.dataTypeInfo) != null && l.innerType ? /* @__PURE__ */ n(
+            ce,
+            {
+              mapboxAccessToken: e,
+              property: {
+                ...i,
+                name: "Value",
+                type: i.dataTypeInfo.innerType.type
+              },
+              value: m,
+              onChange: A
+            }
+          ) : null }),
+          /* @__PURE__ */ h(G, { children: [
+            /* @__PURE__ */ n(
+              F,
+              {
+                variant: "contained",
+                color: "inherit",
+                onClick: d.action.close,
+                children: "Cancel"
+              }
+            ),
+            /* @__PURE__ */ n(F, { variant: "contained", color: "primary", onClick: y, children: "Ok" })
+          ] })
+        ]
+      }
+    )
+  ] });
+}
+function ce({
+  mapboxAccessToken: i,
+  property: e,
+  value: a,
+  variant: u = "standard",
+  size: r = "medium",
+  defaultExtent: g,
+  fieldOptions: d,
+  // keyAuth,
+  onChange: m
+}) {
+  var k, C, V;
+  const T = (l) => {
+    const o = l.target.value.split(",").map((c) => c.trimStart());
+    m({
+      [e.propertyId]: o
+    });
+  }, b = (l) => {
+    const { name: t, type: o, checked: c, value: s } = l.target;
+    let f = s;
+    e.type === "double" && (f = f.replace(",", "."), f = f.replace(/[^\d.-]+/g, "")), m({
+      [t]: o === "checkbox" ? c : f
+    });
+  }, w = (l) => {
+    m({
+      [e.propertyId]: l
+    });
+  }, x = (l) => {
+    m({
+      [e.propertyId]: l.target.value
+    });
+  }, A = (l) => (t) => {
+    m({
+      [l]: t
+    });
+  }, y = (l) => (t) => {
+    m({
+      [l]: t
+    });
+  }, D = (l) => (t) => {
+    m({
+      [l]: t
+    });
+  };
+  if ([
+    "string",
+    "integer",
+    "double",
+    "text",
+    "long",
+    "byte",
+    "bank-account"
+  ].includes(e.type))
+    return /* @__PURE__ */ n(
+      p,
+      {
+        label: e.name,
+        name: e.propertyId,
+        required: e.required,
+        value: a ?? e.defaultValue ?? "",
+        defaultValue: a,
+        onChange: b,
+        variant: u,
+        type: "text",
+        multiline: e.type === "text",
+        disabled: !e.editable,
+        fullWidth: !0,
+        InputProps: {
+          size: r,
+          ...d && d[e.propertyId] && {
+            tabIndex: d[e.propertyId].order
+          },
+          ...e.privacyPreservationMethod === "ENCRYPTION" ? {
+            endAdornment: /* @__PURE__ */ n(H, { position: "end", children: /* @__PURE__ */ n(K, { title: "Encrypted Field", children: /* @__PURE__ */ n(z, {}) }) })
+          } : {}
+        }
+      }
+    );
+  if (e.type === "date") {
+    const l = a !== void 0 ? q(a).format() : a;
+    return /* @__PURE__ */ n(
+      ae,
+      {
+        label: e.name,
+        value: l,
+        variant: u,
+        size: r,
+        name: e.propertyId,
+        onChange: w,
+        ...d && d[e.propertyId] && {
+          minDate: d[e.propertyId].minDate
+        }
+      }
+    );
+  }
+  if (e.type === "list") {
+    let l = "";
+    return e.defaultValue && (l = I.isArray(e.defaultValue) ? a.join(", ") : e.defaultValue), a && (l = I.isArray(a) ? a.join(",") : a), /* @__PURE__ */ n(
+      p,
+      {
+        label: e.name,
+        name: e.propertyId,
+        value: l,
+        onChange: T,
+        variant: u,
+        disabled: !e.editable,
+        required: e.required,
+        fullWidth: !0,
+        helperText: r === "small" ? null : "Add list values with the comma (,) separated string",
+        InputProps: {
+          size: r,
+          placeholder: r === "small" ? "Add list values with the comma (,) separated string" : "",
+          ...d && d[e.propertyId] && {
+            tabIndex: d[e.propertyId].order
+          }
+        }
+      }
+    );
+  }
+  if (e.type === "boolean")
+    return /* @__PURE__ */ n(
+      le,
+      {
+        control: /* @__PURE__ */ n(
+          te,
+          {
+            name: e.propertyId,
+            checked: !!a,
+            onChange: b,
+            size: r
+          }
+        ),
+        label: e.name
+      }
+    );
+  if (e.type === "enum") {
+    let l = [];
+    return (k = e.dataTypeInfo) != null && k.enumValues && (l = e.dataTypeInfo.enumValues), (V = (C = e.dataTypeInfo) == null ? void 0 : C.innerType) != null && V.enumValues && (l = e.dataTypeInfo.innerType.enumValues), /* @__PURE__ */ h(
+      oe,
+      {
+        fullWidth: !0,
+        variant: u,
+        size: r,
+        required: e.required,
+        children: [
+          /* @__PURE__ */ n(de, { id: `${e.propertyId}-label`, children: e.name }),
+          /* @__PURE__ */ n(
+            ie,
+            {
+              label: e.name,
+              name: e.name,
+              labelId: `${e.propertyId}-label`,
+              id: e.propertyId,
+              value: a ?? "",
+              onChange: x,
+              inputProps: {
+                ...d && d[e.propertyId] && {
+                  tabIndex: d[e.propertyId].order
+                }
+              },
+              children: l.map((t, o) => /* @__PURE__ */ n(re, { value: t, children: t }, o))
+            }
+          )
+        ]
+      }
+    );
+  }
+  return e.type === "geometry" ? /* @__PURE__ */ n(L, { sx: { width: "100%" }, children: /* @__PURE__ */ n(
+    ee,
+    {
+      mapboxAccessToken: i,
+      label: e.name,
+      value: a ?? e.defaultValue ?? "",
+      defaultExtent: g,
+      variant: u,
+      onChange: A(e.propertyId)
+    }
+  ) }) : e.type === "phone-number" ? /* @__PURE__ */ n(L, { sx: { width: "100%" }, children: /* @__PURE__ */ n(
+    ne,
+    {
+      label: e.name,
+      placeholder: "Enter phone number",
+      value: a ?? e.defaultValue ?? "",
+      onChange: y(e.propertyId)
+    }
+  ) }) : e.type === "composite-list" ? /* @__PURE__ */ n(L, { sx: { width: "100%" }, children: /* @__PURE__ */ n(
+    me,
+    {
+      property: e,
+      value: a ?? e.defaultValue ?? "",
+      variant: u,
+      size: r,
+      mapboxAccessToken: i,
+      onChange: D(e.propertyId)
+    }
+  ) }) : /* @__PURE__ */ n(M, {});
+}
+export {
+  me as C,
+  ce as V
+};

package/dist/main.d.ts

@@ -228,6 +228,7 @@ declare interface FieldOptions {
     hidden?: boolean;
     disabled?: boolean;
     minDate?: Dayjs;
+    helperText?: React.ReactNode;
     [key: string]: string | number | object | boolean;
 }
 
@@ -380,7 +381,7 @@ K extends
     /**
      *
      */
-    onCancel?(): void;
+    onCancel?(isDirty?: boolean): void;
 }
 
 export declare const InstanceHierarchyTable: FC<InstanceHierarchyTableProps>;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@hybridcore/ui",
   "description": "Hybrid Core UI Library",
-  "version": "1.5.4",
+  "version": "1.5.7",
   "author": "Hybrid Core",
   "license": "ISC",
   "type": "module",