tinacms 2.2.0 → 2.2.2

package/dist/cache/index.d.ts

@@ -0,0 +1,6 @@
+export { NodeCache } from './node-cache';
+export type Cache = {
+    get: (key: string) => Promise<any>;
+    makeKey: (key: any) => string;
+    set: (key: string, value: any) => Promise<void>;
+};

package/dist/cache/node-cache.d.ts

@@ -0,0 +1,2 @@
+import type { Cache } from './index';
+export declare const NodeCache: (dir: string, fs: any) => Cache;

package/dist/cache.d.ts

@@ -0,0 +1,4 @@
+/**
+
+*/
+export * from './cache/index';

package/dist/cache.js

@@ -0,0 +1,36 @@
+(function(global, factory) {
+  typeof exports === "object" && typeof module !== "undefined" ? factory(exports) : typeof define === "function" && define.amd ? define(["exports"], factory) : (global = typeof globalThis !== "undefined" ? globalThis : global || self, factory(global.tinacms = {}));
+})(this, function(exports2) {
+  "use strict";
+  const { createHash } = require("crypto");
+  const makeKey = (key) => {
+    const input = key && key instanceof Object ? JSON.stringify(key) : key || "";
+    return createHash("sha256").update(input).digest("hex");
+  };
+  const NodeCache = (dir, fs) => {
+    return {
+      makeKey,
+      get: async (key) => {
+        try {
+          const data = await fs.promises.readFile(`${dir}/${key}`, "utf-8");
+          return JSON.parse(data);
+        } catch (e) {
+          if (e.code === "ENOENT") {
+            return void 0;
+          }
+          throw e;
+        }
+      },
+      set: async (key, value) => {
+        await fs.promises.mkdir(dir, { recursive: true });
+        await fs.promises.writeFile(
+          `${dir}/${key}`,
+          JSON.stringify(value),
+          "utf-8"
+        );
+      }
+    };
+  };
+  exports2.NodeCache = NodeCache;
+  Object.defineProperty(exports2, Symbol.toStringTag, { value: "Module" });
+});

package/dist/cache.mjs

@@ -0,0 +1,32 @@
+const { createHash } = require("crypto");
+const makeKey = (key) => {
+  const input = key && key instanceof Object ? JSON.stringify(key) : key || "";
+  return createHash("sha256").update(input).digest("hex");
+};
+const NodeCache = (dir, fs) => {
+  return {
+    makeKey,
+    get: async (key) => {
+      try {
+        const data = await fs.promises.readFile(`${dir}/${key}`, "utf-8");
+        return JSON.parse(data);
+      } catch (e) {
+        if (e.code === "ENOENT") {
+          return void 0;
+        }
+        throw e;
+      }
+    },
+    set: async (key, value) => {
+      await fs.promises.mkdir(dir, { recursive: true });
+      await fs.promises.writeFile(
+        `${dir}/${key}`,
+        JSON.stringify(value),
+        "utf-8"
+      );
+    }
+  };
+};
+export {
+  NodeCache
+};

package/dist/client.js

@@ -11,12 +11,17 @@
       token,
       url,
       queries,
-      errorPolicy
+      errorPolicy,
+      cacheDir
     }) {
       this.apiUrl = url;
       this.readonlyToken = token == null ? void 0 : token.trim();
       this.queries = queries(this);
       this.errorPolicy = errorPolicy || "throw";
+      if (cacheDir && typeof require !== "undefined") {
+        const { NodeCache } = require("tinacms/dist/cache");
+        this.cache = NodeCache(cacheDir, require("fs"));
+      }
     }
     async request({ errorPolicy, ...args }, options) {
       var _a;
@@ -28,8 +33,8 @@
       headers.append("Content-Type", "application/json");
       if (options == null ? void 0 : options.fetchOptions) {
         if ((_a = options == null ? void 0 : options.fetchOptions) == null ? void 0 : _a.headers) {
-          Object.entries(options.fetchOptions.headers).forEach(([key, value]) => {
-            headers.append(key, value);
+          Object.entries(options.fetchOptions.headers).forEach(([key2, value]) => {
+            headers.append(key2, value);
           });
         }
       }
@@ -46,6 +51,14 @@
         redirect: "follow",
         ...providedFetchOptions
       };
+      let key = "";
+      if (this.cache) {
+        key = this.cache.makeKey(bodyString);
+        const value = await this.cache.get(key);
+        if (value) {
+          return value;
+        }
+      }
       const res = await fetchDefined(url, optionsObject);
       if (!res.ok) {
         let additionalInfo = "";
@@ -64,11 +77,15 @@
 	${json.errors.map((error) => error.message).join("\n")}`
         );
       }
-      return {
+      const result = {
         data: json == null ? void 0 : json.data,
         errors: (json == null ? void 0 : json.errors) || null,
         query: args.query
       };
+      if (this.cache) {
+        await this.cache.set(key, result);
+      }
+      return result;
     }
   }
   function createClient(args) {

package/dist/client.mjs

@@ -8,12 +8,17 @@ class TinaClient {
     token,
     url,
     queries,
-    errorPolicy
+    errorPolicy,
+    cacheDir
   }) {
     this.apiUrl = url;
     this.readonlyToken = token == null ? void 0 : token.trim();
     this.queries = queries(this);
     this.errorPolicy = errorPolicy || "throw";
+    if (cacheDir && typeof require !== "undefined") {
+      const { NodeCache } = require("tinacms/dist/cache");
+      this.cache = NodeCache(cacheDir, require("fs"));
+    }
   }
   async request({ errorPolicy, ...args }, options) {
     var _a;
@@ -25,8 +30,8 @@ class TinaClient {
     headers.append("Content-Type", "application/json");
     if (options == null ? void 0 : options.fetchOptions) {
       if ((_a = options == null ? void 0 : options.fetchOptions) == null ? void 0 : _a.headers) {
-        Object.entries(options.fetchOptions.headers).forEach(([key, value]) => {
-          headers.append(key, value);
+        Object.entries(options.fetchOptions.headers).forEach(([key2, value]) => {
+          headers.append(key2, value);
         });
       }
     }
@@ -43,6 +48,14 @@ class TinaClient {
       redirect: "follow",
       ...providedFetchOptions
     };
+    let key = "";
+    if (this.cache) {
+      key = this.cache.makeKey(bodyString);
+      const value = await this.cache.get(key);
+      if (value) {
+        return value;
+      }
+    }
     const res = await fetchDefined(url, optionsObject);
     if (!res.ok) {
       let additionalInfo = "";
@@ -61,11 +74,15 @@ class TinaClient {
 	${json.errors.map((error) => error.message).join("\n")}`
       );
     }
-    return {
+    const result = {
       data: json == null ? void 0 : json.data,
       errors: (json == null ? void 0 : json.errors) || null,
       query: args.query
     };
+    if (this.cache) {
+      await this.cache.set(key, result);
+    }
+    return result;
   }
 }
 function createClient(args) {

package/dist/index.js

@@ -2745,13 +2745,13 @@ var __publicField = (obj, key, value) => {
                   {
                     type: "string",
                     label: "Alt",
-                    name: [templateName, "alt"].join("."),
+                    name: [templateName.replace(/\.props$/, ""), "alt"].join("."),
                     component: "text"
                   },
                   {
                     type: "string",
                     label: "Caption",
-                    name: [templateName, "caption"].join("."),
+                    name: [templateName.replace(/\.props$/, ""), "caption"].join("."),
                     component: "text"
                   }
                 ]
@@ -4508,6 +4508,26 @@ var __publicField = (obj, key, value) => {
     }
   ));
   CommandItem.displayName = cmdk.Command.Item.displayName;
+  const OptionComponent = ({
+    id,
+    value,
+    field,
+    _values,
+    node,
+    onSelect
+  }) => {
+    return /* @__PURE__ */ React.createElement(
+      CommandItem,
+      {
+        key: `${id}-option`,
+        value: id,
+        onSelect: (currentValue) => {
+          onSelect(currentValue === value ? "" : currentValue);
+        }
+      },
+      /* @__PURE__ */ React.createElement("div", { className: "flex flex-col w-full" }, (field == null ? void 0 : field.optionComponent) && _values ? field.optionComponent(_values, node._internalSys) : /* @__PURE__ */ React.createElement("span", { className: "text-x" }, id))
+    );
+  };
   const Popover = PopoverPrimitive__namespace.Root;
   const PopoverTrigger = PopoverPrimitive__namespace.Trigger;
   const PopoverContent = React__namespace.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ React__namespace.createElement(PopoverPrimitive__namespace.Portal, null, /* @__PURE__ */ React__namespace.createElement(
@@ -4520,7 +4540,7 @@ var __publicField = (obj, key, value) => {
       side: "bottom",
       className: cn(
         "rounded-md border bg-white p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-        "max-h-[30vh] overflow-y-auto",
+        "max-h-[30vh] max-w-[30vh] overflow-y-auto",
         className
       ),
       ...props
@@ -4549,6 +4569,7 @@ var __publicField = (obj, key, value) => {
                         _values
                         _internalSys: _sys {
                           filename
+                          path
                         }
                       }
                     }
@@ -4598,10 +4619,16 @@ var __publicField = (obj, key, value) => {
     const [value, setValue] = React__namespace.useState(input.value);
     const [displayText, setDisplayText] = React__namespace.useState(null);
     const { optionSets, loading } = useGetOptionSets(cms, field.collections);
+    const [filteredOptionsList, setFilteredOptionsList] = React__namespace.useState(optionSets);
     React__namespace.useEffect(() => {
       setDisplayText(getFilename(optionSets, value));
       input.onChange(value);
     }, [value, input, optionSets]);
+    React__namespace.useEffect(() => {
+      if (field.experimental___filter && optionSets.length > 0) {
+        setFilteredOptionsList(field.experimental___filter(optionSets, void 0));
+      }
+    }, [optionSets, field.experimental___filter]);
     if (loading === true) {
       return /* @__PURE__ */ React__namespace.createElement(LoadingDots, { color: "var(--tina-color-primary)" });
     }
@@ -4618,41 +4645,52 @@ var __publicField = (obj, key, value) => {
     )), /* @__PURE__ */ React__namespace.createElement(PopoverContent, { className: "p-0 relative" }, /* @__PURE__ */ React__namespace.createElement(
       Command,
       {
+        shouldFilter: !field.experimental___filter,
         filter: (value2, search) => {
-          if (value2.includes(search))
+          if (value2.toLowerCase().replace(/\//g, "").includes(search.toLowerCase()))
             return 1;
           return 0;
         }
       },
-      /* @__PURE__ */ React__namespace.createElement(CommandInput, { placeholder: "Search reference..." }),
+      /* @__PURE__ */ React__namespace.createElement(
+        CommandInput,
+        {
+          placeholder: "Search reference...",
+          onValueChange: (search) => {
+            if (field.experimental___filter) {
+              setFilteredOptionsList(
+                field.experimental___filter(optionSets, search)
+              );
+            }
+          }
+        }
+      ),
       /* @__PURE__ */ React__namespace.createElement(CommandEmpty, null, "No reference found"),
-      /* @__PURE__ */ React__namespace.createElement(CommandList, null, optionSets.length > 0 && optionSets.map(({ collection, edges }) => /* @__PURE__ */ React__namespace.createElement(
+      /* @__PURE__ */ React__namespace.createElement(CommandList, null, filteredOptionsList.length > 0 && (filteredOptionsList == null ? void 0 : filteredOptionsList.map(({ collection, edges }) => /* @__PURE__ */ React__namespace.createElement(
         CommandGroup,
         {
           key: `${collection}-group`,
           heading: collection
         },
-        /* @__PURE__ */ React__namespace.createElement(CommandList, null, edges.map(
-          ({
-            node: {
-              id,
-              _internalSys: { filename },
-              _values: { title, name }
-            }
-          }) => /* @__PURE__ */ React__namespace.createElement(
-            CommandItem,
+        /* @__PURE__ */ React__namespace.createElement(CommandList, null, edges == null ? void 0 : edges.map(({ node }) => {
+          const { id, _values } = node;
+          return /* @__PURE__ */ React__namespace.createElement(
+            OptionComponent,
             {
-              key: `${id}-option`,
-              value: id || title,
-              onSelect: () => {
-                setValue(id);
+              id,
+              key: id,
+              value,
+              field,
+              _values,
+              node,
+              onSelect: (currentValue) => {
+                setValue(currentValue);
                 setOpen(false);
               }
-            },
-            /* @__PURE__ */ React__namespace.createElement("div", { className: "flex flex-col" }, /* @__PURE__ */ React__namespace.createElement("span", { className: "font-semibold text-sm" }, title || name || id), (title || name) && /* @__PURE__ */ React__namespace.createElement("span", { className: "text-x" }, filename))
-          )
-        ))
-      )))
+            }
+          );
+        }))
+      ))))
     ))));
   };
   const useGetNode = (cms, id) => {
@@ -5814,19 +5852,17 @@ var __publicField = (obj, key, value) => {
         return "Required";
     }
   };
-  const TextareaField = wrapFieldsWithMeta(
-    (props) => {
-      const ref = React__namespace.useRef(null);
-      React__namespace.useEffect(() => {
-        if (ref.current && props.field.experimental_focusIntent) {
-          const el = ref.current;
-          el.focus();
-          el.setSelectionRange(el.value.length, el.value.length);
-        }
-      }, [props.field.experimental_focusIntent, ref]);
-      return /* @__PURE__ */ React__namespace.createElement(TextArea, { ref, ...props.input });
-    }
-  );
+  const TextareaField = wrapFieldsWithMeta((props) => {
+    const ref = React__namespace.useRef(null);
+    React__namespace.useEffect(() => {
+      if (ref.current && props.field.experimental_focusIntent) {
+        const el = ref.current;
+        el.focus();
+        el.setSelectionRange(el.value.length, el.value.length);
+      }
+    }, [props.field.experimental_focusIntent, ref]);
+    return /* @__PURE__ */ React__namespace.createElement(TextArea, { ref, ...props.input });
+  });
   const TextareaFieldPlugin = {
     name: "textarea",
     Component: TextareaField,
@@ -10684,6 +10720,7 @@ var __publicField = (obj, key, value) => {
         setLoadFolders(true);
         resetOffset();
         resetList();
+        setActiveItem(false);
       } else {
         setActiveItem(item);
       }
@@ -10846,6 +10883,7 @@ var __publicField = (obj, key, value) => {
           setLoadFolders(true);
           resetOffset();
           resetList();
+          setActiveItem(false);
         }
       }
     )), cms.media.store.isStatic ? null : /* @__PURE__ */ React.createElement("div", { className: "flex flex-wrap items-center gap-4" }, /* @__PURE__ */ React.createElement(
@@ -10857,6 +10895,7 @@ var __publicField = (obj, key, value) => {
           setRefreshing(true);
           resetOffset();
           resetList();
+          setActiveItem(false);
         },
         className: "whitespace-nowrap"
       },
@@ -31187,7 +31226,8 @@ This will work when developing locally but NOT when deployed to production.
     )), /* @__PURE__ */ React.createElement("div", { className: "flex w-full md:w-auto gap-3" }, /* @__PURE__ */ React.createElement(
       Button$1,
       {
-        onClick: () => {
+        onClick: (e) => {
+          e.preventDefault();
           setSearch(searchInput);
           setSearchLoaded(false);
         },
@@ -31199,7 +31239,8 @@ This will work when developing locally but NOT when deployed to production.
     ), search && searchLoaded && /* @__PURE__ */ React.createElement(
       Button$1,
       {
-        onClick: () => {
+        onClick: (e) => {
+          e.preventDefault();
           setSearch("");
           setSearchInput("");
         },
@@ -32576,7 +32617,6 @@ This will work when developing locally but NOT when deployed to production.
   exports2.TextArea = TextArea;
   exports2.TextField = TextField;
   exports2.TextFieldPlugin = TextFieldPlugin;
-  exports2.TextareaField = TextareaField;
   exports2.TextareaFieldPlugin = TextareaFieldPlugin;
   exports2.Tina = Tina;
   exports2.TinaAdmin = TinaAdmin;

package/dist/index.mjs

@@ -2768,13 +2768,13 @@ class Form {
                 {
                   type: "string",
                   label: "Alt",
-                  name: [templateName, "alt"].join("."),
+                  name: [templateName.replace(/\.props$/, ""), "alt"].join("."),
                   component: "text"
                 },
                 {
                   type: "string",
                   label: "Caption",
-                  name: [templateName, "caption"].join("."),
+                  name: [templateName.replace(/\.props$/, ""), "caption"].join("."),
                   component: "text"
                 }
               ]
@@ -4531,6 +4531,26 @@ const CommandItem = React.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 CommandItem.displayName = Command$1.Item.displayName;
+const OptionComponent = ({
+  id,
+  value,
+  field,
+  _values,
+  node,
+  onSelect
+}) => {
+  return /* @__PURE__ */ React__default.createElement(
+    CommandItem,
+    {
+      key: `${id}-option`,
+      value: id,
+      onSelect: (currentValue) => {
+        onSelect(currentValue === value ? "" : currentValue);
+      }
+    },
+    /* @__PURE__ */ React__default.createElement("div", { className: "flex flex-col w-full" }, (field == null ? void 0 : field.optionComponent) && _values ? field.optionComponent(_values, node._internalSys) : /* @__PURE__ */ React__default.createElement("span", { className: "text-x" }, id))
+  );
+};
 const Popover = PopoverPrimitive.Root;
 const PopoverTrigger = PopoverPrimitive.Trigger;
 const PopoverContent = React.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ React.createElement(PopoverPrimitive.Portal, null, /* @__PURE__ */ React.createElement(
@@ -4543,7 +4563,7 @@ const PopoverContent = React.forwardRef(({ className, align = "center", sideOffs
     side: "bottom",
     className: cn(
       "rounded-md border bg-white p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-      "max-h-[30vh] overflow-y-auto",
+      "max-h-[30vh] max-w-[30vh] overflow-y-auto",
       className
     ),
     ...props
@@ -4572,6 +4592,7 @@ const useGetOptionSets = (cms, collections) => {
                         _values
                         _internalSys: _sys {
                           filename
+                          path
                         }
                       }
                     }
@@ -4621,10 +4642,16 @@ const ComboboxDemo = ({
   const [value, setValue] = React.useState(input.value);
   const [displayText, setDisplayText] = React.useState(null);
   const { optionSets, loading } = useGetOptionSets(cms, field.collections);
+  const [filteredOptionsList, setFilteredOptionsList] = React.useState(optionSets);
   React.useEffect(() => {
     setDisplayText(getFilename(optionSets, value));
     input.onChange(value);
   }, [value, input, optionSets]);
+  React.useEffect(() => {
+    if (field.experimental___filter && optionSets.length > 0) {
+      setFilteredOptionsList(field.experimental___filter(optionSets, void 0));
+    }
+  }, [optionSets, field.experimental___filter]);
   if (loading === true) {
     return /* @__PURE__ */ React.createElement(LoadingDots, { color: "var(--tina-color-primary)" });
   }
@@ -4641,41 +4668,52 @@ const ComboboxDemo = ({
   )), /* @__PURE__ */ React.createElement(PopoverContent, { className: "p-0 relative" }, /* @__PURE__ */ React.createElement(
     Command,
     {
+      shouldFilter: !field.experimental___filter,
       filter: (value2, search) => {
-        if (value2.includes(search))
+        if (value2.toLowerCase().replace(/\//g, "").includes(search.toLowerCase()))
           return 1;
         return 0;
       }
     },
-    /* @__PURE__ */ React.createElement(CommandInput, { placeholder: "Search reference..." }),
+    /* @__PURE__ */ React.createElement(
+      CommandInput,
+      {
+        placeholder: "Search reference...",
+        onValueChange: (search) => {
+          if (field.experimental___filter) {
+            setFilteredOptionsList(
+              field.experimental___filter(optionSets, search)
+            );
+          }
+        }
+      }
+    ),
     /* @__PURE__ */ React.createElement(CommandEmpty, null, "No reference found"),
-    /* @__PURE__ */ React.createElement(CommandList, null, optionSets.length > 0 && optionSets.map(({ collection, edges }) => /* @__PURE__ */ React.createElement(
+    /* @__PURE__ */ React.createElement(CommandList, null, filteredOptionsList.length > 0 && (filteredOptionsList == null ? void 0 : filteredOptionsList.map(({ collection, edges }) => /* @__PURE__ */ React.createElement(
       CommandGroup,
       {
         key: `${collection}-group`,
         heading: collection
       },
-      /* @__PURE__ */ React.createElement(CommandList, null, edges.map(
-        ({
-          node: {
-            id,
-            _internalSys: { filename },
-            _values: { title, name }
-          }
-        }) => /* @__PURE__ */ React.createElement(
-          CommandItem,
+      /* @__PURE__ */ React.createElement(CommandList, null, edges == null ? void 0 : edges.map(({ node }) => {
+        const { id, _values } = node;
+        return /* @__PURE__ */ React.createElement(
+          OptionComponent,
           {
-            key: `${id}-option`,
-            value: id || title,
-            onSelect: () => {
-              setValue(id);
+            id,
+            key: id,
+            value,
+            field,
+            _values,
+            node,
+            onSelect: (currentValue) => {
+              setValue(currentValue);
               setOpen(false);
             }
-          },
-          /* @__PURE__ */ React.createElement("div", { className: "flex flex-col" }, /* @__PURE__ */ React.createElement("span", { className: "font-semibold text-sm" }, title || name || id), (title || name) && /* @__PURE__ */ React.createElement("span", { className: "text-x" }, filename))
-        )
-      ))
-    )))
+          }
+        );
+      }))
+    ))))
   ))));
 };
 const useGetNode = (cms, id) => {
@@ -5837,19 +5875,17 @@ const RadioGroupFieldPlugin = {
       return "Required";
   }
 };
-const TextareaField = wrapFieldsWithMeta(
-  (props) => {
-    const ref = React.useRef(null);
-    React.useEffect(() => {
-      if (ref.current && props.field.experimental_focusIntent) {
-        const el = ref.current;
-        el.focus();
-        el.setSelectionRange(el.value.length, el.value.length);
-      }
-    }, [props.field.experimental_focusIntent, ref]);
-    return /* @__PURE__ */ React.createElement(TextArea, { ref, ...props.input });
-  }
-);
+const TextareaField = wrapFieldsWithMeta((props) => {
+  const ref = React.useRef(null);
+  React.useEffect(() => {
+    if (ref.current && props.field.experimental_focusIntent) {
+      const el = ref.current;
+      el.focus();
+      el.setSelectionRange(el.value.length, el.value.length);
+    }
+  }, [props.field.experimental_focusIntent, ref]);
+  return /* @__PURE__ */ React.createElement(TextArea, { ref, ...props.input });
+});
 const TextareaFieldPlugin = {
   name: "textarea",
   Component: TextareaField,
@@ -10707,6 +10743,7 @@ function MediaPicker({
       setLoadFolders(true);
       resetOffset();
       resetList();
+      setActiveItem(false);
     } else {
       setActiveItem(item);
     }
@@ -10869,6 +10906,7 @@ function MediaPicker({
         setLoadFolders(true);
         resetOffset();
         resetList();
+        setActiveItem(false);
       }
     }
   )), cms.media.store.isStatic ? null : /* @__PURE__ */ React__default.createElement("div", { className: "flex flex-wrap items-center gap-4" }, /* @__PURE__ */ React__default.createElement(
@@ -10880,6 +10918,7 @@ function MediaPicker({
         setRefreshing(true);
         resetOffset();
         resetList();
+        setActiveItem(false);
       },
       className: "whitespace-nowrap"
     },
@@ -31210,7 +31249,8 @@ const SearchInput = ({
   )), /* @__PURE__ */ React__default.createElement("div", { className: "flex w-full md:w-auto gap-3" }, /* @__PURE__ */ React__default.createElement(
     Button$1,
     {
-      onClick: () => {
+      onClick: (e) => {
+        e.preventDefault();
         setSearch(searchInput);
         setSearchLoaded(false);
       },
@@ -31222,7 +31262,8 @@ const SearchInput = ({
   ), search && searchLoaded && /* @__PURE__ */ React__default.createElement(
     Button$1,
     {
-      onClick: () => {
+      onClick: (e) => {
+        e.preventDefault();
         setSearch("");
         setSearchInput("");
       },
@@ -32593,7 +32634,6 @@ export {
   TextArea,
   TextField,
   TextFieldPlugin,
-  TextareaField,
   TextareaFieldPlugin,
   Tina,
   TinaAdmin,

package/dist/rich-text/index.js

@@ -104,7 +104,7 @@
           const Component2 = components[child.type];
           return /* @__PURE__ */ React.createElement(Component2, { ...props });
         }
-        return /* @__PURE__ */ React.createElement("img", { src: child.url, alt: child.caption });
+        return /* @__PURE__ */ React.createElement("img", { src: child.url, alt: child.alt });
       case "a":
         if (components[child.type]) {
           const Component2 = components[child.type];

package/dist/rich-text/index.mjs

@@ -101,7 +101,7 @@ const Node = ({ components, child }) => {
         const Component2 = components[child.type];
         return /* @__PURE__ */ React.createElement(Component2, { ...props });
       }
-      return /* @__PURE__ */ React.createElement("img", { src: child.url, alt: child.caption });
+      return /* @__PURE__ */ React.createElement("img", { src: child.url, alt: child.alt });
     case "a":
       if (components[child.type]) {
         const Component2 = components[child.type];

package/dist/toolkit/fields/components/reference/components/option-component.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { OptionComponentProps } from '../model/option-component-props';
+declare const OptionComponent: React.FC<OptionComponentProps>;
+export default OptionComponent;

package/dist/toolkit/fields/components/reference/index.d.ts

@@ -3,7 +3,16 @@ type Option = {
     value: string;
     label: string;
 };
-export interface ReferenceFieldProps {
+type ReferenceFieldOptions = {
+    optionComponent?: OptionComponent;
+    experimental___filter?: (list: Array<any>, searchQuery: string) => Array<any>;
+};
+type OptionComponent = (props: unknown, _sys: InternalSys) => React.ReactElement | string;
+export interface InternalSys {
+    filename: string;
+    path: string;
+}
+export interface ReferenceFieldProps extends ReferenceFieldOptions {
     label?: string;
     name: string;
     component: string;

package/dist/toolkit/fields/components/reference/model/option-component-props.d.ts

@@ -0,0 +1,13 @@
+import { InternalSys } from './reference-field-props';
+export interface OptionComponentProps {
+    id: string;
+    value: string;
+    field?: {
+        optionComponent?: (values: unknown, internalSys: InternalSys) => React.ReactNode;
+    };
+    _values?: unknown;
+    node: {
+        _internalSys: InternalSys;
+    };
+    onSelect: (currentValue: string) => void;
+}

package/dist/toolkit/fields/components/reference/model/reference-field-props.d.ts

@@ -0,0 +1,21 @@
+export type Option = {
+    value: string;
+    label: string;
+};
+type OptionComponent = (props: unknown, _sys: InternalSys) => React.ReactElement | string;
+export interface InternalSys {
+    filename: string;
+    path: string;
+}
+type ReferenceFieldOptions = {
+    optionComponent?: OptionComponent;
+    experimental___filter?: (list: Array<any>, searchQuery: string) => Array<any>;
+};
+export interface ReferenceFieldProps extends ReferenceFieldOptions {
+    label?: string;
+    name: string;
+    component: string;
+    collections: string[];
+    options: (Option | string)[];
+}
+export {};

package/dist/toolkit/fields/components/reference/model/reference-link-props.d.ts

@@ -0,0 +1,16 @@
+import { TinaCMS } from '../../../../tina-cms';
+export interface ReferenceLinkProps {
+    cms: TinaCMS;
+    input: any;
+}
+export type Document = {
+    _sys: {
+        collection: {
+            name: string;
+        };
+        breadcrumbs: string[];
+    };
+};
+export interface Response {
+    node: Document;
+}

package/dist/toolkit/fields/components/reference/model/reference-props.d.ts

@@ -0,0 +1,8 @@
+import { ReferenceFieldProps, Option } from './reference-field-props';
+export interface ReferenceProps {
+    name: string;
+    input: any;
+    field: ReferenceFieldProps;
+    disabled?: boolean;
+    options?: (Option | string)[];
+}

package/dist/toolkit/fields/components/reference/reference-link.d.ts

@@ -1,8 +1,4 @@
 import * as React from 'react';
-import type { TinaCMS } from '../../../tina-cms';
-interface ReferenceLinkProps {
-    cms: TinaCMS;
-    input: any;
-}
+import { ReferenceLinkProps } from './model/reference-link-props';
 declare const ReferenceLink: React.FC<ReferenceLinkProps>;
 export default ReferenceLink;

package/dist/toolkit/fields/components/reference/reference-select.d.ts

@@ -1,7 +1,7 @@
-import { Field } from '../../../forms';
+import type { Field } from '../../../forms';
 import type { TinaCMS } from '../../../tina-cms';
 import * as React from 'react';
-import type { ReferenceFieldProps } from './index';
+import type { ReferenceFieldProps } from './model/reference-field-props';
 interface ReferenceSelectProps {
     cms: TinaCMS;
     input: any;

package/dist/toolkit/fields/plugins/textarea-field-plugin.d.ts

@@ -1,8 +1,5 @@
 import * as React from 'react';
 import { InputProps } from '../components';
-export declare const TextareaField: (props: import("./wrap-field-with-meta").InputFieldType<{
-    input: InputProps;
-}, {}>) => React.JSX.Element;
 export declare const TextareaFieldPlugin: {
     name: string;
     Component: (props: import("./wrap-field-with-meta").InputFieldType<{

package/dist/unifiedClient/index.d.ts

@@ -1,11 +1,12 @@
-import type { GraphQLError } from 'graphql';
 import type { Config } from '@tinacms/schema-tools';
+import type { Cache } from '../cache/index';
 export declare const TINA_HOST = "content.tinajs.io";
 export interface TinaClientArgs<GenQueries = Record<string, unknown>> {
     url: string;
     token?: string;
     queries: (client: TinaClient<GenQueries>) => GenQueries;
     errorPolicy?: Config['client']['errorPolicy'];
+    cacheDir?: string;
 }
 export type TinaClientRequestArgs = {
     variables?: Record<string, any>;
@@ -23,13 +24,10 @@ export declare class TinaClient<GenQueries> {
     readonlyToken?: string;
     queries: GenQueries;
     errorPolicy: Config['client']['errorPolicy'];
-    constructor({ token, url, queries, errorPolicy, }: TinaClientArgs<GenQueries>);
+    cache: Cache;
+    constructor({ token, url, queries, errorPolicy, cacheDir, }: TinaClientArgs<GenQueries>);
     request<DataType extends Record<string, any> = any>({ errorPolicy, ...args }: TinaClientRequestArgs, options: {
         fetchOptions?: Parameters<typeof fetch>[1];
-    }): Promise<{
-        data: DataType;
-        errors: GraphQLError[] | null;
-        query: string;
-    }>;
+    }): Promise<any>;
 }
 export declare function createClient<GenQueries>(args: TinaClientArgs<GenQueries>): TinaClient<GenQueries>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tinacms",
-  "version": "2.2.0",
+  "version": "2.2.2",
   "main": "dist/index.js",
   "module": "./dist/index.mjs",
   "exports": {
@@ -14,6 +14,11 @@
       "import": "./dist/client.mjs",
       "require": "./dist/client.js"
     },
+    "./dist/cache": {
+      "types": "./dist/cache.d.ts",
+      "import": "./dist/cache.mjs",
+      "require": "./dist/cache.js"
+    },
     "./dist/edit-state": {
       "types": "./dist/edit-state.d.ts",
       "import": "./dist/edit-state.mjs",
@@ -44,7 +49,8 @@
       "src/rich-text/index.tsx",
       "src/rich-text/prism.tsx",
       "src/react.tsx",
-      "src/client.ts"
+      "src/client.ts",
+      "src/cache.ts"
     ]
   },
   "typings": "dist/index.d.ts",
@@ -117,9 +123,9 @@
     "clsx": "^2.1.1",
     "yup": "^1.4.0",
     "zod": "^3.23.8",
-    "@tinacms/mdx": "1.4.0",
-    "@tinacms/schema-tools": "1.6.0",
-    "@tinacms/search": "1.0.26"
+    "@tinacms/mdx": "1.4.2",
+    "@tinacms/schema-tools": "1.6.2",
+    "@tinacms/search": "1.0.28"
   },
   "devDependencies": {
     "@graphql-tools/utils": "^10.3.3",
@@ -152,7 +158,7 @@
     "typescript": "^5.5.4",
     "vite": "^5.3.5",
     "vitest": "^2.0.5",
-    "@tinacms/scripts": "1.2.0"
+    "@tinacms/scripts": "1.2.1"
   },
   "peerDependencies": {
     "react": ">=16.14.0",