tinacms 1.1.5 → 1.2.0

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("@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) {
+  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("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", "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));
+})(this, function(exports2, toolkit, G, set, React, finalForm, schemaTools, gql$1, yup, sharedctx, 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 UrlPattern__default = /* @__PURE__ */ _interopDefaultLegacy(UrlPattern);
   function popupWindow(url, title, window2, w, h) {
     const y = window2.top.outerHeight / 2 + window2.top.screenY - h / 2;
     const x = window2.top.outerWidth / 2 + window2.top.screenX - w / 2;
@@ -2133,7 +2132,7 @@
   };
   class Client {
     constructor({ tokenStorage = "MEMORY", ...options }) {
-      var _a, _b, _c, _d, _e, _f, _g, _h;
+      var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k, _l, _m, _n, _o, _p, _q, _r, _s, _t, _u, _v, _w, _x, _y, _z, _A, _B, _C, _D, _E, _F, _G, _H, _I, _J, _K, _L, _M, _N, _O, _P;
       this.events = new toolkit.EventBus();
       this.addPendingContent = async (props) => {
         const mutation = `#graphql
@@ -2183,6 +2182,15 @@ mutation addPendingDocumentMutation(
       };
       this.onLogin = (_d = (_c = (_b = (_a = options.schema) == null ? void 0 : _a.config) == null ? void 0 : _b.admin) == null ? void 0 : _c.auth) == null ? void 0 : _d.onLogin;
       this.onLogout = (_h = (_g = (_f = (_e = options.schema) == null ? void 0 : _e.config) == null ? void 0 : _f.admin) == null ? void 0 : _g.auth) == null ? void 0 : _h.onLogout;
+      if ((_l = (_k = (_j = (_i = options.schema) == null ? void 0 : _i.config) == null ? void 0 : _j.admin) == null ? void 0 : _k.auth) == null ? void 0 : _l.logout) {
+        this.onLogout = (_p = (_o = (_n = (_m = options.schema) == null ? void 0 : _m.config) == null ? void 0 : _n.admin) == null ? void 0 : _o.auth) == null ? void 0 : _p.logout;
+      }
+      if ((_t = (_s = (_r = (_q = options.schema) == null ? void 0 : _q.config) == null ? void 0 : _r.admin) == null ? void 0 : _s.auth) == null ? void 0 : _t.getUser) {
+        this.getUser = (_x = (_w = (_v = (_u = options.schema) == null ? void 0 : _u.config) == null ? void 0 : _v.admin) == null ? void 0 : _w.auth) == null ? void 0 : _x.getUser;
+      }
+      if ((_B = (_A = (_z = (_y = options.schema) == null ? void 0 : _y.config) == null ? void 0 : _z.admin) == null ? void 0 : _A.auth) == null ? void 0 : _B.authenticate) {
+        this.authenticate = (_F = (_E = (_D = (_C = options.schema) == null ? void 0 : _C.config) == null ? void 0 : _D.admin) == null ? void 0 : _E.auth) == null ? void 0 : _F.authenticate;
+      }
       if (options.schema) {
         const enrichedSchema = new schemaTools.TinaSchema({
           version: { fullVersion: "", major: "", minor: "", patch: "" },
@@ -2192,6 +2200,9 @@ mutation addPendingDocumentMutation(
         this.schema = enrichedSchema;
       }
       this.options = options;
+      if ((_H = (_G = options.schema) == null ? void 0 : _G.config) == null ? void 0 : _H.contentApiUrlOverride) {
+        this.options.customContentApiUrl = options.schema.config.contentApiUrlOverride;
+      }
       this.setBranch(options.branch);
       this.events.subscribe("branch:change", ({ branchName }) => {
         this.setBranch(branchName);
@@ -2238,6 +2249,9 @@ mutation addPendingDocumentMutation(
           this.getToken = options.getTokenFn;
           break;
       }
+      if ((_L = (_K = (_J = (_I = options.schema) == null ? void 0 : _I.config) == null ? void 0 : _J.admin) == null ? void 0 : _K.auth) == null ? void 0 : _L.getToken) {
+        this.getToken = (_P = (_O = (_N = (_M = options.schema) == null ? void 0 : _M.config) == null ? void 0 : _N.admin) == null ? void 0 : _O.auth) == null ? void 0 : _P.getToken;
+      }
     }
     get isLocalMode() {
       return false;
@@ -2482,10 +2496,7 @@ mutation addPendingDocumentMutation(
       localStorage.setItem(LOCAL_CLIENT_KEY, "true");
       return { access_token: "LOCAL", id_token: "LOCAL", refresh_token: "LOCAL" };
     }
-    async isAuthorized() {
-      return localStorage.getItem(LOCAL_CLIENT_KEY) === "true";
-    }
-    async isAuthenticated() {
+    async getUser() {
       return localStorage.getItem(LOCAL_CLIENT_KEY) === "true";
     }
   }
@@ -2566,17 +2577,50 @@ mutation addPendingDocumentMutation(
   }
 }`, { variables: { collection, relativePath } });
     }
-    async fetchCollection(collectionName, includeDocuments, after, sortKey, order) {
+    async fetchCollection(collectionName, includeDocuments, after, sortKey, order, filterArgs) {
+      let filter = null;
+      const filterField = filterArgs == null ? void 0 : filterArgs.filterField;
+      if (filterField) {
+        filter = {
+          [collectionName]: {
+            [filterField]: {}
+          }
+        };
+      }
+      if (filterField && (filterArgs == null ? void 0 : filterArgs.startsWith)) {
+        filter[collectionName][filterField] = {
+          ...filter[collectionName][filterField] || {},
+          startsWith: filterArgs.startsWith
+        };
+      }
+      if (filterField && (filterArgs == null ? void 0 : filterArgs.before)) {
+        filter[collectionName][filterField] = {
+          ...filter[collectionName][filterField] || {},
+          before: filterArgs.before
+        };
+      }
+      if (filterField && (filterArgs == null ? void 0 : filterArgs.after)) {
+        filter[collectionName][filterField] = {
+          ...filter[collectionName][filterField] || {},
+          after: filterArgs.after
+        };
+      }
+      if (filterField && (filterArgs == null ? void 0 : filterArgs.booleanEquals) !== null && (filterArgs == null ? void 0 : filterArgs.booleanEquals) !== void 0) {
+        filter[collectionName][filterField] = {
+          ...filter[collectionName][filterField] || {},
+          eq: filterArgs.booleanEquals
+        };
+      }
       if (includeDocuments === true) {
         const sort = sortKey || this.schema.getIsTitleFieldName(collectionName);
         const response = order === "asc" ? await this.api.request(`#graphql
-      query($collection: String!, $includeDocuments: Boolean!, $sort: String,  $limit: Float, $after: String){
+      query($collection: String!, $includeDocuments: Boolean!, $sort: String,  $limit: Float, $after: String, $filter: DocumentFilter){
         collection(collection: $collection){
           name
           label
           format
           templates
-          documents(sort: $sort, after: $after, first: $limit) @include(if: $includeDocuments) {
+          documents(sort: $sort, after: $after, first: $limit, filter: $filter) @include(if: $includeDocuments) {
             totalCount
             pageInfo {
               hasPreviousPage
@@ -2608,16 +2652,17 @@ mutation addPendingDocumentMutation(
             includeDocuments,
             sort,
             limit: 50,
-            after
+            after,
+            filter
           }
         }) : await this.api.request(`#graphql
-      query($collection: String!, $includeDocuments: Boolean!, $sort: String,  $limit: Float, $after: String){
+      query($collection: String!, $includeDocuments: Boolean!, $sort: String,  $limit: Float, $after: String, $filter: DocumentFilter){
         collection(collection: $collection){
           name
           label
           format
           templates
-          documents(sort: $sort, before: $after, last: $limit) @include(if: $includeDocuments) {
+          documents(sort: $sort, before: $after, last: $limit, filter: $filter) @include(if: $includeDocuments) {
             totalCount
             pageInfo {
               hasPreviousPage
@@ -2649,7 +2694,8 @@ mutation addPendingDocumentMutation(
             includeDocuments,
             sort,
             limit: 50,
-            after
+            after,
+            filter
           }
         });
         return response.collection;
@@ -2718,8 +2764,9 @@ mutation addPendingDocumentMutation(
     loginScreen,
     getModalActions
   }) => {
+    var _a, _b, _c, _d, _e;
     const client = cms.api.tina;
-    const isLocal = client.isLocalMode;
+    const isTinaCloud = !client.isLocalMode && !((_e = (_d = (_c = (_b = (_a = client.schema) == null ? void 0 : _a.config) == null ? void 0 : _b.config) == null ? void 0 : _c.admin) == null ? void 0 : _d.auth) == null ? void 0 : _e.customAuth);
     const [activeModal, setActiveModal] = React.useState(null);
     const [showChildren, setShowChildren] = React.useState(false);
     React__default["default"].useEffect(() => {
@@ -2748,8 +2795,8 @@ mutation addPendingDocumentMutation(
       }
     }) : [];
     return /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, activeModal === "authenticate" && /* @__PURE__ */ React__default["default"].createElement(ModalBuilder, {
-      title: isLocal ? "Enter into edit mode" : "Tina Cloud Authorization",
-      message: isLocal ? "To save edits, enter into edit mode. On save, changes will saved to the local filesystem." : "To save edits, Tina Cloud authorization is required. On save, changes will get commited using your account.",
+      title: isTinaCloud ? "Tina Cloud Authorization" : "Enter into edit mode",
+      message: isTinaCloud ? "To save edits, Tina Cloud authorization is required. On save, changes will get commited using your account." : "To save edits, enter into edit mode. On save, changes will saved to the local filesystem.",
       close,
       actions: [
         ...otherModalActions,
@@ -2762,7 +2809,7 @@ mutation addPendingDocumentMutation(
           primary: false
         },
         {
-          name: isLocal ? "Enter Edit Mode" : "Continue to Tina Cloud",
+          name: isTinaCloud ? "Continue to Tina Cloud" : "Enter Edit Mode",
           action: async () => {
             const token = await client.authenticate();
             if (typeof (client == null ? void 0 : client.onLogin) === "function") {
@@ -3265,6 +3312,9 @@ mutation addPendingDocumentMutation(
 .tina-tailwind .mt-2 {
   margin-top: 8px;
 }
+.tina-tailwind .ml-1\\.5 {
+  margin-left: 6px;
+}
 .tina-tailwind .mb-4 {
   margin-bottom: 16px;
 }
@@ -3292,6 +3342,9 @@ mutation addPendingDocumentMutation(
 .tina-tailwind .table {
   display: table;
 }
+.tina-tailwind .grid {
+  display: grid;
+}
 .tina-tailwind .h-screen {
   height: 100vh;
 }
@@ -3402,9 +3455,18 @@ mutation addPendingDocumentMutation(
 .tina-tailwind .cursor-pointer {
   cursor: pointer;
 }
+.tina-tailwind .grid-flow-col {
+  grid-auto-flow: column;
+}
 .tina-tailwind .flex-col {
   flex-direction: column;
 }
+.tina-tailwind .flex-wrap {
+  flex-wrap: wrap;
+}
+.tina-tailwind .items-start {
+  align-items: flex-start;
+}
 .tina-tailwind .items-end {
   align-items: flex-end;
 }
@@ -3447,6 +3509,12 @@ mutation addPendingDocumentMutation(
   --tw-divide-opacity: 1;
   border-color: rgb(230 227 239 / var(--tw-divide-opacity));
 }
+.tina-tailwind .self-end {
+  align-self: flex-end;
+}
+.tina-tailwind .justify-self-end {
+  justify-self: end;
+}
 .tina-tailwind .overflow-hidden {
   overflow: hidden;
 }
@@ -3461,6 +3529,9 @@ mutation addPendingDocumentMutation(
 .tina-tailwind .whitespace-normal {
   white-space: normal;
 }
+.tina-tailwind .whitespace-nowrap {
+  white-space: nowrap;
+}
 .tina-tailwind .rounded-lg {
   border-radius: 8px;
 }
@@ -3514,6 +3585,11 @@ mutation addPendingDocumentMutation(
   --tw-gradient-to: rgb(29 44 108 / 0);
   --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
 }
+.tina-tailwind .from-gray-50\\/50 {
+  --tw-gradient-from: rgb(246 246 249 / .5);
+  --tw-gradient-to: rgb(246 246 249 / 0);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
 .tina-tailwind .from-gray-800 {
   --tw-gradient-from: #363145;
   --tw-gradient-to: rgb(54 49 69 / 0);
@@ -3526,6 +3602,9 @@ mutation addPendingDocumentMutation(
 .tina-tailwind .to-gray-900 {
   --tw-gradient-to: #252336;
 }
+.tina-tailwind .to-gray-50 {
+  --tw-gradient-to: #F6F6F9;
+}
 .tina-tailwind .to-black {
   --tw-gradient-to: #000;
 }
@@ -3549,6 +3628,10 @@ mutation addPendingDocumentMutation(
   padding-left: 48px;
   padding-right: 48px;
 }
+.tina-tailwind .py-8 {
+  padding-top: 32px;
+  padding-bottom: 32px;
+}
 .tina-tailwind .py-10 {
   padding-top: 40px;
   padding-bottom: 40px;
@@ -3580,11 +3663,8 @@ mutation addPendingDocumentMutation(
 .tina-tailwind .pt-4 {
   padding-top: 16px;
 }
-.tina-tailwind .pb-4 {
-  padding-bottom: 16px;
-}
-.tina-tailwind .pt-16 {
-  padding-top: 64px;
+.tina-tailwind .pt-12 {
+  padding-top: 48px;
 }
 .tina-tailwind .pr-3 {
   padding-right: 12px;
@@ -3598,9 +3678,6 @@ mutation addPendingDocumentMutation(
 .tina-tailwind .pl-5 {
   padding-left: 20px;
 }
-.tina-tailwind .pt-3 {
-  padding-top: 12px;
-}
 .tina-tailwind .pl-18 {
   padding-left: 72px;
 }
@@ -4092,26 +4169,6 @@ mutation addPendingDocumentMutation(
       isLoading
     };
   }
-  const parseURL = (url) => {
-    if (url.includes("localhost")) {
-      return { branch: null, isLocalClient: true, clientId: null };
-    }
-    const params = new URL(url);
-    const pattern = new UrlPattern__default["default"]("/content/:clientId/github/*", {
-      escapeChar: " "
-    });
-    const result = pattern.match(params.pathname);
-    const branch = result == null ? void 0 : result._;
-    const clientId = result == null ? void 0 : result.clientId;
-    if (!branch || !clientId) {
-      throw new Error(`Invalid URL format provided. Expected: https://content.tinajs.io/content/<ClientID>/github/<Branch> but but received ${url}`);
-    }
-    return {
-      branch,
-      clientId,
-      isLocalClient: false
-    };
-  };
   const errorButtonStyles = {
     background: "#eb6337",
     padding: "12px 18px",
@@ -4198,7 +4255,7 @@ mutation addPendingDocumentMutation(
     schema,
     ...props
   }) => {
-    var _a;
+    var _a, _b, _c, _d, _e;
     React__default["default"].useEffect(() => {
       console.warn(`
     * Tina no longer requires wrapping your site in the TinaProvider
@@ -4209,12 +4266,13 @@ mutation addPendingDocumentMutation(
       console.warn("The apiURL prop is deprecated. Please see https://tina.io/blog/tina-v-0.68.14 for information on how to upgrade to the new API");
     }
     const apiURL = ((_a = props == null ? void 0 : props.client) == null ? void 0 : _a.apiUrl) || (props == null ? void 0 : props.apiURL);
-    const { branch, clientId, isLocalClient } = apiURL ? parseURL(apiURL) : {
+    const isLocalOverride = (_d = (_c = (_b = schema == null ? void 0 : schema.config) == null ? void 0 : _b.admin) == null ? void 0 : _c.auth) == null ? void 0 : _d.useLocalAuth;
+    const { branch, clientId, isLocalClient } = apiURL ? schemaTools.parseURL(apiURL) : {
       branch: props.branch,
       clientId: props.clientId,
       isLocalClient: props == null ? void 0 : props.isLocalClient
     };
-    if (typeof isLocalClient === "undefined" || !isLocalClient && (!branch || !clientId)) {
+    if (typeof isLocalClient === "undefined" || !isLocalClient && (!branch || !clientId) && !schema.config.contentApiUrlOverride) {
       throw new Error("Invalid setup. See https://tina.io/docs/tina-cloud/connecting-site/ for more information.");
     }
     if (!schema) {
@@ -4222,9 +4280,9 @@ mutation addPendingDocumentMutation(
     }
     return /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, /* @__PURE__ */ React__default["default"].createElement(TinaCloudProvider, {
       branch,
-      clientId,
+      clientId: clientId || ((_e = schema == null ? void 0 : schema.config) == null ? void 0 : _e.clientId),
       tinaioConfig: props.tinaioConfig,
-      isLocalClient,
+      isLocalClient: isLocalOverride || isLocalClient,
       cmsCallback: props.cmsCallback,
       mediaStore: props.mediaStore,
       apiUrl: apiURL,
@@ -4568,9 +4626,15 @@ This will work when developing locally but NOT when deployed to production.
   function BiRename(props) {
     return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "d": "M20.005 5.995h-1v2h1v8h-1v2h1c1.103 0 2-.897 2-2v-8c0-1.102-.898-2-2-2zm-14 4H15v4H6.005z" } }, { "tag": "path", "attr": { "d": "M17.005 17.995V4H20V2h-8v2h3.005v1.995h-11c-1.103 0-2 .897-2 2v8c0 1.103.897 2 2 2h11V20H12v2h8v-2h-2.995v-2.005zm-13-2v-8h11v8h-11z" } }] })(props);
   }
+  function BiSearch(props) {
+    return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "d": "M10 18a7.952 7.952 0 0 0 4.897-1.688l4.396 4.396 1.414-1.414-4.396-4.396A7.952 7.952 0 0 0 18 10c0-4.411-3.589-8-8-8s-8 3.589-8 8 3.589 8 8 8zm0-14c3.309 0 6 2.691 6 6s-2.691 6-6 6-6-2.691-6-6 2.691-6 6-6z" } }] })(props);
+  }
   function BiTrash(props) {
     return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "d": "M5 20a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8h2V6h-4V4a2 2 0 0 0-2-2H9a2 2 0 0 0-2 2v2H3v2h2zM9 4h6v2H9zM8 8h9v12H7V8z" } }, { "tag": "path", "attr": { "d": "M9 10h2v8H9zm4 0h2v8h-2z" } }] })(props);
   }
+  function BiX(props) {
+    return GenIcon({ "tag": "svg", "attr": { "viewBox": "0 0 24 24" }, "child": [{ "tag": "path", "attr": { "d": "m16.192 6.344-4.243 4.242-4.242-4.242-1.414 1.414L10.535 12l-4.242 4.242 1.414 1.414 4.242-4.242 4.243 4.242 1.414-1.414L13.364 12l4.242-4.242z" } }] })(props);
+  }
   const slugify = (text) => {
     return text.toString().toLowerCase().trim().replace(/[^\w\s-]/g, "").replace(/[\s_-]+/g, "_").replace(/^-+|-+$/g, "");
   };
@@ -4829,14 +4893,14 @@ This will work when developing locally but NOT when deployed to production.
     children
   }) => {
     return /* @__PURE__ */ React__default["default"].createElement("div", {
-      className: "relative left-0 w-full h-full bg-gray-50 shadow-2xl overflow-y-auto transition-opacity duration-300 ease-out flex flex-col opacity-100"
+      className: "relative left-0 w-full h-full bg-gradient-to-b from-gray-50/50 to-gray-50 shadow-2xl overflow-y-auto transition-opacity duration-300 ease-out flex flex-col opacity-100"
     }, children);
   };
   const PageHeader = ({
     isLocalMode,
     children
   }) => /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, isLocalMode && /* @__PURE__ */ React__default["default"].createElement(toolkit.LocalWarning, null), !isLocalMode && /* @__PURE__ */ React__default["default"].createElement(toolkit.BillingWarning, null), /* @__PURE__ */ React__default["default"].createElement("div", {
-    className: "bg-white pb-4 pt-16 border-b border-gray-200 px-12"
+    className: "pt-12 px-12"
   }, /* @__PURE__ */ React__default["default"].createElement("div", {
     className: "w-full mx-auto max-w-screen-xl"
   }, /* @__PURE__ */ React__default["default"].createElement("div", {
@@ -4845,7 +4909,7 @@ This will work when developing locally but NOT when deployed to production.
   const PageBody = ({
     children
   }) => /* @__PURE__ */ React__default["default"].createElement("div", {
-    className: "py-10 px-12"
+    className: "py-8 px-12"
   }, children);
   const PageBodyNarrow = ({
     children
@@ -4963,7 +5027,7 @@ This will work when developing locally but NOT when deployed to production.
       fontWeight: "normal"
     }
   }, "Please wait, Tina is loading data..."))));
-  const useGetCollection = (cms, collectionName, includeDocuments = true, after = "", sortKey) => {
+  const useGetCollection = (cms, collectionName, includeDocuments = true, after = "", sortKey, filterArgs) => {
     const api = new TinaAdminApi(cms);
     const schema = cms.api.tina.schema;
     const collectionExtra = schema.getCollection(collectionName);
@@ -4978,7 +5042,7 @@ This will work when developing locally but NOT when deployed to production.
           const { name, order } = JSON.parse(sortKey || "{}");
           const validSortKey = ((_a = collectionExtra.fields) == null ? void 0 : _a.map((x) => x.name).includes(name)) ? name : void 0;
           try {
-            const collection2 = await api.fetchCollection(collectionName, includeDocuments, after, validSortKey, order);
+            const collection2 = await api.fetchCollection(collectionName, includeDocuments, after, validSortKey, order, filterArgs);
             setCollection(collection2);
           } catch (error2) {
             cms.alerts.error(`[${error2.name}] GetCollection failed: ${error2.message}`);
@@ -5001,9 +5065,10 @@ This will work when developing locally but NOT when deployed to production.
     includeDocuments = true,
     startCursor,
     sortKey,
-    children
+    children,
+    filterArgs
   }) => {
-    const { collection, loading, error, reFetchCollection, collectionExtra } = useGetCollection(cms, collectionName, includeDocuments, startCursor || "", sortKey) || {};
+    const { collection, loading, error, reFetchCollection, collectionExtra } = useGetCollection(cms, collectionName, includeDocuments, startCursor || "", sortKey, filterArgs) || {};
     if (error) {
       return null;
     }
@@ -5068,7 +5133,13 @@ This will work when developing locally but NOT when deployed to production.
     const [vars, setVars] = React__default["default"].useState({
       collection: collectionName,
       relativePath: "",
-      newRelativePath: ""
+      newRelativePath: "",
+      filterField: "",
+      startsWith: "",
+      endsWith: "",
+      before: "",
+      after: "",
+      booleanEquals: null
     });
     const [endCursor, setEndCursor] = React.useState("");
     const [prevCursors, setPrevCursors] = React.useState([]);
@@ -5086,23 +5157,55 @@ This will work when developing locally but NOT when deployed to production.
       setEndCursor("");
       setPrevCursors([]);
     }, [loc]);
+    React.useEffect(() => {
+      setVars((old) => ({
+        ...old,
+        collection: collectionName,
+        relativePath: "",
+        newRelativePath: "",
+        filterField: "",
+        startsWith: "",
+        endsWith: "",
+        before: "",
+        after: "",
+        booleanEquals: null
+      }));
+    }, [collectionName]);
     return /* @__PURE__ */ React__default["default"].createElement(GetCMS, null, (cms) => {
       return /* @__PURE__ */ React__default["default"].createElement(GetCollection, {
         cms,
         collectionName,
         includeDocuments: true,
         startCursor: endCursor,
-        sortKey
+        sortKey,
+        filterArgs: collectionName === vars.collection ? vars : {
+          collection: collectionName,
+          relativePath: "",
+          newRelativePath: "",
+          filterField: "",
+          startsWith: "",
+          endsWith: "",
+          before: "",
+          after: "",
+          booleanEquals: null
+        }
       }, (collection, _loading, reFetchCollection, collectionExtra) => {
-        var _a, _b, _c, _d, _e, _f, _g, _h, _i;
+        var _a, _b, _c, _d, _e, _f, _g, _h, _i, _j, _k;
         const totalCount = 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 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 collectionDefinition = cms.api.tina.schema.getCollection(collection.name);
-        const allowCreate = (_d = (_c = (_b = collectionDefinition == null ? void 0 : collectionDefinition.ui) == null ? void 0 : _b.allowedActions) == null ? void 0 : _c.create) != null ? _d : true;
-        const allowDelete = (_g = (_f = (_e = collectionDefinition == null ? void 0 : collectionDefinition.ui) == null ? void 0 : _e.allowedActions) == null ? void 0 : _f.delete) != null ? _g : true;
+        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;
         return /* @__PURE__ */ React__default["default"].createElement(PageWrapper, null, /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, deleteModalOpen && /* @__PURE__ */ React__default["default"].createElement(DeleteModal, {
           filename: vars.relativePath,
           deleteFunc: async () => {
@@ -5143,13 +5246,17 @@ This will work when developing locally but NOT when deployed to production.
           },
           close: () => setRenameModalOpen(false)
         }), /* @__PURE__ */ React__default["default"].createElement(PageHeader, {
-          isLocalMode: (_i = (_h = cms == null ? void 0 : cms.api) == null ? void 0 : _h.tina) == null ? void 0 : _i.isLocalMode
-        }, /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, /* @__PURE__ */ React__default["default"].createElement("div", {
+          isLocalMode: (_j = (_i = cms == null ? void 0 : cms.api) == null ? void 0 : _i.tina) == null ? void 0 : _j.isLocalMode
+        }, /* @__PURE__ */ React__default["default"].createElement("div", {
+          className: "w-full grid grid-flow-col items-end gap-4"
+        }, /* @__PURE__ */ React__default["default"].createElement("div", {
           className: "flex flex-col gap-4"
         }, /* @__PURE__ */ React__default["default"].createElement("h3", {
           className: "font-sans text-2xl text-gray-700"
         }, collection.label ? collection.label : collection.name), (fields == null ? void 0 : fields.length) > 0 && /* @__PURE__ */ React__default["default"].createElement("div", {
-          className: "flex gap-2 items-center"
+          className: "flex gap-4 items-end flex-wrap"
+        }, /* @__PURE__ */ React__default["default"].createElement("div", {
+          className: "flex flex-col gap-2 items-start"
         }, /* @__PURE__ */ React__default["default"].createElement("label", {
           htmlFor: "sort",
           className: "block font-sans text-xs font-semibold text-gray-500 whitespace-normal"
@@ -5165,14 +5272,14 @@ This will work when developing locally but NOT when deployed to production.
             },
             ...fields.map((x) => [
               {
-                label: (x.label || x.name) + " (Ascending)",
+                label: (x.label || x.name) + (x.type === "datetime" ? " (Oldest First)" : " (Ascending)"),
                 value: JSON.stringify({
                   name: x.name,
                   order: "asc"
                 })
               },
               {
-                label: (x.label || x.name) + " (Descending)",
+                label: (x.label || x.name) + (x.type === "datetime" ? " (Newest First)" : " (Descending)"),
                 value: JSON.stringify({
                   name: x.name,
                   order: "desc"
@@ -5193,14 +5300,154 @@ This will work when developing locally but NOT when deployed to production.
               setSortOrder(val.order);
             }
           }
-        }))), !collection.templates && allowCreate && /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Link, {
+        })), /* @__PURE__ */ React__default["default"].createElement("div", {
+          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: 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
+              }));
+            }
+          }
+        })), 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: 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: 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: "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: () => {
+            setEndCursor("");
+            setPrevCursors([]);
+            reFetchCollection();
+          },
+          variant: "primary"
+        }, "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: () => {
+            setVars((old) => ({
+              ...old,
+              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", {
+          className: "flex self-end	justify-self-end"
+        }, !collection.templates && allowCreate && /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Link, {
           to: `new`,
-          className: "icon-parent inline-flex items-center font-medium focus:outline-none focus:ring-2 focus:shadow-outline text-center rounded-full justify-center transition-all duration-150 ease-out  shadow text-white bg-blue-500 hover:bg-blue-600 focus:ring-blue-500 text-sm h-10 px-6"
+          className: "icon-parent inline-flex items-center font-medium focus:outline-none focus:ring-2 focus:shadow-outline text-center rounded-full justify-center transition-all duration-150 ease-out whitespace-nowrap shadow text-white bg-blue-500 hover:bg-blue-600 focus:ring-blue-500 text-sm h-10 px-6"
         }, "Create New", " ", /* @__PURE__ */ React__default["default"].createElement(BiPlus, {
           className: "w-5 h-full ml-1 opacity-70"
         })), collection.templates && allowCreate && /* @__PURE__ */ React__default["default"].createElement(TemplateMenu, {
           templates: collection.templates
-        }))), /* @__PURE__ */ React__default["default"].createElement(PageBody, null, /* @__PURE__ */ React__default["default"].createElement("div", {
+        })))), /* @__PURE__ */ React__default["default"].createElement(PageBody, null, /* @__PURE__ */ React__default["default"].createElement("div", {
           className: "w-full mx-auto max-w-screen-xl"
         }, totalCount > 0 && /* @__PURE__ */ React__default["default"].createElement("table", {
           className: "table-auto shadow bg-white border-b border-gray-200 w-full max-w-full rounded-lg"
@@ -5272,11 +5519,12 @@ This will work when developing locally but NOT when deployed to production.
                   className: "text-red-500"
                 }),
                 onMouseDown: () => {
-                  setVars({
+                  setVars((old) => ({
+                    ...old,
                     collection: collectionName,
                     relativePath: document.node._sys.breadcrumbs.join("/") + document.node._sys.extension,
                     newRelativePath: ""
-                  });
+                  }));
                   setDeleteModalOpen(true);
                 }
               },
@@ -5288,18 +5536,19 @@ This will work when developing locally but NOT when deployed to production.
                   className: "text-red-500"
                 }),
                 onMouseDown: () => {
-                  setVars({
+                  setVars((old) => ({
+                    ...old,
                     collection: collectionName,
                     relativePath: document.node._sys.breadcrumbs.join("/") + document.node._sys.extension,
                     newRelativePath: ""
-                  });
+                  }));
                   setRenameModalOpen(true);
                 }
               }
             ].filter(Boolean)
           })));
         }))), /* @__PURE__ */ React__default["default"].createElement("div", {
-          className: "pt-3"
+          className: "pt-4"
         }, /* @__PURE__ */ React__default["default"].createElement(toolkit.CursorPaginator, {
           variant: "white",
           hasNext: sortOrder === "asc" ? pageInfo == null ? void 0 : pageInfo.hasNextPage : pageInfo.hasPreviousPage,