@firecms/collection_editor 3.0.0-beta.4.pre.1 → 3.0.0-beta.5

package/dist/index.es.js

@@ -1,9 +1,9 @@
 import { jsx as e, jsxs as a, Fragment as j } from "react/jsx-runtime";
-import { FieldCaption as X, SearchIconsView as gr, toSnakeCase as Pt, singular as vr, IconForView as ot, ArrayContainer as yr, serializeRegExp as br, useSnackbarController as Ie, resolveEnumValues as Cr, isPropertyBuilder as ne, useCustomizationController as Ae, getFieldConfig as $e, ErrorBoundary as ge, PropertyConfigBadge as Ye, unslugify as ut, useNavigationController as Pe, mergeDeep as W, DEFAULT_FIELD_CONFIGS as Gt, isValidRegExp as Pr, getFieldId as Kt, DeleteConfirmationDialog as lt, useLargeLayout as Nr, makePropertiesEditable as pt, resolveEntityView as xr, useSelectionController as wr, EntityCollectionTable as Tr, slugify as kr, useAuthController as _e, randomString as _t, CircularProgressCenter as Nt, removeUndefined as Ft, ErrorView as Wt, removeInitialAndTrailingSlashes as Or, getDefaultPropertiesOrder as Vr } from "@firecms/core";
+import { FieldCaption as X, SearchIconsView as gr, toSnakeCase as Pt, singular as vr, IconForView as ot, ArrayContainer as yr, serializeRegExp as br, useSnackbarController as Ie, resolveEnumValues as Cr, isPropertyBuilder as ne, useCustomizationController as Ae, getFieldConfig as $e, ErrorBoundary as me, PropertyConfigBadge as Ye, unslugify as ut, useNavigationController as Pe, mergeDeep as W, DEFAULT_FIELD_CONFIGS as Gt, isValidRegExp as Pr, getFieldId as Kt, DeleteConfirmationDialog as lt, useLargeLayout as Nr, makePropertiesEditable as pt, resolveEntityView as xr, useSelectionController as wr, EntityCollectionTable as Tr, slugify as kr, useAuthController as _e, randomString as _t, CircularProgressCenter as Nt, removeUndefined as Ft, ErrorView as Wt, removeInitialAndTrailingSlashes as Or, getDefaultPropertiesOrder as Vr } from "@firecms/core";
 import * as je from "react";
 import Y, { useState as $, useEffect as de, useMemo as Zt, useCallback as Q, useRef as Le, useDeferredValue as Ir, useContext as Jt } from "react";
 import ve from "react-fast-compare";
-import { useAutoComplete as _r, Container as mt, Typography as O, Tooltip as te, IconButton as oe, Chip as st, TextField as Oe, cn as he, DebouncedTextField as Z, Autocomplete as Fr, AutocompleteItem as Sr, ExpandablePanel as xt, SettingsIcon as He, Select as be, SelectItem as ee, BooleanSwitchWithLabel as ct, Dialog as Fe, AutoAwesomeIcon as ht, Badge as Er, ListIcon as Ar, Button as z, CircularProgress as De, Paper as Ce, DialogContent as Be, DialogActions as ze, RuleIcon as Dr, FileUploadIcon as Br, MultiSelect as zr, MultiSelectItem as St, Checkbox as Et, cardMixin as Qt, cardClickableMixin as Xt, cardSelectedMixin as er, FunctionsIcon as Mr, RemoveCircleIcon as Rr, defaultBorderMixin as wt, RemoveIcon as Ur, DragHandleIcon as jr, AddIcon as se, SelectGroup as At, InfoLabel as Lr, DeleteIcon as dt, ContentCopyIcon as qr, CodeIcon as $r, Table as Dt, TableBody as Bt, TableRow as bt, TableCell as Ue, Alert as Yr, Icon as et, Card as tr, coolIconKeys as zt, Tabs as Hr, Tab as Ct, ArrowBackIcon as tt, LoadingButton as Mt, DoneIcon as Gr, UndoIcon as Kr, SaveIcon as Wr, Menu as Zr, MoreVertIcon as Jr, MenuItem as Qr, Collapse as Xr } from "@firecms/ui";
+import { useAutoComplete as _r, Container as mt, Typography as O, Tooltip as te, IconButton as oe, Chip as st, TextField as Oe, cn as fe, DebouncedTextField as Z, Autocomplete as Fr, AutocompleteItem as Sr, ExpandablePanel as xt, SettingsIcon as He, Select as be, SelectItem as ee, BooleanSwitchWithLabel as ct, Dialog as Fe, AutoAwesomeIcon as ht, Badge as Er, ListIcon as Ar, Button as z, CircularProgress as De, Paper as Ce, DialogContent as Be, DialogActions as ze, RuleIcon as Dr, FileUploadIcon as Br, MultiSelect as zr, MultiSelectItem as St, Checkbox as Et, cardMixin as Qt, cardClickableMixin as Xt, cardSelectedMixin as er, FunctionsIcon as Mr, RemoveCircleIcon as Rr, defaultBorderMixin as wt, RemoveIcon as Ur, DragHandleIcon as jr, AddIcon as se, SelectGroup as At, InfoLabel as Lr, DeleteIcon as dt, ContentCopyIcon as qr, CodeIcon as $r, Table as Dt, TableBody as Bt, TableRow as bt, TableCell as Ue, Alert as Yr, Icon as et, Card as tr, coolIconKeys as zt, Tabs as Hr, Tab as Ct, ArrowBackIcon as tt, LoadingButton as Mt, DoneIcon as Gr, UndoIcon as Kr, SaveIcon as Wr, Menu as Zr, MoreVertIcon as Jr, MenuItem as Qr, Collapse as Xr } from "@firecms/ui";
 import * as rt from "yup";
 import { useFormex as K, Field as H, getIn as I, useCreateFormex as Tt, Formex as kt } from "@firecms/formex";
 import { extractEnumFromValues as ei, buildPropertyFromData as ti, buildEntityPropertiesFromData as ri } from "@firecms/schema_inference";
@@ -88,7 +88,7 @@ function yi({
         ),
         /* @__PURE__ */ e(X, { error: m.name && !!s.name, children: m.name && s.name ? s.name : "Name of in this collection, usually a plural name (e.g. Products)" })
       ] }),
-      /* @__PURE__ */ a("div", { className: he("col-span-12 ", R ? "" : "sm:col-span-8"), children: [
+      /* @__PURE__ */ a("div", { className: fe("col-span-12 ", R ? "" : "sm:col-span-8"), children: [
         /* @__PURE__ */ e(
           H,
           {
@@ -285,7 +285,7 @@ function yi({
     )
   ] }) });
 }
-function me(t) {
+function he(t) {
   return "properties." + t.replaceAll(".", ".properties.");
 }
 function bi(t) {
@@ -299,7 +299,7 @@ function ae(t, r) {
 }
 function ir(t, r) {
   const n = r ? `${r}.${t}` : t;
-  return me(n);
+  return he(n);
 }
 function Ci({
   enumValues: t,
@@ -1044,7 +1044,7 @@ function nr({
   const { propertyConfigs: d } = Ae(), u = $e(t, d);
   qe(t);
   const p = n ? "border-red-500 dark:border-red-500 border-opacity-100 dark:border-opacity-100 ring-0 dark:ring-0" : o ? "border-primary" : "border-transparent";
-  return n && console.log("PropertyFieldPreview", t), /* @__PURE__ */ e(ge, { children: /* @__PURE__ */ a(
+  return n && console.log("PropertyFieldPreview", t), /* @__PURE__ */ e(me, { children: /* @__PURE__ */ a(
     "div",
     {
       onClick: r,
@@ -1054,7 +1054,7 @@ function nr({
         /* @__PURE__ */ a(
           Ce,
           {
-            className: he(
+            className: fe(
               "border",
               "pl-2 w-full flex flex-row gap-4 items-center",
               Qt,
@@ -1065,7 +1065,7 @@ function nr({
             ),
             children: [
               /* @__PURE__ */ a("div", { className: "w-full flex flex-col", children: [
-                i && /* @__PURE__ */ e(ge, { children: /* @__PURE__ */ e(
+                i && /* @__PURE__ */ e(me, { children: /* @__PURE__ */ e(
                   O,
                   {
                     variant: "body1",
@@ -1075,7 +1075,7 @@ function nr({
                   }
                 ) }),
                 /* @__PURE__ */ a("div", { className: "flex flex-row items-center", children: [
-                  /* @__PURE__ */ e(ge, { children: /* @__PURE__ */ e(
+                  /* @__PURE__ */ e(me, { children: /* @__PURE__ */ e(
                     O,
                     {
                       className: "flex-grow pr-2",
@@ -1085,7 +1085,7 @@ function nr({
                       children: u?.name
                     }
                   ) }),
-                  /* @__PURE__ */ e(ge, { children: /* @__PURE__ */ e(
+                  /* @__PURE__ */ e(me, { children: /* @__PURE__ */ e(
                     O,
                     {
                       variant: "body2",
@@ -1131,7 +1131,7 @@ function Ti({
         /* @__PURE__ */ e(
           Ce,
           {
-            className: he(
+            className: fe(
               "pl-2 w-full flex flex-row gap-4 items-center",
               Qt,
               n ? Xt : "",
@@ -1160,7 +1160,7 @@ function Ti({
                     children: o?.name
                   }
                 ),
-                i && !ne(i) && /* @__PURE__ */ e(ge, { children: /* @__PURE__ */ e(
+                i && !ne(i) && /* @__PURE__ */ e(me, { children: /* @__PURE__ */ e(
                   O,
                   {
                     variant: "body2",
@@ -1169,7 +1169,7 @@ function Ti({
                     children: i.dataType
                   }
                 ) }),
-                i && ne(i) && /* @__PURE__ */ e(ge, { children: /* @__PURE__ */ e(
+                i && ne(i) && /* @__PURE__ */ e(me, { children: /* @__PURE__ */ e(
                   O,
                   {
                     variant: "body2",
@@ -1178,7 +1178,7 @@ function Ti({
                     children: "This property is defined as a property builder in code"
                   }
                 ) }),
-                !i && /* @__PURE__ */ e(ge, { children: /* @__PURE__ */ e(
+                !i && /* @__PURE__ */ e(me, { children: /* @__PURE__ */ e(
                   O,
                   {
                     variant: "body2",
@@ -1230,7 +1230,7 @@ const ft = Y.memo(
               {
                 draggableId: `array_field_${r}_${k}}`,
                 index: b,
-                children: (g, w) => /* @__PURE__ */ e(ge, { children: /* @__PURE__ */ e(
+                children: (g, w) => /* @__PURE__ */ e(me, { children: /* @__PURE__ */ e(
                   ki,
                   {
                     propertyKey: k,
@@ -1379,7 +1379,7 @@ function Oi({ disabled: t, getData: r, allowDataInference: n, propertyConfigs: i
     const w = N ? ae(N, g) : void 0;
     if (!w)
       throw Error("collection editor miss config");
-    const _ = me(w), M = ye(g), R = I(o, M) ?? Object.keys(I(o, bi(g)));
+    const _ = he(w), M = ye(g), R = I(o, M) ?? Object.keys(I(o, bi(g)));
     d(_, void 0, !1), d(M, R.filter((D) => D !== N), !1), p(!1), m(void 0), f(void 0);
   }, [d, o]), P = h ? ae(h, s) : void 0, k = P ? I(o.properties, P.replaceAll(".", ".properties.")) : void 0, b = !v || v.length < 1, C = Q((N, g) => {
     d(ye(g), N, !1);
@@ -1734,7 +1734,7 @@ function Si({ disabled: t, getData: r, allowDataInference: n, propertyConfigs: i
     const g = C ? ae(C, N) : void 0;
     if (!g)
       throw Error("collection editor miss config");
-    d(`oneOf.${me(g)}`, void 0, !1);
+    d(`oneOf.${he(g)}`, void 0, !1);
     const w = `oneOf.${ye(N)}`, _ = I(o, w);
     d(w, _.filter((M) => M !== C), !1), p(!1), m(void 0), f(void 0);
   }, [d, o]), k = /* @__PURE__ */ a(
@@ -2368,7 +2368,7 @@ function or({ value: t, optionDisabled: r, propertyConfig: n, existing: i }) {
       children: /* @__PURE__ */ a(
         "div",
         {
-          className: he(
+          className: fe(
             "flex flex-row items-center text-base min-h-[52px]",
             r ? "w-full" : ""
           ),
@@ -2809,7 +2809,7 @@ function ji({
                   onClick: (re) => {
                     we && (re.stopPropagation(), re.preventDefault());
                   },
-                  className: he(
+                  className: fe(
                     "flex items-center",
                     we ? "w-full pointer-events-none opacity-50" : ""
                   ),
@@ -2912,10 +2912,14 @@ function $i(t) {
 function Yi(t) {
   return t ? (t.slice(0, 1).toLowerCase() + t.slice(1)).replace(/([-_ ]){1,}/g, " ").split(/[-_ ]/).reduce((r, n) => r + n[0].toUpperCase() + n.substring(1), "") : "";
 }
-function Hi({ collection: t, onOpenChange: r, open: n }) {
-  const i = Ie(), l = `import { EntityCollection } from "firecms";
+function Hi({
+  collection: t,
+  onOpenChange: r,
+  open: n
+}) {
+  const i = Ie(), l = t ? `import { EntityCollection } from "firecms";
 
-const ` + (t.name ? Yi(t.name) : "my") + "Collection:EntityCollection = " + oi.stringify(cr(t), null, "	");
+const ` + (t?.name ? Yi(t.name) : "my") + "Collection:EntityCollection = " + oi.stringify(cr(t), null, "	") : "No collection selected";
   return /* @__PURE__ */ a(
     Fe,
     {
@@ -2946,7 +2950,13 @@ const ` + (t.name ? Yi(t.name) : "my") + "Collection:EntityCollection = " + oi.s
               theme: si.vsDark,
               code: l,
               language: "typescript",
-              children: ({ className: o, style: d, tokens: u, getLineProps: p, getTokenProps: h }) => /* @__PURE__ */ e("pre", { style: d, className: "p-4 rounded text-sm", children: u.map((m, s) => /* @__PURE__ */ e("div", { ...p({ line: m }), children: m.map((f, v) => /* @__PURE__ */ e("span", { ...h({ token: f }) }, v)) }, s)) })
+              children: ({
+                className: o,
+                style: d,
+                tokens: u,
+                getLineProps: p,
+                getTokenProps: h
+              }) => /* @__PURE__ */ e("pre", { style: d, className: "p-4 rounded text-sm", children: u.map((m, s) => /* @__PURE__ */ e("div", { ...p({ line: m }), children: m.map((f, v) => /* @__PURE__ */ e("span", { ...h({ token: f }) }, v)) }, s)) })
             }
           )
         ] }),
@@ -3050,21 +3060,21 @@ function Gi({
         ...U,
         ...f.propertiesOrder ?? []
       ];
-      v("properties", T, !1), fe(S), Me(U);
+      v("properties", T, !1), ge(S), Me(U);
     }).finally(() => {
       q(!1);
     }));
-  } : void 0, re = Q((F) => F ? we.current[F] ?? I(f, ye(F)) : we.current[""], [f]), fe = Q((F, U) => {
+  } : void 0, re = Q((F) => F ? we.current[F] ?? I(f, ye(F)) : we.current[""], [f]), ge = Q((F, U) => {
     const T = ye(U);
     v(T, F, !1), we.current[U ?? ""] = F;
   }, [v]), Te = Q((F, U) => {
     const T = F ? ae(F, U) : void 0;
     if (!T)
       throw Error("collection editor miss config");
-    v(me(T), void 0, !1);
+    v(he(T), void 0, !1);
     const E = re(U).filter((ie) => ie !== F);
-    fe(E, U), J(!1), w(void 0), M(void 0), D(void 0);
-  }, [re, v, fe]), Ge = (F, U) => {
+    ge(E, U), J(!1), w(void 0), M(void 0), D(void 0);
+  }, [re, v, ge]), Ge = (F, U) => {
     v(ye(U), F, !1);
   }, gt = ({
     id: F,
@@ -3077,14 +3087,14 @@ function Gi({
       [F]: U
     }, !1);
     const T = [...f.propertiesOrder ?? Object.keys(f.properties), F];
-    fe(T), J(!1), C && (w(T.indexOf(F)), M(F)), D(void 0);
+    ge(T), J(!1), C && (w(T.indexOf(F)), M(F)), D(void 0);
   }, pe = ({
     id: F,
     property: U,
     previousId: T,
     namespace: S
   }) => {
-    const E = F ? ae(F, S) : void 0, ie = E ? me(E) : void 0;
+    const E = F ? ae(F, S) : void 0, ie = E ? he(E) : void 0;
     if (T && T !== F) {
       console.debug("onPropertyChanged, id change", {
         id: F,
@@ -3092,8 +3102,8 @@ function Gi({
         previousId: T,
         namespace: S
       });
-      const ke = ae(T, S), Vt = me(ke), It = re(S).map((Xe) => Xe === T ? F : Xe).filter((Xe) => Xe !== void 0);
-      fe(It, S), F && (w(It.indexOf(F)), M(F)), v(Vt, void 0, !1), y(Vt, !1, !1);
+      const ke = ae(T, S), Vt = he(ke), It = re(S).map((Xe) => Xe === T ? F : Xe).filter((Xe) => Xe !== void 0);
+      ge(It, S), F && (w(It.indexOf(F)), M(F)), v(Vt, void 0, !1), y(Vt, !1, !1);
     }
     console.debug("onPropertyChanged", {
       id: F,
@@ -3111,7 +3121,7 @@ function Gi({
       propertyPath: S
     }), S) {
       const E = T && Object.keys(T).length > 0;
-      i(F, U, E ? T : void 0), x(me(S), E ? "Property error" : void 0);
+      i(F, U, E ? T : void 0), x(he(S), E ? "Property error" : void 0);
     }
   }, []), We = () => {
     w(void 0), M(void 0);
@@ -3121,7 +3131,7 @@ function Gi({
       namespace: U
     }), w(Re.indexOf(F)), M(F), D(U);
   }, [Re]), yt = /* @__PURE__ */ a("div", { className: "grid grid-cols-12 gap-2 h-full bg-gray-50 dark:bg-gray-900", children: [
-    /* @__PURE__ */ a("div", { className: he(
+    /* @__PURE__ */ a("div", { className: fe(
       "p-4 md:p-8 pb-20 md:pb-20",
       "col-span-12 lg:col-span-5 h-full overflow-auto",
       !N && "border-r " + wt
@@ -3185,7 +3195,7 @@ function Gi({
           ) })
         ] })
       ] }),
-      /* @__PURE__ */ e(ge, { children: /* @__PURE__ */ e(
+      /* @__PURE__ */ e(me, { children: /* @__PURE__ */ e(
         ft,
         {
           className: "pl-8",
@@ -3304,14 +3314,14 @@ function Gi({
         existingPropertyKeys: f.propertiesOrder
       }
     ),
-    /* @__PURE__ */ e(
+    /* @__PURE__ */ e(me, { children: /* @__PURE__ */ e(
       Hi,
       {
         collection: f,
         open: V,
         onOpenChange: G
       }
-    )
+    ) })
   ] });
 }
 function Ki({
@@ -4142,7 +4152,7 @@ function nt({
     tr,
     {
       onClick: i,
-      className: he(
+      className: fe(
         "my-2 rounded-md border mx-0 p-6 px-4 focus:outline-none transition ease-in-out duration-150 flex flex-row gap-4 items-center",
         "text-gray-700 dark:text-slate-300",
         "hover:border-primary-dark hover:text-primary-dark dark:hover:text-primary focus:ring-primary hover:ring-1 hover:ring-primary",
@@ -4170,12 +4180,12 @@ function Qi({
     previousId: y,
     namespace: P
   }) => {
-    const k = v ? ae(v, P) : void 0, b = k ? me(k) : void 0, C = (g) => g ? p.current[g] ?? I(o, ye(g)) : p.current[""], N = (g, w) => {
+    const k = v ? ae(v, P) : void 0, b = k ? he(k) : void 0, C = (g) => g ? p.current[g] ?? I(o, ye(g)) : p.current[""], N = (g, w) => {
       const _ = ye(w);
       i(_, g, !1), p.current[w ?? ""] = g;
     };
     if (y && y !== v) {
-      const g = ae(y, P), w = me(g), M = C(P).map((D) => D === y ? v : D).filter((D) => D !== void 0);
+      const g = ae(y, P), w = he(g), M = C(P).map((D) => D === y ? v : D).filter((D) => D !== void 0);
       N(M, P);
       const R = { ...t.headersMapping };
       Object.keys(R).forEach((D) => {
@@ -4189,7 +4199,7 @@ function Qi({
     property: y,
     namespace: P
   }) => {
-    const k = v ? ae(v, P) : void 0, b = k ? me(k) : void 0, C = t.importData.map((g) => I(g, x)), N = {
+    const k = v ? ae(v, P) : void 0, b = k ? he(k) : void 0, C = t.importData.map((g) => I(g, x)), N = {
       ...ti(C, y, rr),
       editable: !0
     };
@@ -4569,7 +4579,7 @@ function rn({
     }
   }), {
     values: re,
-    setFieldValue: fe,
+    setFieldValue: ge,
     isSubmitting: Te,
     dirty: Ge,
     submitCount: gt
@@ -4580,19 +4590,19 @@ function rn({
   function Qe(T) {
     _.setInUse(!0), ri(T, rr).then((S) => {
       const E = dr(S);
-      fe("properties", E.properties), fe("propertiesOrder", Object.keys(E.properties)), _.setIdColumn(E.idColumn), _.setImportData(T), _.setHeadersMapping(E.headersMapping), _.setOriginProperties(E.properties);
+      ge("properties", E.properties), ge("propertiesOrder", Object.keys(E.properties)), _.setIdColumn(E.idColumn), _.setImportData(T), _.setHeadersMapping(E.headersMapping), _.setOriginProperties(E.properties);
     });
   }
   const vt = !!re.name && !!re.id, yt = () => {
     const T = { ...re.properties };
-    _.idColumn && delete T[_.idColumn], fe("properties", T), L();
+    _.idColumn && delete T[_.idColumn], ge("properties", T), L();
   }, U = b?.editable === void 0 || b?.editable === !0 || t;
   return /* @__PURE__ */ e(Be, { fullHeight: !0, children: /* @__PURE__ */ e(kt, { value: ue, children: /* @__PURE__ */ a(j, { children: [
     !t && /* @__PURE__ */ a(
       Hr,
       {
         value: c,
-        className: he(wt, "justify-end bg-gray-50 dark:bg-gray-950 border-b"),
+        className: fe(wt, "justify-end bg-gray-50 dark:bg-gray-950 border-b"),
         onValueChange: (T) => V(T),
         children: [
           /* @__PURE__ */ e(Ct, { value: "details", children: "Details" }),
@@ -4606,7 +4616,7 @@ function rn({
       {
         noValidate: !0,
         onSubmit: ue.handleSubmit,
-        className: he(
+        className: fe(
           t ? "h-full" : "h-[calc(100%-48px)]",
           "flex-grow flex flex-col relative"
         ),
@@ -5187,7 +5197,7 @@ function cn({
   return /* @__PURE__ */ e(
     tr,
     {
-      className: he("h-full p-4 min-h-[124px]"),
+      className: fe("h-full p-4 min-h-[124px]"),
       onClick: i && l ? () => i.createCollection({
         initialValues: t ? { group: t } : void 0,
         parentCollectionIds: [],
@@ -5324,7 +5334,7 @@ function pn({
 }
 function mn() {
   const t = xe();
-  return /* @__PURE__ */ a(
+  return /* @__PURE__ */ e("div", { className: "bg-gray-50 dark:bg-gray-900 min-w-fit rounded", children: /* @__PURE__ */ a(
     z,
     {
       className: "min-w-fit",
@@ -5339,7 +5349,7 @@ function mn() {
         "New collection"
       ]
     }
-  );
+  ) });
 }
 function In({
   collectionConfigController: t,
@@ -5354,7 +5364,7 @@ function In({
   onAnalyticsEvent: h
 }) {
   return {
-    name: "Collection Editor",
+    key: "collection_editor",
     loading: t.loading,
     provider: {
       Component: on,
@@ -5443,7 +5453,7 @@ export {
   qe as editableProperty,
   ae as getFullId,
   ir as getFullIdPath,
-  me as idToPropertiesPath,
+  he as idToPropertiesPath,
   ye as namespaceToPropertiesOrderPath,
   bi as namespaceToPropertiesPath,
   wi as removeNonEditableProperties,