tinacms 1.1.5 → 1.2.0

package/dist/index.es.js

@@ -1,4 +1,4 @@
-import { useCMS, Form, GlobalFormPlugin, EventBus, Modal, ModalPopup, ModalHeader, ModalBody, ModalActions, Button, LoadingDots, useLocalStorage, TinaCMS, BranchSwitcherPlugin, BranchDataProvider, TinaProvider, TinaMediaStore, DummyMediaStore, Nav, LocalWarning, BillingWarning, Select, OverflowMenu, CursorPaginator, PopupModal, BaseTextField, wrapFieldsWithMeta, FormStatus, FormBuilder } from "@tinacms/toolkit";
+import { useCMS, Form, GlobalFormPlugin, EventBus, Modal, ModalPopup, ModalHeader, ModalBody, ModalActions, Button, LoadingDots, useLocalStorage, TinaCMS, BranchSwitcherPlugin, BranchDataProvider, TinaProvider, TinaMediaStore, DummyMediaStore, Nav, LocalWarning, BillingWarning, Select, Input, ReactDateTimeWithStyles, textFieldClasses, Toggle, OverflowMenu, CursorPaginator, PopupModal, BaseTextField, wrapFieldsWithMeta, FormStatus, FormBuilder } from "@tinacms/toolkit";
 export * from "@tinacms/toolkit";
 export { MdxFieldPluginExtendible } from "@tinacms/toolkit";
 import * as G from "graphql";
@@ -6,12 +6,11 @@ import { TypeInfo, visit, visitWithTypeInfo, getNamedType, GraphQLObjectType, is
 import set from "lodash.set";
 import React, { useState, useCallback, useEffect, Fragment, useMemo } from "react";
 import { getIn, setIn } from "final-form";
-import { resolveForm, TinaSchema, addNamespaceToSchema, validateSchema } from "@tinacms/schema-tools";
+import { resolveForm, TinaSchema, addNamespaceToSchema, parseURL, validateSchema } from "@tinacms/schema-tools";
 export { NAMER, resolveForm } from "@tinacms/schema-tools";
 import gql$1 from "graphql-tag";
 import * as yup from "yup";
 import { setEditing, TinaDataContext, EditContext, useEditState } from "@tinacms/sharedctx";
-import UrlPattern from "url-pattern";
 import { NavLink, useSearchParams, useNavigate, useParams, useLocation, Link, HashRouter, Routes, Route } from "react-router-dom";
 import { Transition, Menu } from "@headlessui/react";
 import { useWindowWidth } from "@react-hook/window-size";
@@ -2117,7 +2116,7 @@ const parseRefForBranchName = (ref) => {
 };
 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 EventBus();
     this.addPendingContent = async (props) => {
       const mutation = `#graphql
@@ -2167,6 +2166,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 TinaSchema({
         version: { fullVersion: "", major: "", minor: "", patch: "" },
@@ -2176,6 +2184,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);
@@ -2222,6 +2233,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;
@@ -2466,10 +2480,7 @@ class LocalClient extends Client {
     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";
   }
 }
@@ -2550,17 +2561,50 @@ class TinaAdminApi {
   }
 }`, { 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
@@ -2592,16 +2636,17 @@ class TinaAdminApi {
           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
@@ -2633,7 +2678,8 @@ class TinaAdminApi {
           includeDocuments,
           sort,
           limit: 50,
-          after
+          after,
+          filter
         }
       });
       return response.collection;
@@ -2702,8 +2748,9 @@ const AuthWallInner = ({
   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] = useState(null);
   const [showChildren, setShowChildren] = useState(false);
   React.useEffect(() => {
@@ -2732,8 +2779,8 @@ const AuthWallInner = ({
     }
   }) : [];
   return /* @__PURE__ */ React.createElement(React.Fragment, null, activeModal === "authenticate" && /* @__PURE__ */ React.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,
@@ -2746,7 +2793,7 @@ const AuthWallInner = ({
         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") {
@@ -3249,6 +3296,9 @@ var styles = `.tina-tailwind {
 .tina-tailwind .mt-2 {
   margin-top: 8px;
 }
+.tina-tailwind .ml-1\\.5 {
+  margin-left: 6px;
+}
 .tina-tailwind .mb-4 {
   margin-bottom: 16px;
 }
@@ -3276,6 +3326,9 @@ var styles = `.tina-tailwind {
 .tina-tailwind .table {
   display: table;
 }
+.tina-tailwind .grid {
+  display: grid;
+}
 .tina-tailwind .h-screen {
   height: 100vh;
 }
@@ -3386,9 +3439,18 @@ var styles = `.tina-tailwind {
 .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;
 }
@@ -3431,6 +3493,12 @@ var styles = `.tina-tailwind {
   --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;
 }
@@ -3445,6 +3513,9 @@ var styles = `.tina-tailwind {
 .tina-tailwind .whitespace-normal {
   white-space: normal;
 }
+.tina-tailwind .whitespace-nowrap {
+  white-space: nowrap;
+}
 .tina-tailwind .rounded-lg {
   border-radius: 8px;
 }
@@ -3498,6 +3569,11 @@ var styles = `.tina-tailwind {
   --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);
@@ -3510,6 +3586,9 @@ var styles = `.tina-tailwind {
 .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;
 }
@@ -3533,6 +3612,10 @@ var styles = `.tina-tailwind {
   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;
@@ -3564,11 +3647,8 @@ var styles = `.tina-tailwind {
 .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;
@@ -3582,9 +3662,6 @@ var styles = `.tina-tailwind {
 .tina-tailwind .pl-5 {
   padding-left: 20px;
 }
-.tina-tailwind .pt-3 {
-  padding-top: 12px;
-}
 .tina-tailwind .pl-18 {
   padding-left: 72px;
 }
@@ -4076,26 +4153,6 @@ function useTina({
     isLoading
   };
 }
-const parseURL = (url) => {
-  if (url.includes("localhost")) {
-    return { branch: null, isLocalClient: true, clientId: null };
-  }
-  const params = new URL(url);
-  const pattern = new UrlPattern("/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",
@@ -4182,7 +4239,7 @@ const TinaCMSProvider2 = ({
   schema,
   ...props
 }) => {
-  var _a;
+  var _a, _b, _c, _d, _e;
   React.useEffect(() => {
     console.warn(`
     * Tina no longer requires wrapping your site in the TinaProvider
@@ -4193,12 +4250,13 @@ const TinaCMSProvider2 = ({
     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 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 ? 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) {
@@ -4206,9 +4264,9 @@ const TinaCMSProvider2 = ({
   }
   return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.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,
@@ -4552,9 +4610,15 @@ function BiPlus(props) {
 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, "");
 };
@@ -4813,14 +4877,14 @@ const PageWrapper = ({
   children
 }) => {
   return /* @__PURE__ */ React.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.createElement(React.Fragment, null, isLocalMode && /* @__PURE__ */ React.createElement(LocalWarning, null), !isLocalMode && /* @__PURE__ */ React.createElement(BillingWarning, null), /* @__PURE__ */ React.createElement("div", {
-  className: "bg-white pb-4 pt-16 border-b border-gray-200 px-12"
+  className: "pt-12 px-12"
 }, /* @__PURE__ */ React.createElement("div", {
   className: "w-full mx-auto max-w-screen-xl"
 }, /* @__PURE__ */ React.createElement("div", {
@@ -4829,7 +4893,7 @@ const PageHeader = ({
 const PageBody = ({
   children
 }) => /* @__PURE__ */ React.createElement("div", {
-  className: "py-10 px-12"
+  className: "py-8 px-12"
 }, children);
 const PageBodyNarrow = ({
   children
@@ -4947,7 +5011,7 @@ const LoadingPage = () => /* @__PURE__ */ React.createElement(React.Fragment, nu
     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);
@@ -4962,7 +5026,7 @@ const useGetCollection = (cms, collectionName, includeDocuments = true, after =
         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}`);
@@ -4985,9 +5049,10 @@ const GetCollection = ({
   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;
   }
@@ -5052,7 +5117,13 @@ const CollectionListPage = () => {
   const [vars, setVars] = React.useState({
     collection: collectionName,
     relativePath: "",
-    newRelativePath: ""
+    newRelativePath: "",
+    filterField: "",
+    startsWith: "",
+    endsWith: "",
+    before: "",
+    after: "",
+    booleanEquals: null
   });
   const [endCursor, setEndCursor] = useState("");
   const [prevCursors, setPrevCursors] = useState([]);
@@ -5070,23 +5141,55 @@ const CollectionListPage = () => {
     setEndCursor("");
     setPrevCursors([]);
   }, [loc]);
+  useEffect(() => {
+    setVars((old) => ({
+      ...old,
+      collection: collectionName,
+      relativePath: "",
+      newRelativePath: "",
+      filterField: "",
+      startsWith: "",
+      endsWith: "",
+      before: "",
+      after: "",
+      booleanEquals: null
+    }));
+  }, [collectionName]);
   return /* @__PURE__ */ React.createElement(GetCMS, null, (cms) => {
     return /* @__PURE__ */ React.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.createElement(PageWrapper, null, /* @__PURE__ */ React.createElement(React.Fragment, null, deleteModalOpen && /* @__PURE__ */ React.createElement(DeleteModal, {
         filename: vars.relativePath,
         deleteFunc: async () => {
@@ -5127,13 +5230,17 @@ const CollectionListPage = () => {
         },
         close: () => setRenameModalOpen(false)
       }), /* @__PURE__ */ React.createElement(PageHeader, {
-        isLocalMode: (_i = (_h = cms == null ? void 0 : cms.api) == null ? void 0 : _h.tina) == null ? void 0 : _i.isLocalMode
-      }, /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", {
+        isLocalMode: (_j = (_i = cms == null ? void 0 : cms.api) == null ? void 0 : _i.tina) == null ? void 0 : _j.isLocalMode
+      }, /* @__PURE__ */ React.createElement("div", {
+        className: "w-full grid grid-flow-col items-end gap-4"
+      }, /* @__PURE__ */ React.createElement("div", {
         className: "flex flex-col gap-4"
       }, /* @__PURE__ */ React.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.createElement("div", {
-        className: "flex gap-2 items-center"
+        className: "flex gap-4 items-end flex-wrap"
+      }, /* @__PURE__ */ React.createElement("div", {
+        className: "flex flex-col gap-2 items-start"
       }, /* @__PURE__ */ React.createElement("label", {
         htmlFor: "sort",
         className: "block font-sans text-xs font-semibold text-gray-500 whitespace-normal"
@@ -5149,14 +5256,14 @@ const CollectionListPage = () => {
           },
           ...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"
@@ -5177,14 +5284,154 @@ const CollectionListPage = () => {
             setSortOrder(val.order);
           }
         }
-      }))), !collection.templates && allowCreate && /* @__PURE__ */ React.createElement(Link, {
+      })), /* @__PURE__ */ React.createElement("div", {
+        className: "flex flex-wrap gap-4 items-end"
+      }, /* @__PURE__ */ React.createElement("div", {
+        className: "flex flex-shrink-0 flex-col gap-2 items-start"
+      }, /* @__PURE__ */ React.createElement("label", {
+        htmlFor: "filter",
+        className: "block font-sans text-xs font-semibold text-gray-500 whitespace-normal"
+      }, "Filter by"), /* @__PURE__ */ React.createElement(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.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", {
+        className: "flex flex-shrink-0 flex-col gap-2 items-start"
+      }, /* @__PURE__ */ React.createElement("label", {
+        htmlFor: "startsWith",
+        className: "block font-sans text-xs font-semibold text-gray-500 whitespace-normal"
+      }, "Starts with"), /* @__PURE__ */ React.createElement(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.createElement("div", {
+        className: "flex flex-shrink-0 gap-4"
+      }, /* @__PURE__ */ React.createElement("div", {
+        className: "flex flex-col gap-2 items-start"
+      }, /* @__PURE__ */ React.createElement("label", {
+        htmlFor: "dateAfter",
+        className: "block font-sans text-xs font-semibold text-gray-500 whitespace-normal"
+      }, "After"), /* @__PURE__ */ React.createElement(ReactDateTimeWithStyles, {
+        inputProps: {
+          className: textFieldClasses
+        },
+        value: vars.after,
+        onChange: (e) => {
+          setVars((old) => ({
+            ...old,
+            after: e.format(),
+            booleanEquals: null,
+            startsWith: ""
+          }));
+        }
+      })), /* @__PURE__ */ React.createElement("div", {
+        className: "flex flex-col gap-2 items-start"
+      }, /* @__PURE__ */ React.createElement("label", {
+        htmlFor: "dateBefore",
+        className: "block font-sans text-xs font-semibold text-gray-500 whitespace-normal"
+      }, "Before"), /* @__PURE__ */ React.createElement(ReactDateTimeWithStyles, {
+        inputProps: {
+          className: textFieldClasses
+        },
+        value: vars.before,
+        onChange: (e) => {
+          setVars((old) => ({
+            ...old,
+            before: e.format(),
+            booleanEquals: null,
+            startsWith: ""
+          }));
+        }
+      }))), showBooleanToggle && /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("div", {
+        className: "flex flex-col gap-2 items-start"
+      }, /* @__PURE__ */ React.createElement("label", {
+        htmlFor: "toggle",
+        className: "block font-sans text-xs font-semibold text-gray-500 whitespace-normal"
+      }, filterField.label || filterField.name), /* @__PURE__ */ React.createElement(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.createElement("div", {
+        className: "flex gap-3"
+      }, /* @__PURE__ */ React.createElement(Button, {
+        onClick: () => {
+          setEndCursor("");
+          setPrevCursors([]);
+          reFetchCollection();
+        },
+        variant: "primary"
+      }, "Search", " ", /* @__PURE__ */ React.createElement(BiSearch, {
+        className: "w-5 h-full ml-1.5 opacity-70"
+      })), (vars.startsWith || vars.after || vars.before || vars.booleanEquals) && /* @__PURE__ */ React.createElement(Button, {
+        onClick: () => {
+          setVars((old) => ({
+            ...old,
+            startsWith: "",
+            after: "",
+            before: "",
+            booleanEquals: null
+          }));
+          setEndCursor("");
+          setPrevCursors([]);
+          reFetchCollection();
+        },
+        variant: "white"
+      }, "Clear", " ", /* @__PURE__ */ React.createElement(BiX, {
+        className: "w-5 h-full ml-1 opacity-70"
+      })))))), /* @__PURE__ */ React.createElement("div", {
+        className: "flex self-end	justify-self-end"
+      }, !collection.templates && allowCreate && /* @__PURE__ */ React.createElement(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.createElement(BiPlus, {
         className: "w-5 h-full ml-1 opacity-70"
       })), collection.templates && allowCreate && /* @__PURE__ */ React.createElement(TemplateMenu, {
         templates: collection.templates
-      }))), /* @__PURE__ */ React.createElement(PageBody, null, /* @__PURE__ */ React.createElement("div", {
+      })))), /* @__PURE__ */ React.createElement(PageBody, null, /* @__PURE__ */ React.createElement("div", {
         className: "w-full mx-auto max-w-screen-xl"
       }, totalCount > 0 && /* @__PURE__ */ React.createElement("table", {
         className: "table-auto shadow bg-white border-b border-gray-200 w-full max-w-full rounded-lg"
@@ -5256,11 +5503,12 @@ const CollectionListPage = () => {
                 className: "text-red-500"
               }),
               onMouseDown: () => {
-                setVars({
+                setVars((old) => ({
+                  ...old,
                   collection: collectionName,
                   relativePath: document.node._sys.breadcrumbs.join("/") + document.node._sys.extension,
                   newRelativePath: ""
-                });
+                }));
                 setDeleteModalOpen(true);
               }
             },
@@ -5272,18 +5520,19 @@ const CollectionListPage = () => {
                 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.createElement("div", {
-        className: "pt-3"
+        className: "pt-4"
       }, /* @__PURE__ */ React.createElement(CursorPaginator, {
         variant: "white",
         hasNext: sortOrder === "asc" ? pageInfo == null ? void 0 : pageInfo.hasNextPage : pageInfo.hasPreviousPage,