tinacms 1.5.8 → 1.5.10

package/dist/index.js

@@ -54,6 +54,152 @@
       authTab = popupWindow(`${frontendUrl}/signin?clientId=${clientId}&origin=${origin}`, "_blank", window, 1e3, 700);
     });
   };
+  class StringBuilder {
+    constructor(limit) {
+      this.length = 0;
+      this.buffer = [];
+      this.limit = limit;
+    }
+    append(str) {
+      if (this.length + str.length > this.limit) {
+        return true;
+      } else {
+        this.buffer.push(str);
+        this.length += str.length;
+        if (this.length > this.limit) {
+          return true;
+        }
+        return false;
+      }
+    }
+    toString() {
+      return this.buffer.join(" ");
+    }
+  }
+  const extractText = (data, acc, indexableNodeTypes) => {
+    var _a, _b;
+    if (data) {
+      if (indexableNodeTypes.indexOf(data.type) !== -1 && (data.text || data.value)) {
+        const tokens = tokenizeString(data.text || data.value);
+        for (const token of tokens) {
+          if (acc.append(token)) {
+            return;
+          }
+        }
+      }
+      (_b = (_a = data.children) == null ? void 0 : _a.forEach) == null ? void 0 : _b.call(_a, (child) => extractText(child, acc, indexableNodeTypes));
+    }
+  };
+  const relativePath = (path, collection) => {
+    return path.replace(/\\/g, "/").replace(collection.path, "").replace(/^\/|\/$/g, "");
+  };
+  const tokenizeString = (str) => {
+    return str.split(/[\s\.,]+/).map((s) => s.toLowerCase()).filter((s) => s);
+  };
+  const processTextFieldValue = (value, maxLen) => {
+    const tokens = tokenizeString(value);
+    const builder = new StringBuilder(maxLen);
+    for (const part of tokens) {
+      if (builder.append(part)) {
+        break;
+      }
+    }
+    return builder.toString();
+  };
+  const processDocumentForIndexing = (data, path, collection, textIndexLength, field) => {
+    if (!field) {
+      const relPath = relativePath(path, collection);
+      data["_id"] = `${collection.name}:${relPath}`;
+      data["_relativePath"] = relPath;
+    }
+    for (const f of collection.fields || (field == null ? void 0 : field.fields) || []) {
+      if (!f.searchable) {
+        delete data[f.name];
+        continue;
+      }
+      const isList = f.list;
+      if (data[f.name]) {
+        if (f.type === "object") {
+          if (isList) {
+            data[f.name] = data[f.name].map((obj) => processDocumentForIndexing(obj, path, collection, textIndexLength, f));
+          } else {
+            data[f.name] = processDocumentForIndexing(data[f.name], path, collection, textIndexLength, f);
+          }
+        } else if (f.type === "string") {
+          const fieldTextIndexLength = f.maxSearchIndexFieldLength || textIndexLength;
+          if (isList) {
+            data[f.name] = data[f.name].map((value) => processTextFieldValue(value, fieldTextIndexLength));
+          } else {
+            data[f.name] = processTextFieldValue(data[f.name], fieldTextIndexLength);
+          }
+        } else if (f.type === "rich-text") {
+          const fieldTextIndexLength = f.maxSearchIndexFieldLength || textIndexLength;
+          if (isList) {
+            data[f.name] = data[f.name].map((value) => {
+              const acc = new StringBuilder(fieldTextIndexLength);
+              extractText(value, acc, ["text", "code_block", "html"]);
+              return acc.toString();
+            });
+          } else {
+            const acc = new StringBuilder(fieldTextIndexLength);
+            extractText(data[f.name], acc, ["text", "code_block", "html"]);
+            data[f.name] = acc.toString();
+          }
+        }
+      }
+    }
+    return data;
+  };
+  const queryToSearchIndexQuery = (query) => {
+    let q;
+    const parts = query.split(" ");
+    if (parts.length === 1) {
+      q = { AND: [parts[0]] };
+    } else {
+      q = { AND: parts.filter((part) => part.toLowerCase() !== "and") };
+    }
+    return q;
+  };
+  const optionsToSearchIndexOptions = (options) => {
+    const opt = {};
+    if (options == null ? void 0 : options.limit) {
+      opt["PAGE"] = {
+        SIZE: options.limit,
+        NUMBER: (options == null ? void 0 : options.cursor) ? parseInt(options.cursor) : 0
+      };
+    }
+    return opt;
+  };
+  const parseSearchIndexResponse = (data, options) => {
+    const results = data["RESULT"];
+    const total = data["RESULT_LENGTH"];
+    if ((options == null ? void 0 : options.cursor) && (options == null ? void 0 : options.limit)) {
+      const prevCursor = options.cursor === "0" ? null : (parseInt(options.cursor) - 1).toString();
+      const nextCursor = total <= (parseInt(options.cursor) + 1) * options.limit ? null : (parseInt(options.cursor) + 1).toString();
+      return {
+        results,
+        total,
+        prevCursor,
+        nextCursor
+      };
+    } else if (!(options == null ? void 0 : options.cursor) && (options == null ? void 0 : options.limit)) {
+      const prevCursor = null;
+      const nextCursor = total <= options.limit ? null : "1";
+      return {
+        results,
+        total,
+        prevCursor,
+        nextCursor
+      };
+    } else {
+      return {
+        results,
+        total,
+        prevCursor: null,
+        nextCursor: null
+      };
+    }
+  };
   const captureBranchName = /^refs\/heads\/(.*)/;
   const parseRefForBranchName = (ref) => {
     const matches = ref.match(captureBranchName);
@@ -232,6 +378,9 @@ mutation addPendingDocumentMutation(
       this.contentApiBase = ((_d = this.options.tinaioConfig) == null ? void 0 : _d.contentApiUrlOverride) || `https://content.tinajs.io`;
       this.contentApiUrl = this.options.customContentApiUrl || `${this.contentApiBase}/${this.tinaGraphQLVersion}/content/${this.options.clientId}/github/${encodedBranch}`;
     }
+    getBranch() {
+      return this.branch;
+    }
     async request(query, { variables }) {
       const token = await this.getToken();
       const headers = {
@@ -517,6 +666,62 @@ mutation addPendingDocumentMutation(
       return localStorage.getItem(LOCAL_CLIENT_KEY) === "true";
     }
   }
+  class TinaCMSSearchClient {
+    constructor(client) {
+      this.client = client;
+    }
+    async query(query, options) {
+      const q = queryToSearchIndexQuery(query);
+      const opt = optionsToSearchIndexOptions(options);
+      const optionsParam = opt["PAGE"] ? `&options=${JSON.stringify(opt)}` : "";
+      const res = await this.client.fetchWithToken(`${this.client.contentApiBase}/searchIndex/${this.client.clientId}/${this.client.getBranch()}?q=${JSON.stringify(q)}${optionsParam}`);
+      return parseSearchIndexResponse(await res.json(), options);
+    }
+    async del(ids) {
+      const res = await this.client.fetchWithToken(`${this.client.contentApiBase}/searchIndex/${this.client.clientId}/${this.client.getBranch()}?ids=${ids.join(",")}`, {
+        method: "DELETE"
+      });
+      if (res.status !== 200) {
+        throw new Error("Failed to update search index");
+      }
+    }
+    async put(docs) {
+      const res = await this.client.fetchWithToken(`${this.client.contentApiBase}/searchIndex/${this.client.clientId}/${this.client.getBranch()}`, {
+        method: "POST",
+        body: JSON.stringify({ docs }),
+        headers: {
+          "Content-Type": "application/json"
+        }
+      });
+      if (res.status !== 200) {
+        throw new Error("Failed to update search index");
+      }
+    }
+    supportsClientSideIndexing() {
+      return true;
+    }
+  }
+  class LocalSearchClient {
+    constructor(client) {
+      this.client = client;
+    }
+    async query(query, options) {
+      const q = queryToSearchIndexQuery(query);
+      const opt = optionsToSearchIndexOptions(options);
+      const optionsParam = opt["PAGE"] ? `&options=${JSON.stringify(opt)}` : "";
+      const res = await this.client.fetchWithToken(`http://localhost:4001/searchIndex?q=${JSON.stringify(q)}${optionsParam}`);
+      return parseSearchIndexResponse(await res.json(), options);
+    }
+    del(ids) {
+      return Promise.resolve(void 0);
+    }
+    put(docs) {
+      return Promise.resolve(void 0);
+    }
+    supportsClientSideIndexing() {
+      return false;
+    }
+  }
   function ModalBuilder(modalProps) {
     return /* @__PURE__ */ React__default["default"].createElement(toolkit.Modal, null, /* @__PURE__ */ React__default["default"].createElement(toolkit.ModalPopup, null, /* @__PURE__ */ React__default["default"].createElement(toolkit.ModalHeader, null, modalProps.title), /* @__PURE__ */ React__default["default"].createElement(toolkit.ModalBody, {
       padded: true
@@ -601,8 +806,14 @@ mutation addPendingDocumentMutation(
   }
   class TinaAdminApi {
     constructor(cms) {
+      var _a, _b, _c, _d;
+      this.maxSearchIndexFieldLength = 100;
       this.api = cms.api.tina;
       this.schema = cms.api.tina.schema;
+      if (cms.api.search && ((_a = cms.api.search) == null ? void 0 : _a.supportsClientSideIndexing())) {
+        this.searchClient = cms.api.searchClient;
+        this.maxSearchIndexFieldLength = ((_d = (_c = (_b = this.schema.config) == null ? void 0 : _b.config) == null ? void 0 : _c.search) == null ? void 0 : _d.maxSearchIndexFieldLength) || 100;
+      }
     }
     async isAuthenticated() {
       return await this.api.isAuthenticated();
@@ -621,25 +832,33 @@ mutation addPendingDocumentMutation(
     fetchCollections() {
       return this.schema.getCollections();
     }
-    async renameDocument({ collection, relativePath, newRelativePath }) {
+    async renameDocument({ collection, relativePath: relativePath2, newRelativePath }) {
       await this.api.request(`#graphql
               mutation RenameDocument($collection: String!, $relativePath: String! $newRelativePath: String!) {
                 updateDocument(collection: $collection, relativePath: $relativePath, params: {relativePath: $newRelativePath}){
     __typename
   }
               }
-            `, { variables: { collection, relativePath, newRelativePath } });
+            `, { variables: { collection, relativePath: relativePath2, newRelativePath } });
+      if (this.searchClient) {
+        const { document: doc } = await this.fetchDocument(collection.name, newRelativePath);
+        const processed = processDocumentForIndexing(doc["_values"], `${collection.path}/${newRelativePath}`, collection, this.maxSearchIndexFieldLength);
+        await this.searchClient.put([processed]);
+        await this.searchClient.del([`${collection.name}:${relativePath2}`]);
+      }
     }
     async deleteDocument({
       collection,
-      relativePath
+      relativePath: relativePath2
     }) {
+      var _a;
       await this.api.request(`#graphql
       mutation DeleteDocument($collection: String!, $relativePath: String!  ){
   deleteDocument(collection: $collection, relativePath: $relativePath){
     __typename
   }
-}`, { variables: { collection, relativePath } });
+}`, { variables: { collection, relativePath: relativePath2 } });
+      await ((_a = this.searchClient) == null ? void 0 : _a.del([`${collection}:${relativePath2}`]));
     }
     async fetchCollection(collectionName, includeDocuments, folder = "", after, sortKey, order, filterArgs) {
       let filter = null;
@@ -785,18 +1004,43 @@ mutation addPendingDocumentMutation(
         }
       }
     }
-    async fetchDocument(collectionName, relativePath) {
-      const response = await this.api.request(`#graphql
-      query($collection: String!, $relativePath: String!) {
-        document(collection:$collection, relativePath:$relativePath) {
-          ... on Document {
-            _values
+    async fetchDocument(collectionName, relativePath2, values = true) {
+      let query;
+      if (values) {
+        query = `#graphql
+        query($collection: String!, $relativePath: String!) {
+          document(collection:$collection, relativePath:$relativePath) {
+            ... on Document {
+              _values
+            }
           }
-        }
-      }`, { variables: { collection: collectionName, relativePath } });
+        }`;
+      } else {
+        query = `#graphql
+        query($collection: String!, $relativePath: String!) {
+          document(collection:$collection, relativePath:$relativePath) {
+            __typename
+            ... on Document {
+              _sys {
+                title
+                template
+                breadcrumbs
+                path
+                basename
+                relativePath
+                filename
+                extension
+              }
+            }
+          }
+        }`;
+      }
+      const response = await this.api.request(query, {
+        variables: { collection: collectionName, relativePath: relativePath2 }
+      });
       return response;
     }
-    async createDocument(collectionName, relativePath, params) {
+    async createDocument(collection, relativePath2, params) {
       const response = await this.api.request(`#graphql
       mutation($collection: String!, $relativePath: String!, $params: DocumentMutation!) {
         createDocument(
@@ -806,14 +1050,19 @@ mutation addPendingDocumentMutation(
         ){__typename}
       }`, {
         variables: {
-          collection: collectionName,
-          relativePath,
+          collection: collection.name,
+          relativePath: relativePath2,
           params
         }
       });
+      if (this.searchClient) {
+        const { document: doc } = await this.fetchDocument(collection.name, relativePath2);
+        const processed = processDocumentForIndexing(doc["_values"], `${collection.path}/${relativePath2}`, collection, this.maxSearchIndexFieldLength);
+        await this.searchClient.put([processed]);
+      }
       return response;
     }
-    async updateDocument(collectionName, relativePath, params) {
+    async updateDocument(collection, relativePath2, params) {
       const response = await this.api.request(`#graphql
       mutation($collection: String!, $relativePath: String!, $params: DocumentUpdateMutation!) {
         updateDocument(
@@ -823,11 +1072,16 @@ mutation addPendingDocumentMutation(
         ){__typename}
       }`, {
         variables: {
-          collection: collectionName,
-          relativePath,
+          collection: collection.name,
+          relativePath: relativePath2,
           params
         }
       });
+      if (this.searchClient) {
+        const { document: doc } = await this.fetchDocument(collection.name, relativePath2);
+        const processed = processDocumentForIndexing(doc["_values"], `${collection.path}/${relativePath2}`, collection, this.maxSearchIndexFieldLength);
+        await this.searchClient.put([processed]);
+      }
       return response;
     }
   }
@@ -913,6 +1167,23 @@ mutation addPendingDocumentMutation(
     } else {
       cms.api.tina.setBranch(currentBranch);
     }
+    React.useEffect(() => {
+      var _a, _b, _c, _d;
+      let searchClient;
+      if (props.isLocalClient) {
+        searchClient = new LocalSearchClient(cms.api.tina);
+      } else {
+        const hasTinaSearch = Boolean((_b = (_a = props.schema.config) == null ? void 0 : _a.search) == null ? void 0 : _b.tina);
+        if (hasTinaSearch) {
+          searchClient = new TinaCMSSearchClient(cms.api.tina);
+        } else {
+          searchClient = (_d = (_c = props.schema.config) == null ? void 0 : _c.search) == null ? void 0 : _d.searchClient;
+        }
+      }
+      if (searchClient) {
+        cms.registerApi("search", searchClient);
+      }
+    }, [props]);
     if (!cms.api.admin) {
       cms.registerApi("admin", new TinaAdminApi(cms));
     }
@@ -1479,6 +1750,9 @@ mutation addPendingDocumentMutation(
 .tina-tailwind .w-full {
   width: 100%;
 }
+.tina-tailwind .min-w-\\[200px\\] {
+  min-width: 200px;
+}
 .tina-tailwind .max-w-0 {
   max-width: 0rem;
 }
@@ -2146,16 +2420,16 @@ mutation addPendingDocumentMutation(
       this.onChange = options.onChange;
       this.initialValues = options.initialValues;
     }
-    async onSubmit({ collection, template, relativePath }, cms) {
+    async onSubmit({ collection, template, relativePath: relativePath2 }, cms) {
       try {
         const selectedCollection = this.collections.find((collectionItem) => collectionItem.slug === collection);
         const collectionFormat = selectedCollection.format;
         const extensionLength = -1 * (collectionFormat.length + 1);
-        let relativePathWithExt = relativePath;
-        if (relativePath.slice(extensionLength).toLocaleLowerCase() === `.${collectionFormat}`) {
-          relativePathWithExt = `${relativePath.slice(0, -3)}.${collectionFormat}`;
+        let relativePathWithExt = relativePath2;
+        if (relativePath2.slice(extensionLength).toLocaleLowerCase() === `.${collectionFormat}`) {
+          relativePathWithExt = `${relativePath2.slice(0, -3)}.${collectionFormat}`;
         } else {
-          relativePathWithExt = `${relativePath}.${collectionFormat}`;
+          relativePathWithExt = `${relativePath2}.${collectionFormat}`;
         }
         const payload = {
           relativePath: relativePathWithExt,
@@ -3173,6 +3447,75 @@ This will work when developing locally but NOT when deployed to production.
     const reFetchCollection = () => setResetSate((x) => x + 1);
     return { collection, loading, error, reFetchCollection, collectionExtra };
   };
+  const useSearchCollection = (cms, collectionName, includeDocuments = true, folder, after = "", search) => {
+    const api = new TinaAdminApi(cms);
+    const schema = cms.api.tina.schema;
+    const collectionExtra = schema.getCollection(collectionName);
+    const [collection, setCollection] = React.useState(void 0);
+    const [loading, setLoading] = React.useState(true);
+    const [error, setError] = React.useState(void 0);
+    const [resetState, setResetSate] = React.useState(0);
+    React.useEffect(() => {
+      let cancelled = false;
+      const searchCollection = async () => {
+        if (await api.isAuthenticated() && !folder.loading && !cancelled) {
+          try {
+            const response = await cms.api.search.query(`${search} AND _collection:${collectionName}`, {
+              limit: 15,
+              cursor: after
+            });
+            const docs = await Promise.allSettled(response.results.map((result) => {
+              const [collection2, relativePath2] = result._id.split(":");
+              return api.fetchDocument(collection2, relativePath2, false);
+            }));
+            const edges = docs.filter((p) => {
+              var _a;
+              return p.status === "fulfilled" && !!((_a = p.value) == null ? void 0 : _a.document);
+            }).map((result) => ({ node: result.value.document }));
+            const c = await api.fetchCollection(collectionName, false, "");
+            setCollection({
+              format: collection.format,
+              label: collection.label,
+              name: collectionName,
+              templates: collection.templates,
+              documents: {
+                pageInfo: {
+                  hasNextPage: !!response.nextCursor,
+                  hasPreviousPage: !!response.prevCursor,
+                  startCursor: "",
+                  endCursor: response.nextCursor || ""
+                },
+                edges
+              }
+            });
+          } catch (error2) {
+            cms.alerts.error(`[${error2.name}] GetCollection failed: ${error2.message}`);
+            console.error(error2);
+            setCollection(void 0);
+            setError(error2);
+          }
+          setLoading(false);
+        }
+      };
+      if (cancelled)
+        return;
+      setLoading(true);
+      searchCollection();
+      return () => {
+        cancelled = true;
+      };
+    }, [
+      cms,
+      collectionName,
+      folder.loading,
+      folder.fullyQualifiedName,
+      resetState,
+      after,
+      search
+    ]);
+    const reFetchCollection = () => setResetSate((x) => x + 1);
+    return { collection, loading, error, reFetchCollection, collectionExtra };
+  };
   const GetCollection = ({
     cms,
     collectionName,
@@ -3181,10 +3524,11 @@ This will work when developing locally but NOT when deployed to production.
     startCursor,
     sortKey,
     children,
-    filterArgs
+    filterArgs,
+    search
   }) => {
     const navigate = reactRouterDom.useNavigate();
-    const { collection, loading, error, reFetchCollection, collectionExtra } = useGetCollection(cms, collectionName, includeDocuments, folder, startCursor || "", sortKey, filterArgs) || {};
+    const { collection, loading, error, reFetchCollection, collectionExtra } = search ? useSearchCollection(cms, collectionName, includeDocuments, folder, startCursor || "", search) : useGetCollection(cms, collectionName, includeDocuments, folder, startCursor || "", sortKey, filterArgs) || {};
     React.useEffect(() => {
       var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
       if (loading)
@@ -3192,9 +3536,10 @@ This will work when developing locally but NOT when deployed to production.
       const collectionDefinition = cms.api.tina.schema.getCollection(collection.name);
       const allowCreate = (_c = (_b = (_a = collectionDefinition == null ? void 0 : collectionDefinition.ui) == null ? void 0 : _a.allowedActions) == null ? void 0 : _b.create) != null ? _c : true;
       const allowDelete = (_f = (_e = (_d = collectionDefinition == null ? void 0 : collectionDefinition.ui) == null ? void 0 : _d.allowedActions) == null ? void 0 : _e.delete) != null ? _f : true;
-      if (!allowCreate && !allowDelete && ((_h = (_g = collection.documents) == null ? void 0 : _g.edges) == null ? void 0 : _h.length) === 1 && ((_k = (_j = (_i = collection.documents) == null ? void 0 : _i.edges[0]) == null ? void 0 : _j.node) == null ? void 0 : _k.__typename) !== "Folder") {
-        const doc = collection.documents.edges[0].node;
-        handleNavigate(navigate, cms, collection, collectionDefinition, doc);
+      const collectionResponse = collection;
+      if (!allowCreate && !allowDelete && ((_h = (_g = collectionResponse.documents) == null ? void 0 : _g.edges) == null ? void 0 : _h.length) === 1 && ((_k = (_j = (_i = collectionResponse.documents) == null ? void 0 : _i.edges[0]) == null ? void 0 : _j.node) == null ? void 0 : _k.__typename) !== "Folder") {
+        const doc = collectionResponse.documents.edges[0].node;
+        handleNavigate(navigate, cms, collectionResponse, collectionDefinition, doc);
       }
     }, [(collection == null ? void 0 : collection.name) || "", loading]);
     if (error) {
@@ -3323,13 +3668,14 @@ This will work when developing locally but NOT when deployed to production.
       after: "",
       booleanEquals: null
     });
-    const [activeSearch, setActiveSearch] = React__default["default"].useState(false);
     const [endCursor, setEndCursor] = React.useState("");
     const [prevCursors, setPrevCursors] = React.useState([]);
     const [sortKey, setSortKey] = React.useState(isSSR ? "" : window.localStorage.getItem(`${LOCAL_STORAGE_KEY}.${collectionName}`) || JSON.stringify({
       order: "asc",
       name: ""
     }));
+    const [search, setSearch] = React.useState("");
+    const [searchInput, setSearchInput] = React.useState("");
     const { order = "asc", name: sortName } = JSON.parse(sortKey || "{}");
     const [sortOrder, setSortOrder] = React.useState(order);
     const loc = reactRouterDom.useLocation();
@@ -3374,25 +3720,20 @@ This will work when developing locally but NOT when deployed to production.
           before: "",
           after: "",
           booleanEquals: null
-        }
+        },
+        search
       }, (collection, _loading, reFetchCollection, collectionExtra) => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l;
         collection.documents.totalCount;
         const documents = collection.documents.edges;
         const admin = cms.api.admin;
         const pageInfo = collection.documents.pageInfo;
         const fields = (_a = collectionExtra.fields) == null ? void 0 : _a.filter((x) => ["string", "number", "datetime", "boolean"].includes(x.type));
         const sortField = fields == null ? void 0 : fields.find((field) => field.name === sortName);
-        const filterFields = (_b = collectionExtra.fields) == null ? void 0 : _b.filter((x) => {
-          return ["string", "datetime", "boolean"].includes(x.type) && !x.list;
-        });
-        const filterField = filterFields == null ? void 0 : filterFields.find((x) => x.name === vars.filterField);
-        const showStartsWith = (filterField == null ? void 0 : filterField.type) === "string" && !filterField.list;
-        const showDateFilter = (filterField == null ? void 0 : filterField.type) === "datetime";
-        const showBooleanToggle = (filterField == null ? void 0 : filterField.type) === "boolean" && !filterField.list;
+        const searchEnabled = !!((_d = (_c = (_b = cms.api.tina.schema) == null ? void 0 : _b.config) == null ? void 0 : _c.config) == null ? void 0 : _d.search);
         const collectionDefinition = cms.api.tina.schema.getCollection(collection.name);
-        const allowCreate = (_e = (_d = (_c = collectionDefinition == null ? void 0 : collectionDefinition.ui) == null ? void 0 : _c.allowedActions) == null ? void 0 : _d.create) != null ? _e : true;
-        const allowDelete = (_h = (_g = (_f = collectionDefinition == null ? void 0 : collectionDefinition.ui) == null ? void 0 : _f.allowedActions) == null ? void 0 : _g.delete) != null ? _h : true;
+        const allowCreate = (_g = (_f = (_e = collectionDefinition == null ? void 0 : collectionDefinition.ui) == null ? void 0 : _e.allowedActions) == null ? void 0 : _f.create) != null ? _g : true;
+        const allowDelete = (_j = (_i = (_h = collectionDefinition == null ? void 0 : collectionDefinition.ui) == null ? void 0 : _h.allowedActions) == null ? void 0 : _i.delete) != null ? _j : true;
         const folderView = folder.fullyQualifiedName !== "";
         return /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, deleteModalOpen && /* @__PURE__ */ React__default["default"].createElement(DeleteModal, {
           filename: vars.relativePath,
@@ -3434,7 +3775,7 @@ This will work when developing locally but NOT when deployed to production.
           },
           close: () => setRenameModalOpen(false)
         }), /* @__PURE__ */ React__default["default"].createElement(PageHeader, {
-          isLocalMode: (_j = (_i = cms == null ? void 0 : cms.api) == null ? void 0 : _i.tina) == null ? void 0 : _j.isLocalMode
+          isLocalMode: (_l = (_k = cms == null ? void 0 : cms.api) == null ? void 0 : _k.tina) == null ? void 0 : _l.isLocalMode
         }, /* @__PURE__ */ React__default["default"].createElement("div", {
           className: "w-full grid grid-flow-col items-end gap-4"
         }, /* @__PURE__ */ React__default["default"].createElement("div", {
@@ -3442,8 +3783,8 @@ This will work when developing locally but NOT when deployed to production.
         }, /* @__PURE__ */ React__default["default"].createElement("h3", {
           className: "font-sans text-2xl text-gray-700"
         }, collection.label ? collection.label : collection.name), /* @__PURE__ */ React__default["default"].createElement("div", {
-          className: "flex gap-4 items-end flex-wrap"
-        }, (fields == null ? void 0 : fields.length) > 0 && /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, /* @__PURE__ */ React__default["default"].createElement("div", {
+          className: "flex gap-4 items-start flex-wrap"
+        }, (fields == null ? void 0 : fields.length) > 0 && /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, !search && /* @__PURE__ */ React__default["default"].createElement("div", {
           className: "flex flex-col gap-2 items-start"
         }, /* @__PURE__ */ React__default["default"].createElement("label", {
           htmlFor: "sort",
@@ -3488,152 +3829,22 @@ This will work when developing locally but NOT when deployed to production.
               setSortOrder(val.order);
             }
           }
-        })), /* @__PURE__ */ React__default["default"].createElement("form", {
-          className: "flex flex-wrap gap-4 items-end"
-        }, /* @__PURE__ */ React__default["default"].createElement("div", {
-          className: "flex flex-shrink-0 flex-col gap-2 items-start"
-        }, /* @__PURE__ */ React__default["default"].createElement("label", {
-          htmlFor: "filter",
-          className: "block font-sans text-xs font-semibold text-gray-500 whitespace-normal"
-        }, "Filter by"), /* @__PURE__ */ React__default["default"].createElement(toolkit.Select, {
-          name: "filter",
-          options: [
-            {
-              label: "None",
-              value: ""
-            },
-            ...filterFields.map((x) => ({
-              label: typeof x.label === "string" && x.label || x.name,
-              value: x.name
-            }))
-          ],
-          input: {
-            id: "filter",
-            name: "filter",
-            value: vars.filterField,
-            onChange: (e) => {
-              const val = e.target.value;
-              setEndCursor("");
-              setPrevCursors([]);
-              setVars((old) => ({
-                ...old,
-                filterField: val
-              }));
-              if (!val) {
-                reFetchCollection();
-              }
-            }
-          }
-        })), showStartsWith && /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, /* @__PURE__ */ React__default["default"].createElement("div", {
-          className: "flex flex-shrink-0 flex-col gap-2 items-start"
-        }, /* @__PURE__ */ React__default["default"].createElement("label", {
-          htmlFor: "startsWith",
-          className: "block font-sans text-xs font-semibold text-gray-500 whitespace-normal"
-        }, "Starts with"), /* @__PURE__ */ React__default["default"].createElement(toolkit.Input, {
-          name: "startsWith",
-          id: "startsWith",
-          value: vars.startsWith,
-          onChange: (e) => {
-            const val = e.target.value;
-            setVars((old) => ({
-              ...old,
-              startsWith: val,
-              after: "",
-              before: "",
-              booleanEquals: null
-            }));
-          }
-        }))), showDateFilter && /* @__PURE__ */ React__default["default"].createElement("div", {
-          className: "flex flex-shrink-0 gap-4"
-        }, /* @__PURE__ */ React__default["default"].createElement("div", {
-          className: "flex flex-col gap-2 items-start"
-        }, /* @__PURE__ */ React__default["default"].createElement("label", {
-          htmlFor: "dateAfter",
-          className: "block font-sans text-xs font-semibold text-gray-500 whitespace-normal"
-        }, "After"), /* @__PURE__ */ React__default["default"].createElement(toolkit.ReactDateTimeWithStyles, {
-          inputProps: {
-            className: toolkit.textFieldClasses
-          },
-          value: vars.after,
-          onChange: (e) => {
-            setVars((old) => ({
-              ...old,
-              after: typeof e.format === "function" ? e.format() : "",
-              booleanEquals: null,
-              startsWith: ""
-            }));
-          }
         })), /* @__PURE__ */ React__default["default"].createElement("div", {
-          className: "flex flex-col gap-2 items-start"
-        }, /* @__PURE__ */ React__default["default"].createElement("label", {
-          htmlFor: "dateBefore",
-          className: "block font-sans text-xs font-semibold text-gray-500 whitespace-normal"
-        }, "Before"), /* @__PURE__ */ React__default["default"].createElement(toolkit.ReactDateTimeWithStyles, {
-          inputProps: {
-            className: toolkit.textFieldClasses
-          },
-          value: vars.before,
-          onChange: (e) => {
-            setVars((old) => ({
-              ...old,
-              before: typeof e.format === "function" ? e.format() : "",
-              booleanEquals: null,
-              startsWith: ""
-            }));
-          }
-        }))), showBooleanToggle && /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, /* @__PURE__ */ React__default["default"].createElement("div", {
-          className: "flex flex-col gap-2 items-start"
-        }, /* @__PURE__ */ React__default["default"].createElement("label", {
-          htmlFor: "toggle",
+          className: "flex flex-1 flex-col gap-2 items-start w-full"
+        }, searchEnabled ? /* @__PURE__ */ React__default["default"].createElement(SearchInput, {
+          loading: _loading,
+          search,
+          setSearch,
+          searchInput,
+          setSearchInput
+        }) : /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, /* @__PURE__ */ React__default["default"].createElement("label", {
           className: "block font-sans text-xs font-semibold text-gray-500 whitespace-normal"
-        }, filterField.label || filterField.name), /* @__PURE__ */ React__default["default"].createElement(toolkit.Toggle, {
-          field: filterField,
-          input: {
-            name: "toggle",
-            value: (_k = vars.booleanEquals) != null ? _k : false,
-            onChange: () => {
-              setVars((old) => ({
-                ...old,
-                booleanEquals: !old.booleanEquals,
-                after: "",
-                before: "",
-                startsWith: ""
-              }));
-            }
-          },
-          name: "toggle"
-        }))), (showStartsWith || showDateFilter || showBooleanToggle) && /* @__PURE__ */ React__default["default"].createElement("div", {
-          className: "flex gap-3"
-        }, /* @__PURE__ */ React__default["default"].createElement(toolkit.Button, {
-          onClick: () => {
-            setActiveSearch(true);
-            setEndCursor("");
-            setPrevCursors([]);
-            reFetchCollection();
-          },
-          variant: "primary",
-          type: "submit"
-        }, "Search", " ", /* @__PURE__ */ React__default["default"].createElement(BiSearch, {
-          className: "w-5 h-full ml-1.5 opacity-70"
-        })), (vars.startsWith || vars.after || vars.before || vars.booleanEquals) && /* @__PURE__ */ React__default["default"].createElement(toolkit.Button, {
-          onClick: () => {
-            setActiveSearch(false);
-            setVars((old) => ({
-              ...old,
-              filterField: "",
-              startsWith: "",
-              after: "",
-              before: "",
-              booleanEquals: null
-            }));
-            setEndCursor("");
-            setPrevCursors([]);
-            reFetchCollection();
-          },
-          variant: "white"
-        }, "Clear", " ", /* @__PURE__ */ React__default["default"].createElement(BiX, {
-          className: "w-5 h-full ml-1 opacity-70"
-        }))))))), /* @__PURE__ */ React__default["default"].createElement("div", {
+        }, "Search"), /* @__PURE__ */ React__default["default"].createElement(toolkit.Message, {
+          link: "https://tina.io/docs/reference/search/overview",
+          linkLabel: "Read The Docs",
+          type: "info",
+          size: "small"
+        }, "Search not configured.")))))), /* @__PURE__ */ React__default["default"].createElement("div", {
           className: "flex self-end	justify-self-end"
         }, !collection.templates && allowCreate && /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Link, {
           to: `/${folder.fullyQualifiedName ? [
@@ -3658,7 +3869,7 @@ This will work when developing locally but NOT when deployed to production.
           className: "table-auto shadow bg-white border-b border-gray-200 w-full max-w-full rounded-lg"
         }, /* @__PURE__ */ React__default["default"].createElement("tbody", {
           className: "divide-y divide-gray-150"
-        }, !activeSearch && folder.name && /* @__PURE__ */ React__default["default"].createElement("tr", null, /* @__PURE__ */ React__default["default"].createElement("td", {
+        }, folder.name && !search && /* @__PURE__ */ React__default["default"].createElement("tr", null, /* @__PURE__ */ React__default["default"].createElement("td", {
           colSpan: 5
         }, /* @__PURE__ */ React__default["default"].createElement(Breadcrumb, {
           folder,
@@ -3849,6 +4060,59 @@ This will work when developing locally but NOT when deployed to production.
       }));
     });
   };
+  const SearchInput = ({
+    loading,
+    search,
+    setSearch,
+    searchInput,
+    setSearchInput
+  }) => {
+    const [searchLoaded, setSearchLoaded] = React.useState(false);
+    React.useEffect(() => {
+      if (loading) {
+        setSearchLoaded(false);
+      } else {
+        setSearchLoaded(true);
+      }
+    }, [loading]);
+    return /* @__PURE__ */ React__default["default"].createElement("form", {
+      className: "flex flex-1 flex-col gap-2 items-start w-full"
+    }, /* @__PURE__ */ React__default["default"].createElement("label", {
+      htmlFor: "search",
+      className: "block font-sans text-xs font-semibold text-gray-500 whitespace-normal"
+    }, "Search"), /* @__PURE__ */ React__default["default"].createElement("div", {
+      className: "flex flex-wrap items-center gap-3"
+    }, /* @__PURE__ */ React__default["default"].createElement("div", {
+      className: "flex-1 min-w-[200px]"
+    }, /* @__PURE__ */ React__default["default"].createElement(toolkit.Input, {
+      type: "text",
+      name: "search",
+      placeholder: "Search",
+      value: searchInput,
+      onChange: (e) => {
+        setSearchInput(e.target.value);
+      }
+    })), /* @__PURE__ */ React__default["default"].createElement("div", {
+      className: "flex gap-3"
+    }, /* @__PURE__ */ React__default["default"].createElement(toolkit.Button, {
+      onClick: () => {
+        setSearch(searchInput);
+        setSearchLoaded(false);
+      },
+      variant: "primary",
+      type: "submit"
+    }, "Search ", /* @__PURE__ */ React__default["default"].createElement(BiSearch, {
+      className: "w-5 h-full ml-1.5 opacity-70"
+    })), search && searchLoaded && /* @__PURE__ */ React__default["default"].createElement(toolkit.Button, {
+      onClick: () => {
+        setSearch("");
+        setSearchInput("");
+      },
+      variant: "white"
+    }, "Clear ", /* @__PURE__ */ React__default["default"].createElement(BiX, {
+      className: "w-5 h-full ml-1 opacity-70"
+    })))));
+  };
   const Breadcrumb = ({ folder, navigate, collectionName }) => {
     const folderArray = folder.name.split("/");
     return /* @__PURE__ */ React__default["default"].createElement("div", {
@@ -3959,14 +4223,14 @@ This will work when developing locally but NOT when deployed to production.
   const createDocument = async (cms, collection, template, mutationInfo, folder, values) => {
     const api = new TinaAdminApi(cms);
     const { filename, ...leftover } = values;
-    const relativePath = `${folder ? `${folder}/` : ""}${filename}.${collection.format}`;
+    const relativePath2 = `${folder ? `${folder}/` : ""}${filename}.${collection.format}`;
     const params = api.schema.transformPayload(collection.name, {
       _collection: collection.name,
       ...template && { _template: template.name },
       ...leftover
     });
     if (await api.isAuthenticated()) {
-      await api.createDocument(collection.name, relativePath, params);
+      await api.createDocument(collection, relativePath2, params);
     } else {
       const authMessage = `CreateDocument failed: User is no longer authenticated; please login and try again.`;
       cms.alerts.error(authMessage);
@@ -4161,7 +4425,7 @@ This will work when developing locally but NOT when deployed to production.
       onPristineChange: setFormIsPristine
     })));
   };
-  const useGetDocument = (cms, collectionName, relativePath) => {
+  const useGetDocument = (cms, collectionName, relativePath2) => {
     const api = new TinaAdminApi(cms);
     const [document, setDocument] = React.useState(void 0);
     const [loading, setLoading] = React.useState(true);
@@ -4170,7 +4434,7 @@ This will work when developing locally but NOT when deployed to production.
       const fetchDocument = async () => {
         if (api.isAuthenticated()) {
           try {
-            const response = await api.fetchDocument(collectionName, relativePath);
+            const response = await api.fetchDocument(collectionName, relativePath2);
             setDocument(response.document);
           } catch (error2) {
             cms.alerts.error(`[${error2.name}] GetDocument failed: ${error2.message}`);
@@ -4183,16 +4447,16 @@ This will work when developing locally but NOT when deployed to production.
       };
       setLoading(true);
       fetchDocument();
-    }, [cms, collectionName, relativePath]);
+    }, [cms, collectionName, relativePath2]);
     return { document, loading, error };
   };
   const GetDocument = ({
     cms,
     collectionName,
-    relativePath,
+    relativePath: relativePath2,
     children
   }) => {
-    const { document, loading, error } = useGetDocument(cms, collectionName, relativePath);
+    const { document, loading, error } = useGetDocument(cms, collectionName, relativePath2);
     if (error) {
       return /* @__PURE__ */ React__default["default"].createElement(FullscreenError, null);
     }
@@ -4211,7 +4475,7 @@ This will work when developing locally but NOT when deployed to production.
       folder,
       includeDocuments: false
     }, (collection) => {
-      const relativePath = `${filename.startsWith("~/") ? filename.substring(2) : filename}.${collection.format}`;
+      const relativePath2 = `${filename.startsWith("~/") ? filename.substring(2) : filename}.${collection.format}`;
       const mutationInfo = {
         includeCollection: true,
         includeTemplate: !!collection.templates
@@ -4219,7 +4483,7 @@ This will work when developing locally but NOT when deployed to production.
       return /* @__PURE__ */ React__default["default"].createElement(GetDocument, {
         cms,
         collectionName: collection.name,
-        relativePath
+        relativePath: relativePath2
       }, (document) => {
         var _a;
         return /* @__PURE__ */ React__default["default"].createElement(RenderForm$1, {
@@ -4233,11 +4497,11 @@ This will work when developing locally but NOT when deployed to production.
       });
     }));
   };
-  const updateDocument = async (cms, relativePath, collection, mutationInfo, values) => {
+  const updateDocument = async (cms, relativePath2, collection, mutationInfo, values) => {
     const api = new TinaAdminApi(cms);
     const params = api.schema.transformPayload(collection.name, values);
     if (await api.isAuthenticated()) {
-      await api.updateDocument(collection.name, relativePath, params);
+      await api.updateDocument(collection, relativePath2, params);
     } else {
       const authMessage = `UpdateDocument failed: User is no longer authenticated; please login and try again.`;
       cms.alerts.error(authMessage);
@@ -4256,7 +4520,7 @@ This will work when developing locally but NOT when deployed to production.
       folder,
       includeDocuments: false
     }, (collection) => {
-      const relativePath = `${resolvedFile}.${collection.format}`;
+      const relativePath2 = `${resolvedFile}.${collection.format}`;
       const mutationInfo = {
         includeCollection: true,
         includeTemplate: !!collection.templates
@@ -4264,12 +4528,12 @@ This will work when developing locally but NOT when deployed to production.
       return /* @__PURE__ */ React__default["default"].createElement(PageWrapper, null, /* @__PURE__ */ React__default["default"].createElement(GetDocument, {
         cms,
         collectionName: collection.name,
-        relativePath
+        relativePath: relativePath2
       }, (document) => /* @__PURE__ */ React__default["default"].createElement(RenderForm, {
         cms,
         document,
         filename: resolvedFile,
-        relativePath,
+        relativePath: relativePath2,
         collection,
         mutationInfo
       })));
@@ -4279,14 +4543,14 @@ This will work when developing locally but NOT when deployed to production.
     cms,
     document,
     filename,
-    relativePath,
+    relativePath: relativePath2,
     collection,
     mutationInfo
   }) => {
     var _a, _b;
     const [formIsPristine, setFormIsPristine] = React.useState(true);
     const schema = cms.api.tina.schema;
-    const parentFolder2 = relativePath.split("/").slice(0, -1).join("/");
+    const parentFolder2 = relativePath2.split("/").slice(0, -1).join("/");
     const schemaCollection = schema.getCollection(collection.name);
     const template = schema.getTemplateForData({
       collection: schemaCollection,
@@ -4306,7 +4570,7 @@ This will work when developing locally but NOT when deployed to production.
         initialValues: document._values,
         onSubmit: async (values) => {
           try {
-            await updateDocument(cms, relativePath, collection, mutationInfo, values);
+            await updateDocument(cms, relativePath2, collection, mutationInfo, values);
             cms.alerts.success("Document updated!");
           } catch (error) {
             console.error(error);
@@ -4314,7 +4578,7 @@ This will work when developing locally but NOT when deployed to production.
           }
         }
       });
-    }, [cms, document, relativePath, collection, mutationInfo]);
+    }, [cms, document, relativePath2, collection, mutationInfo]);
     const navBreakpoint = 1e3;
     const windowWidth = windowSize.useWindowWidth();
     const renderNavToggle = windowWidth < navBreakpoint + 1;
@@ -4641,10 +4905,12 @@ This will work when developing locally but NOT when deployed to production.
   exports2.Client = Client;
   exports2.DEFAULT_LOCAL_TINA_GQL_SERVER_URL = DEFAULT_LOCAL_TINA_GQL_SERVER_URL;
   exports2.LocalClient = LocalClient;
+  exports2.LocalSearchClient = LocalSearchClient;
   exports2.RouteMappingPlugin = RouteMappingPlugin;
   exports2.TinaAdmin = TinaAdmin;
   exports2.TinaAdminApi = TinaAdminApi;
   exports2.TinaCMSProvider2 = TinaCMSProvider2;
+  exports2.TinaCMSSearchClient = TinaCMSSearchClient;
   exports2.TinaCloudAuthWall = TinaCloudAuthWall;
   exports2.TinaCloudProvider = TinaCloudProvider;
   exports2.assertShape = assertShape;