@firecms/core 3.0.0-canary.210 → 3.0.0-canary.211

package/dist/index.umd.js

@@ -1,6 +1,6 @@
 (function(global, factory) {
-  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("react/jsx-runtime"), require("react-compiler-runtime"), require("react"), require("@firecms/ui"), require("notistack"), require("object-hash"), require("@firecms/formex"), require("react-fast-compare"), require("react-router-dom"), require("date-fns"), require("date-fns/locale"), require("react-use-measure"), require("yup"), require("react-window"), require("react-dropzone"), require("@hello-pangea/dnd"), require("react-image-file-resizer"), require("fuse.js"), require("@firecms/editor"), require("@radix-ui/react-portal"), require("react-router")) : typeof define === "function" && define.amd ? define(["exports", "react/jsx-runtime", "react-compiler-runtime", "react", "@firecms/ui", "notistack", "object-hash", "@firecms/formex", "react-fast-compare", "react-router-dom", "date-fns", "date-fns/locale", "react-use-measure", "yup", "react-window", "react-dropzone", "@hello-pangea/dnd", "react-image-file-resizer", "fuse.js", "@firecms/editor", "@radix-ui/react-portal", "react-router"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global["FireCMS Core"] = {}, global.jsxRuntime, global.reactCompilerRuntime, global.React, global.ui, global.notistack, global.hash, global.formex, global.equal, global.reactRouterDom, global.dateFns, global.locales, global.useMeasure, global.yup, global.reactWindow, global.reactDropzone, global.dnd, global.Resizer, global.Fuse, global.editor, global.Portal, global.reactRouter));
-})(this, function(exports2, jsxRuntime, reactCompilerRuntime, React, ui, notistack, hash, formex, equal, reactRouterDom, dateFns, locales, useMeasure, yup, reactWindow, reactDropzone, dnd, Resizer, Fuse, editor, Portal, reactRouter) {
+  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("react/jsx-runtime"), require("react-compiler-runtime"), require("react"), require("@firecms/ui"), require("notistack"), require("object-hash"), require("@firecms/formex"), require("react-fast-compare"), require("react-router-dom"), require("date-fns"), require("date-fns/locale"), require("react-use-measure"), require("yup"), require("react-window"), require("prism-react-renderer"), require("react-dropzone"), require("@hello-pangea/dnd"), require("react-image-file-resizer"), require("fuse.js"), require("@firecms/editor"), require("@radix-ui/react-portal"), require("react-router")) : typeof define === "function" && define.amd ? define(["exports", "react/jsx-runtime", "react-compiler-runtime", "react", "@firecms/ui", "notistack", "object-hash", "@firecms/formex", "react-fast-compare", "react-router-dom", "date-fns", "date-fns/locale", "react-use-measure", "yup", "react-window", "prism-react-renderer", "react-dropzone", "@hello-pangea/dnd", "react-image-file-resizer", "fuse.js", "@firecms/editor", "@radix-ui/react-portal", "react-router"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global["FireCMS Core"] = {}, global.jsxRuntime, global.reactCompilerRuntime, global.React, global.ui, global.notistack, global.hash, global.formex, global.equal, global.reactRouterDom, global.dateFns, global.locales, global.useMeasure, global.yup, global.reactWindow, global.prismReactRenderer, global.reactDropzone, global.dnd, global.Resizer, global.Fuse, global.editor, global.Portal, global.reactRouter));
+})(this, function(exports2, jsxRuntime, reactCompilerRuntime, React, ui, notistack, hash, formex, equal, reactRouterDom, dateFns, locales, useMeasure, yup, reactWindow, prismReactRenderer, reactDropzone, dnd, Resizer, Fuse, editor, Portal, reactRouter) {
   "use strict";
   function _interopNamespaceDefault(e) {
     const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
@@ -21531,7 +21531,99 @@
       savingError && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-right", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Typography, { color: "error", children: savingError.message }) })
     ] });
   }
-  const MAIN_TAB_VALUE = "main_##Q$SC^#S6";
+  function EntityJsonPreview(t0) {
+    const $ = reactCompilerRuntime.c(9);
+    const {
+      values
+    } = t0;
+    let t1;
+    if ($[0] !== values) {
+      t1 = JSON.stringify(values, null, "	");
+      $[0] = values;
+      $[1] = t1;
+    } else {
+      t1 = $[1];
+    }
+    const code = t1;
+    const {
+      mode
+    } = useModeController();
+    const preRef = React.useRef(null);
+    let t2;
+    if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+      t2 = (e) => {
+        if ((e.ctrlKey || e.metaKey) && e.key.toLowerCase() === "a") {
+          if (preRef.current) {
+            e.preventDefault();
+            e.stopPropagation();
+            const selection = window.getSelection();
+            const range = document.createRange();
+            range.selectNodeContents(preRef.current);
+            if (selection) {
+              selection.removeAllRanges();
+              selection.addRange(range);
+            }
+          }
+        }
+      };
+      $[2] = t2;
+    } else {
+      t2 = $[2];
+    }
+    const handleGlobalKeyDown = t2;
+    let t3;
+    let t4;
+    if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+      t3 = () => {
+        document.addEventListener("keydown", handleGlobalKeyDown);
+        return () => {
+          document.removeEventListener("keydown", handleGlobalKeyDown);
+        };
+      };
+      t4 = [handleGlobalKeyDown];
+      $[3] = t3;
+      $[4] = t4;
+    } else {
+      t3 = $[3];
+      t4 = $[4];
+    }
+    React.useEffect(t3, t4);
+    const t5 = mode === "dark" ? prismReactRenderer.themes.vsDark : prismReactRenderer.themes.vsLight;
+    let t6;
+    if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+      t6 = (t72) => {
+        const {
+          style,
+          tokens,
+          getLineProps,
+          getTokenProps
+        } = t72;
+        return /* @__PURE__ */ jsxRuntime.jsx("pre", { ref: preRef, style: {
+          ...style,
+          background: "inherit"
+        }, className: "container mx-auto p-8 rounded text-sm", children: tokens.map((line, i) => /* @__PURE__ */ jsxRuntime.jsx("div", { ...getLineProps({
+          line
+        }), className: "text-wrap", children: line.map((token, key) => /* @__PURE__ */ jsxRuntime.jsx("span", { ...getTokenProps({
+          token
+        }), className: "word-break" }, key)) }, i)) });
+      };
+      $[5] = t6;
+    } else {
+      t6 = $[5];
+    }
+    let t7;
+    if ($[6] !== code || $[7] !== t5) {
+      t7 = /* @__PURE__ */ jsxRuntime.jsx(prismReactRenderer.Highlight, { theme: t5, code, language: "json", children: t6 });
+      $[6] = code;
+      $[7] = t5;
+      $[8] = t7;
+    } else {
+      t7 = $[8];
+    }
+    return t7;
+  }
+  const MAIN_TAB_VALUE = "__main_##Q$SC^#S6";
+  const JSON_TAB_VALUE = "__json";
   function EntityEditView(t0) {
     const $ = reactCompilerRuntime.c(28);
     let entityId;
@@ -21693,7 +21785,8 @@
     const subcollectionsCount = subcollections?.length ?? 0;
     const customViews = collection.entityViews;
     const customViewsCount = customViews?.length ?? 0;
-    const hasAdditionalViews = customViewsCount > 0 || subcollectionsCount > 0;
+    const includeJsonView = true;
+    const hasAdditionalViews = customViewsCount > 0 || subcollectionsCount > 0 || includeJsonView;
     const {
       resolvedEntityViews,
       selectedEntityView,
@@ -21713,6 +21806,9 @@
       }), role: "tabpanel", children: /* @__PURE__ */ jsxRuntime.jsx(ErrorBoundary, { children: formContext && /* @__PURE__ */ jsxRuntime.jsx(Builder, { collection, entity: usedEntity, modifiedValues: formContext.formex.values ?? usedEntity?.values, formContext }) }) }, `custom_view_${customView.key}`);
     }).filter(Boolean);
     const globalLoading = dataLoading && !usedEntity;
+    const jsonView = /* @__PURE__ */ jsxRuntime.jsx("div", { className: ui.cls("relative flex-1 h-full overflow-auto w-full", {
+      "hidden": selectedTab !== JSON_TAB_VALUE
+    }), role: "tabpanel", children: /* @__PURE__ */ jsxRuntime.jsx(ErrorBoundary, { children: /* @__PURE__ */ jsxRuntime.jsx(EntityJsonPreview, { values: formContext?.values ?? {} }) }) }, "json_view");
     const subCollectionsViews = subcollections && subcollections.map((subcollection) => {
       const subcollectionId = subcollection.id ?? subcollection.path;
       const fullPath = usedEntity ? `${path}/${usedEntity?.id}/${removeInitialAndTrailingSlashes(subcollectionId)}` : void 0;
@@ -21752,21 +21848,22 @@
     }, Builder: selectedSecondaryForm?.Builder });
     const subcollectionTabs = subcollections && subcollections.map((subcollection_0) => /* @__PURE__ */ jsxRuntime.jsx(ui.Tab, { className: "text-sm min-w-[120px]", value: subcollection_0.id, children: subcollection_0.name }, `entity_detail_collection_tab_${subcollection_0.name}`));
     const customViewTabs = resolvedEntityViews.map((view) => /* @__PURE__ */ jsxRuntime.jsx(ui.Tab, { className: "text-sm min-w-[120px]", value: view.key, children: view.name }, `entity_detail_collection_tab_${view.name}`));
-    const shouldShowTopBar = Boolean(barActions) || hasAdditionalViews;
     let result = /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex flex-col h-full w-full bg-white dark:bg-surface-900", children: [
-      shouldShowTopBar && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ui.cls("h-14 flex overflow-visible overflow-x-scroll w-full no-scrollbar h-14 border-b pl-2 pr-2 pt-1 flex items-end bg-surface-50 dark:bg-surface-900", ui.defaultBorderMixin), children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: ui.cls("h-14 flex overflow-visible overflow-x-scroll w-full no-scrollbar h-14 border-b pl-2 pr-2 pt-1 flex items-end bg-surface-50 dark:bg-surface-900", ui.defaultBorderMixin), children: [
         barActions,
         /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex-grow" }),
         globalLoading && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "self-center", children: /* @__PURE__ */ jsxRuntime.jsx(ui.CircularProgress, { size: "small" }) }),
-        hasAdditionalViews && /* @__PURE__ */ jsxRuntime.jsxs(ui.Tabs, { value: selectedTab, onValueChange: (value_0) => {
+        /* @__PURE__ */ jsxRuntime.jsxs(ui.Tabs, { value: selectedTab, onValueChange: (value_0) => {
           onSideTabClick(value_0);
         }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(ui.Tab, { disabled: !hasAdditionalViews, value: JSON_TAB_VALUE, innerClassName: "block", className: "text-sm", children: /* @__PURE__ */ jsxRuntime.jsx(ui.CodeIcon, { size: "small" }) }),
           /* @__PURE__ */ jsxRuntime.jsx(ui.Tab, { disabled: !hasAdditionalViews, value: MAIN_TAB_VALUE, className: "text-sm min-w-[120px]", children: collection.singularName ?? collection.name }),
           customViewTabs,
           subcollectionTabs
         ] })
       ] }),
       globalLoading ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full pt-12 pb-16 px-4 sm:px-8 md:px-10", children: /* @__PURE__ */ jsxRuntime.jsx(CircularProgressCenter, {}) }) : entityView,
+      jsonView,
       customViewsView,
       subCollectionsViews
     ] });
@@ -21882,7 +21979,7 @@
     const {
       selectedSecondaryForm
     } = resolvedSelectedEntityView(props.collection?.entityViews, customizationController, props.selectedTab);
-    const shouldUseSmallLayout = !props.selectedTab || Boolean(selectedSecondaryForm);
+    const shouldUseSmallLayout = !props.selectedTab || props.selectedTab === JSON_TAB_VALUE || Boolean(selectedSecondaryForm);
     let resolvedWidth;
     if (props.width) {
       resolvedWidth = typeof props.width === "number" ? `${props.width}px` : props.width;