tinacms 0.69.16 → 0.69.18

package/dist/admin/index.d.ts

@@ -10,6 +10,7 @@ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
 */
-export declare const TinaAdmin: ({ preview }: {
-    preview?: JSX.Element;
+export declare const TinaAdmin: ({ preview, config, }: {
+    preview?: (props: object) => JSX.Element;
+    config: object;
 }) => JSX.Element;

package/dist/auth/AuthModal.d.ts

@@ -18,7 +18,10 @@ interface ModalBuilderProps {
     close(): void;
 }
 export declare function ModalBuilder(modalProps: ModalBuilderProps): JSX.Element;
-export declare const ErrorLabel: any;
+export declare const ErrorLabel: ({ style, ...props }: {
+    [x: string]: any;
+    style?: {};
+}) => JSX.Element;
 interface ButtonProps {
     name: string;
     action(): Promise<void>;

package/dist/index.d.ts

@@ -27,6 +27,8 @@ export default TinaCMSProvider2;
 import { TinaCMS } from '@tinacms/toolkit';
 import { formifyCallback } from './hooks/use-graphql-forms';
 import type { TinaCloudSchema as TinaCloudSchemaBase, TinaCloudCollection as TinaCloudCollectionBase, TinaCloudTemplateBase, TinaTemplate, TinaFieldBase, TinaCMSConfig } from '@tinacms/schema-tools';
+export { NAMER, resolveForm } from '@tinacms/schema-tools';
+export type { TinaFieldEnriched, TinaSchema, Template, Templateable, } from '@tinacms/schema-tools';
 export declare type TinaCloudSchema = TinaCloudSchemaBase<false>;
 export declare type TinaCloudCollection = TinaCloudCollectionBase<false>;
 export declare type TinaCollection = TinaCloudCollectionBase<false>;

package/dist/index.es.js

@@ -6,9 +6,9 @@ import set from "lodash.set";
 import React, { useState, useCallback, useEffect, Fragment, useMemo } from "react";
 import { getIn, setIn } from "final-form";
 import { resolveForm, TinaSchema, addNamespaceToSchema, validateSchema } from "@tinacms/schema-tools";
+export { NAMER, resolveForm } from "@tinacms/schema-tools";
 import gql$1 from "graphql-tag";
 import * as yup from "yup";
-import styled from "styled-components";
 import { setEditing, TinaDataContext, EditContext, useEditState } from "@tinacms/sharedctx";
 import UrlPattern from "url-pattern";
 import { NavLink, useNavigate, useParams, useLocation, Link, HashRouter, Routes, Route } from "react-router-dom";
@@ -2439,9 +2439,10 @@ function ModalBuilder(modalProps) {
     ...action
   })))));
 }
-const ErrorLabel = styled.p`
-  color: var(--tina-color-error) !important;
-`;
+const ErrorLabel = ({ style = {}, ...props }) => /* @__PURE__ */ React.createElement("p", {
+  style: { ...style, color: "var(--tina-color-error)" },
+  ...props
+});
 const AsyncButton = ({ name, primary, action }) => {
   const [submitting, setSubmitting] = useState(false);
   const onClick = useCallback(async () => {
@@ -3262,6 +3263,9 @@ var styles = `.tina-tailwind {
 .tina-tailwind .w-56 {
   width: 224px;
 }
+.tina-tailwind .w-\\[15\\%\\] {
+  width: 15%;
+}
 .tina-tailwind .w-0 {
   width: 0px;
 }
@@ -3280,6 +3284,9 @@ var styles = `.tina-tailwind {
 .tina-tailwind .max-w-full {
   max-width: 100%;
 }
+.tina-tailwind .max-w-0 {
+  max-width: 0rem;
+}
 .tina-tailwind .flex-1 {
   flex: 1 1 0%;
 }
@@ -3386,9 +3393,6 @@ var styles = `.tina-tailwind {
 .tina-tailwind .whitespace-normal {
   white-space: normal;
 }
-.tina-tailwind .whitespace-nowrap {
-  white-space: nowrap;
-}
 .tina-tailwind .rounded-lg {
   border-radius: 8px;
 }
@@ -3497,6 +3501,10 @@ var styles = `.tina-tailwind {
   padding-top: 4px;
   padding-bottom: 4px;
 }
+.tina-tailwind .px-3 {
+  padding-left: 12px;
+  padding-right: 12px;
+}
 .tina-tailwind .py-5 {
   padding-top: 20px;
   padding-bottom: 20px;
@@ -3519,6 +3527,9 @@ var styles = `.tina-tailwind {
 .tina-tailwind .pl-3 {
   padding-left: 12px;
 }
+.tina-tailwind .pl-5 {
+  padding-left: 20px;
+}
 .tina-tailwind .pt-3 {
   padding-top: 12px;
 }
@@ -4948,12 +4959,15 @@ const handleNavigate = (navigate, cms, collection, collectionDefinition, documen
   const plugins = cms.plugins.all("tina-admin");
   const routeMapping = plugins.find(({ name }) => name === "route-mapping");
   const tinaPreview = cms.flags.get("tina-preview") || false;
-  const routeOverride = ((_a = collectionDefinition.ui) == null ? void 0 : _a.router) ? (_b = collectionDefinition.ui) == null ? void 0 : _b.router({
+  let routeOverride = ((_a = collectionDefinition.ui) == null ? void 0 : _a.router) ? (_b = collectionDefinition.ui) == null ? void 0 : _b.router({
     document,
     collection: collectionDefinition
   }) : routeMapping ? routeMapping.mapper(collection, document) : void 0;
   if (routeOverride) {
-    tinaPreview ? navigate(`/preview?iframe-url=${encodeURIComponent(routeOverride)}`) : window.location.href = routeOverride;
+    if (routeOverride.startsWith("/")) {
+      routeOverride = routeOverride.slice(1);
+    }
+    tinaPreview ? navigate(`/preview/${routeOverride}`) : window.location.href = routeOverride;
     return null;
   } else {
     navigate(document._sys.breadcrumbs.join("/"));
@@ -5084,34 +5098,36 @@ const CollectionListPage = () => {
           key: `document-${document.node._sys.relativePath}`,
           className: ""
         }, /* @__PURE__ */ React.createElement("td", {
-          className: "px-6 py-2 whitespace-nowrap"
+          className: "pl-5 pr-3 py-2 truncate max-w-0"
         }, /* @__PURE__ */ React.createElement("a", {
-          className: "text-blue-600 hover:text-blue-400 flex items-center gap-3 cursor-pointer",
+          className: "text-blue-600 hover:text-blue-400 flex items-center gap-3 cursor-pointer truncate",
           onClick: () => {
             handleNavigate(navigate, cms, collection, collectionDefinition, document.node);
           }
         }, /* @__PURE__ */ React.createElement(BiEdit, {
-          className: "inline-block h-6 w-auto opacity-70"
-        }), /* @__PURE__ */ React.createElement("span", null, /* @__PURE__ */ React.createElement("span", {
+          className: "inline-block h-6 w-auto flex-shrink-0 opacity-70"
+        }), /* @__PURE__ */ React.createElement("span", {
+          className: "truncate block"
+        }, /* @__PURE__ */ React.createElement("span", {
           className: "block text-xs text-gray-400 mb-1 uppercase"
         }, hasTitle ? "Title" : "Filename"), /* @__PURE__ */ React.createElement("span", {
-          className: "h-5 leading-5 block whitespace-nowrap"
+          className: "h-5 leading-5 block truncate"
         }, subfolders && /* @__PURE__ */ React.createElement("span", {
           className: "text-xs text-gray-400"
         }, `${subfolders}/`), /* @__PURE__ */ React.createElement("span", null, hasTitle ? (_a2 = document.node._sys) == null ? void 0 : _a2.title : document.node._sys.filename))))), hasTitle && /* @__PURE__ */ React.createElement("td", {
-          className: "px-6 py-4 whitespace-nowrap"
+          className: "px-3 py-4 truncate max-w-0 "
         }, /* @__PURE__ */ React.createElement("span", {
           className: "block text-xs text-gray-400 mb-1 uppercase"
         }, "Filename"), /* @__PURE__ */ React.createElement("span", {
-          className: "h-5 leading-5 block text-sm font-medium text-gray-900"
+          className: "h-5 leading-5 block text-sm font-medium text-gray-900 truncate"
         }, document.node._sys.filename)), /* @__PURE__ */ React.createElement("td", {
-          className: "px-6 py-4 whitespace-nowrap"
+          className: "px-3 py-4 truncate w-[15%]"
         }, /* @__PURE__ */ React.createElement("span", {
           className: "block text-xs text-gray-400 mb-1 uppercase"
         }, "Extension"), /* @__PURE__ */ React.createElement("span", {
           className: "h-5 leading-5 block text-sm font-medium text-gray-900"
         }, document.node._sys.extension)), /* @__PURE__ */ React.createElement("td", {
-          className: "px-6 py-4 whitespace-nowrap"
+          className: "px-3 py-4 truncate w-[15%]"
         }, /* @__PURE__ */ React.createElement("span", {
           className: "block text-xs text-gray-400 mb-1 uppercase"
         }, "Template"), /* @__PURE__ */ React.createElement("span", {
@@ -5550,7 +5566,47 @@ const SetPreviewFlag = ({
   }, [preview]);
   return null;
 };
-const TinaAdmin = ({ preview }) => {
+const PreviewInner = ({ preview, config }) => {
+  const params = useParams();
+  const navigate = useNavigate();
+  const [url, setURL] = React.useState(`/${params["*"]}`);
+  const [reportedURL, setReportedURL] = useState(null);
+  const ref = React.useRef(null);
+  const paramURL = `/${params["*"]}`;
+  React.useEffect(() => {
+    if (reportedURL !== paramURL && paramURL) {
+      setURL(paramURL);
+    }
+  }, [paramURL]);
+  React.useEffect(() => {
+    if ((reportedURL !== url || reportedURL !== paramURL) && reportedURL) {
+      navigate(`/preview${reportedURL}`);
+    }
+  }, [reportedURL]);
+  React.useEffect(() => {
+    setInterval(() => {
+      var _a;
+      if (ref.current) {
+        const url2 = new URL(((_a = ref.current.contentWindow) == null ? void 0 : _a.location.href) || "");
+        if (url2.origin === "null") {
+          return;
+        }
+        const href = url2.href.replace(url2.origin, "");
+        setReportedURL(href);
+      }
+    }, 100);
+  }, [ref.current]);
+  const Preview = preview;
+  return /* @__PURE__ */ React.createElement(Preview, {
+    url,
+    iframeRef: ref,
+    ...config
+  });
+};
+const TinaAdmin = ({
+  preview,
+  config
+}) => {
   const isSSR2 = typeof window === "undefined";
   const { edit } = useEditState();
   if (isSSR2) {
@@ -5566,8 +5622,11 @@ const TinaAdmin = ({ preview }) => {
         preview,
         cms
       }), /* @__PURE__ */ React.createElement(Routes, null, preview && /* @__PURE__ */ React.createElement(Route, {
-        path: "preview",
-        element: preview
+        path: "/preview/*",
+        element: /* @__PURE__ */ React.createElement(PreviewInner, {
+          config,
+          preview
+        })
       }), /* @__PURE__ */ React.createElement(Route, {
         path: "collections/:collectionName/new",
         element: /* @__PURE__ */ React.createElement(DefaultWrapper, {

package/dist/index.js

@@ -1,6 +1,6 @@
 (function(global, factory) {
-  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("@tinacms/toolkit"), require("graphql"), require("lodash.set"), require("react"), require("final-form"), require("@tinacms/schema-tools"), require("graphql-tag"), require("yup"), require("styled-components"), require("@tinacms/sharedctx"), require("url-pattern"), require("react-router-dom"), require("@headlessui/react"), require("@react-hook/window-size")) : typeof define === "function" && define.amd ? define(["exports", "@tinacms/toolkit", "graphql", "lodash.set", "react", "final-form", "@tinacms/schema-tools", "graphql-tag", "yup", "styled-components", "@tinacms/sharedctx", "url-pattern", "react-router-dom", "@headlessui/react", "@react-hook/window-size"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.tinacms = {}, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP));
-})(this, function(exports2, toolkit, G, set, React, finalForm, schemaTools, gql$1, yup, styled, sharedctx, UrlPattern, reactRouterDom, react, windowSize) {
+  typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("@tinacms/toolkit"), require("graphql"), require("lodash.set"), require("react"), require("final-form"), require("@tinacms/schema-tools"), require("graphql-tag"), require("yup"), require("@tinacms/sharedctx"), require("url-pattern"), require("react-router-dom"), require("@headlessui/react"), require("@react-hook/window-size")) : typeof define === "function" && define.amd ? define(["exports", "@tinacms/toolkit", "graphql", "lodash.set", "react", "final-form", "@tinacms/schema-tools", "graphql-tag", "yup", "@tinacms/sharedctx", "url-pattern", "react-router-dom", "@headlessui/react", "@react-hook/window-size"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.tinacms = {}, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP, global.NOOP));
+})(this, function(exports2, toolkit, G, set, React, finalForm, schemaTools, gql$1, yup, sharedctx, UrlPattern, reactRouterDom, react, windowSize) {
   "use strict";
   function _interopDefaultLegacy(e) {
     return e && typeof e === "object" && "default" in e ? e : { "default": e };
@@ -30,7 +30,6 @@
   var React__default = /* @__PURE__ */ _interopDefaultLegacy(React);
   var gql__default = /* @__PURE__ */ _interopDefaultLegacy(gql$1);
   var yup__namespace = /* @__PURE__ */ _interopNamespace(yup);
-  var styled__default = /* @__PURE__ */ _interopDefaultLegacy(styled);
   var UrlPattern__default = /* @__PURE__ */ _interopDefaultLegacy(UrlPattern);
   function popupWindow(url, title, window2, w, h) {
     const y = window2.top.outerHeight / 2 + window2.top.screenY - h / 2;
@@ -2457,9 +2456,10 @@ mutation addPendingDocumentMutation(
       ...action
     })))));
   }
-  const ErrorLabel = styled__default["default"].p`
-  color: var(--tina-color-error) !important;
-`;
+  const ErrorLabel = ({ style = {}, ...props }) => /* @__PURE__ */ React__default["default"].createElement("p", {
+    style: { ...style, color: "var(--tina-color-error)" },
+    ...props
+  });
   const AsyncButton = ({ name, primary, action }) => {
     const [submitting, setSubmitting] = React.useState(false);
     const onClick = React.useCallback(async () => {
@@ -3280,6 +3280,9 @@ mutation addPendingDocumentMutation(
 .tina-tailwind .w-56 {
   width: 224px;
 }
+.tina-tailwind .w-\\[15\\%\\] {
+  width: 15%;
+}
 .tina-tailwind .w-0 {
   width: 0px;
 }
@@ -3298,6 +3301,9 @@ mutation addPendingDocumentMutation(
 .tina-tailwind .max-w-full {
   max-width: 100%;
 }
+.tina-tailwind .max-w-0 {
+  max-width: 0rem;
+}
 .tina-tailwind .flex-1 {
   flex: 1 1 0%;
 }
@@ -3404,9 +3410,6 @@ mutation addPendingDocumentMutation(
 .tina-tailwind .whitespace-normal {
   white-space: normal;
 }
-.tina-tailwind .whitespace-nowrap {
-  white-space: nowrap;
-}
 .tina-tailwind .rounded-lg {
   border-radius: 8px;
 }
@@ -3515,6 +3518,10 @@ mutation addPendingDocumentMutation(
   padding-top: 4px;
   padding-bottom: 4px;
 }
+.tina-tailwind .px-3 {
+  padding-left: 12px;
+  padding-right: 12px;
+}
 .tina-tailwind .py-5 {
   padding-top: 20px;
   padding-bottom: 20px;
@@ -3537,6 +3544,9 @@ mutation addPendingDocumentMutation(
 .tina-tailwind .pl-3 {
   padding-left: 12px;
 }
+.tina-tailwind .pl-5 {
+  padding-left: 20px;
+}
 .tina-tailwind .pt-3 {
   padding-top: 12px;
 }
@@ -4966,12 +4976,15 @@ This will work when developing locally but NOT when deployed to production.
     const plugins = cms.plugins.all("tina-admin");
     const routeMapping = plugins.find(({ name }) => name === "route-mapping");
     const tinaPreview = cms.flags.get("tina-preview") || false;
-    const routeOverride = ((_a = collectionDefinition.ui) == null ? void 0 : _a.router) ? (_b = collectionDefinition.ui) == null ? void 0 : _b.router({
+    let routeOverride = ((_a = collectionDefinition.ui) == null ? void 0 : _a.router) ? (_b = collectionDefinition.ui) == null ? void 0 : _b.router({
       document,
       collection: collectionDefinition
     }) : routeMapping ? routeMapping.mapper(collection, document) : void 0;
     if (routeOverride) {
-      tinaPreview ? navigate(`/preview?iframe-url=${encodeURIComponent(routeOverride)}`) : window.location.href = routeOverride;
+      if (routeOverride.startsWith("/")) {
+        routeOverride = routeOverride.slice(1);
+      }
+      tinaPreview ? navigate(`/preview/${routeOverride}`) : window.location.href = routeOverride;
       return null;
     } else {
       navigate(document._sys.breadcrumbs.join("/"));
@@ -5102,34 +5115,36 @@ This will work when developing locally but NOT when deployed to production.
             key: `document-${document.node._sys.relativePath}`,
             className: ""
           }, /* @__PURE__ */ React__default["default"].createElement("td", {
-            className: "px-6 py-2 whitespace-nowrap"
+            className: "pl-5 pr-3 py-2 truncate max-w-0"
           }, /* @__PURE__ */ React__default["default"].createElement("a", {
-            className: "text-blue-600 hover:text-blue-400 flex items-center gap-3 cursor-pointer",
+            className: "text-blue-600 hover:text-blue-400 flex items-center gap-3 cursor-pointer truncate",
             onClick: () => {
               handleNavigate(navigate, cms, collection, collectionDefinition, document.node);
             }
           }, /* @__PURE__ */ React__default["default"].createElement(BiEdit, {
-            className: "inline-block h-6 w-auto opacity-70"
-          }), /* @__PURE__ */ React__default["default"].createElement("span", null, /* @__PURE__ */ React__default["default"].createElement("span", {
+            className: "inline-block h-6 w-auto flex-shrink-0 opacity-70"
+          }), /* @__PURE__ */ React__default["default"].createElement("span", {
+            className: "truncate block"
+          }, /* @__PURE__ */ React__default["default"].createElement("span", {
             className: "block text-xs text-gray-400 mb-1 uppercase"
           }, hasTitle ? "Title" : "Filename"), /* @__PURE__ */ React__default["default"].createElement("span", {
-            className: "h-5 leading-5 block whitespace-nowrap"
+            className: "h-5 leading-5 block truncate"
           }, subfolders && /* @__PURE__ */ React__default["default"].createElement("span", {
             className: "text-xs text-gray-400"
           }, `${subfolders}/`), /* @__PURE__ */ React__default["default"].createElement("span", null, hasTitle ? (_a2 = document.node._sys) == null ? void 0 : _a2.title : document.node._sys.filename))))), hasTitle && /* @__PURE__ */ React__default["default"].createElement("td", {
-            className: "px-6 py-4 whitespace-nowrap"
+            className: "px-3 py-4 truncate max-w-0 "
           }, /* @__PURE__ */ React__default["default"].createElement("span", {
             className: "block text-xs text-gray-400 mb-1 uppercase"
           }, "Filename"), /* @__PURE__ */ React__default["default"].createElement("span", {
-            className: "h-5 leading-5 block text-sm font-medium text-gray-900"
+            className: "h-5 leading-5 block text-sm font-medium text-gray-900 truncate"
           }, document.node._sys.filename)), /* @__PURE__ */ React__default["default"].createElement("td", {
-            className: "px-6 py-4 whitespace-nowrap"
+            className: "px-3 py-4 truncate w-[15%]"
           }, /* @__PURE__ */ React__default["default"].createElement("span", {
             className: "block text-xs text-gray-400 mb-1 uppercase"
           }, "Extension"), /* @__PURE__ */ React__default["default"].createElement("span", {
             className: "h-5 leading-5 block text-sm font-medium text-gray-900"
           }, document.node._sys.extension)), /* @__PURE__ */ React__default["default"].createElement("td", {
-            className: "px-6 py-4 whitespace-nowrap"
+            className: "px-3 py-4 truncate w-[15%]"
           }, /* @__PURE__ */ React__default["default"].createElement("span", {
             className: "block text-xs text-gray-400 mb-1 uppercase"
           }, "Template"), /* @__PURE__ */ React__default["default"].createElement("span", {
@@ -5568,7 +5583,47 @@ This will work when developing locally but NOT when deployed to production.
     }, [preview]);
     return null;
   };
-  const TinaAdmin = ({ preview }) => {
+  const PreviewInner = ({ preview, config }) => {
+    const params = reactRouterDom.useParams();
+    const navigate = reactRouterDom.useNavigate();
+    const [url, setURL] = React__default["default"].useState(`/${params["*"]}`);
+    const [reportedURL, setReportedURL] = React.useState(null);
+    const ref = React__default["default"].useRef(null);
+    const paramURL = `/${params["*"]}`;
+    React__default["default"].useEffect(() => {
+      if (reportedURL !== paramURL && paramURL) {
+        setURL(paramURL);
+      }
+    }, [paramURL]);
+    React__default["default"].useEffect(() => {
+      if ((reportedURL !== url || reportedURL !== paramURL) && reportedURL) {
+        navigate(`/preview${reportedURL}`);
+      }
+    }, [reportedURL]);
+    React__default["default"].useEffect(() => {
+      setInterval(() => {
+        var _a;
+        if (ref.current) {
+          const url2 = new URL(((_a = ref.current.contentWindow) == null ? void 0 : _a.location.href) || "");
+          if (url2.origin === "null") {
+            return;
+          }
+          const href = url2.href.replace(url2.origin, "");
+          setReportedURL(href);
+        }
+      }, 100);
+    }, [ref.current]);
+    const Preview = preview;
+    return /* @__PURE__ */ React__default["default"].createElement(Preview, {
+      url,
+      iframeRef: ref,
+      ...config
+    });
+  };
+  const TinaAdmin = ({
+    preview,
+    config
+  }) => {
     const isSSR2 = typeof window === "undefined";
     const { edit } = sharedctx.useEditState();
     if (isSSR2) {
@@ -5584,8 +5639,11 @@ This will work when developing locally but NOT when deployed to production.
           preview,
           cms
         }), /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Routes, null, preview && /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Route, {
-          path: "preview",
-          element: preview
+          path: "/preview/*",
+          element: /* @__PURE__ */ React__default["default"].createElement(PreviewInner, {
+            config,
+            preview
+          })
         }), /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Route, {
           path: "collections/:collectionName/new",
           element: /* @__PURE__ */ React__default["default"].createElement(DefaultWrapper, {
@@ -5657,6 +5715,18 @@ This will work when developing locally but NOT when deployed to production.
   const defineStaticConfig = (config) => {
     return config;
   };
+  Object.defineProperty(exports2, "NAMER", {
+    enumerable: true,
+    get: function() {
+      return schemaTools.NAMER;
+    }
+  });
+  Object.defineProperty(exports2, "resolveForm", {
+    enumerable: true,
+    get: function() {
+      return schemaTools.resolveForm;
+    }
+  });
   exports2.AuthWallInner = AuthWallInner;
   exports2.Client = Client;
   exports2.DEFAULT_LOCAL_TINA_GQL_SERVER_URL = DEFAULT_LOCAL_TINA_GQL_SERVER_URL;

package/dist/react.es.js

@@ -1,17 +1,19 @@
 import React from "react";
 function useTina(props) {
   const [data, setData] = React.useState(props.data);
+  const id = JSON.stringify({ query: props.query, variables: props.variables });
+  React.useEffect(() => {
+    setData(props.data);
+  }, [id]);
   React.useEffect(() => {
-    const id = btoa(JSON.stringify({ query: props.query }));
     parent.postMessage({ type: "open", ...props, id }, window.location.origin);
     window.addEventListener("message", (event) => {
-      if (event.data.id === id) {
-        console.log("child: event received");
+      if (event.data.id === id && event.data.type === "updateData") {
         setData(event.data.data);
       }
     });
     return () => parent.postMessage({ type: "close", id }, window.location.origin);
-  }, []);
+  }, [id]);
   return { data };
 }
 export { useTina };

package/dist/react.js

@@ -8,17 +8,19 @@
   var React__default = /* @__PURE__ */ _interopDefaultLegacy(React);
   function useTina(props) {
     const [data, setData] = React__default["default"].useState(props.data);
+    const id = JSON.stringify({ query: props.query, variables: props.variables });
+    React__default["default"].useEffect(() => {
+      setData(props.data);
+    }, [id]);
     React__default["default"].useEffect(() => {
-      const id = btoa(JSON.stringify({ query: props.query }));
       parent.postMessage({ type: "open", ...props, id }, window.location.origin);
       window.addEventListener("message", (event) => {
-        if (event.data.id === id) {
-          console.log("child: event received");
+        if (event.data.id === id && event.data.type === "updateData") {
           setData(event.data.data);
         }
       });
       return () => parent.postMessage({ type: "close", id }, window.location.origin);
-    }, []);
+    }, [id]);
     return { data };
   }
   exports2.useTina = useTina;

package/dist/style.css

@@ -462,6 +462,9 @@
 .tina-tailwind .w-56 {
   width: 224px;
 }
+.tina-tailwind .w-\[15\%\] {
+  width: 15%;
+}
 .tina-tailwind .w-0 {
   width: 0px;
 }
@@ -480,6 +483,9 @@
 .tina-tailwind .max-w-full {
   max-width: 100%;
 }
+.tina-tailwind .max-w-0 {
+  max-width: 0rem;
+}
 .tina-tailwind .flex-1 {
   flex: 1 1 0%;
 }
@@ -586,9 +592,6 @@
 .tina-tailwind .whitespace-normal {
   white-space: normal;
 }
-.tina-tailwind .whitespace-nowrap {
-  white-space: nowrap;
-}
 .tina-tailwind .rounded-lg {
   border-radius: 8px;
 }
@@ -697,6 +700,10 @@
   padding-top: 4px;
   padding-bottom: 4px;
 }
+.tina-tailwind .px-3 {
+  padding-left: 12px;
+  padding-right: 12px;
+}
 .tina-tailwind .py-5 {
   padding-top: 20px;
   padding-bottom: 20px;
@@ -719,6 +726,9 @@
 .tina-tailwind .pl-3 {
   padding-left: 12px;
 }
+.tina-tailwind .pl-5 {
+  padding-left: 20px;
+}
 .tina-tailwind .pt-3 {
   padding-top: 12px;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tinacms",
-  "version": "0.69.16",
+  "version": "0.69.18",
   "main": "dist/index.js",
   "module": "./dist/index.es.js",
   "exports": {
@@ -56,11 +56,11 @@
     "@react-hook/window-size": "^3.0.7",
     "@tinacms/schema-tools": "0.1.8",
     "@tinacms/sharedctx": "0.1.3",
-    "@tinacms/toolkit": "0.57.12",
+    "@tinacms/toolkit": "0.58.1",
     "crypto-js": "^4.0.0",
     "fetch-ponyfill": "^7.1.0",
     "final-form": "4.20.1",
-    "graphql": "^15.1.0",
+    "graphql": "15.8.0",
     "graphql-tag": "^2.11.0",
     "lodash.set": "^4.3.2",
     "prism-react-renderer": "^1.3.5",
@@ -75,7 +75,7 @@
     "@testing-library/react": "^12.0.0",
     "@testing-library/react-hooks": "^7.0.2",
     "@testing-library/user-event": "^12.7.0",
-    "@tinacms/scripts": "0.51.1",
+    "@tinacms/scripts": "0.51.3",
     "@types/jest": "^27.0.1",
     "@types/lodash": "^4.14.169",
     "@types/node": "^14.0.13",
@@ -89,14 +89,12 @@
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "react-is": "^17.0.2",
-    "styled-components": "^5.2.0",
     "typescript": "4.3.5"
   },
   "peerDependencies": {
     "react": ">=16.14.0",
     "react-dom": ">=16.14.0",
-    "react-is": "^16.13.1 || <18.0.0",
-    "styled-components": "*"
+    "react-is": "^16.13.1 || <18.0.0"
   },
   "publishConfig": {
     "registry": "https://registry.npmjs.org"