tinacms 0.68.12 → 0.68.15

package/dist/admin/api.d.ts

@@ -25,7 +25,7 @@ export declare class TinaAdminApi {
         collection: string;
         relativePath: string;
     }): Promise<void>;
-    fetchCollection(collectionName: string, includeDocuments: boolean, after?: string): Promise<Collection>;
+    fetchCollection(collectionName: string, includeDocuments: boolean, after?: string, sortKey?: string, order?: 'asc' | 'desc'): Promise<Collection>;
     fetchDocument(collectionName: string, relativePath: string): Promise<{
         document: DocumentForm;
     }>;

package/dist/admin/components/GetCollection.d.ts

@@ -12,17 +12,19 @@ limitations under the License.
 */
 import type { TinaCMS } from '@tinacms/toolkit';
 import type { Collection } from '../types';
-export declare const useGetCollection: (cms: TinaCMS, collectionName: string, includeDocuments?: boolean, after?: string) => {
+export declare const useGetCollection: (cms: TinaCMS, collectionName: string, includeDocuments?: boolean, after?: string, sortKey?: string) => {
     collection: Collection;
     loading: boolean;
     error: Error;
     reFetchCollection: () => void;
+    collectionExtra: import("@tinacms/schema-tools").TinaCloudCollection<true>;
 };
-declare const GetCollection: ({ cms, collectionName, includeDocuments, startCursor, children, }: {
+declare const GetCollection: ({ cms, collectionName, includeDocuments, startCursor, sortKey, children, }: {
     cms: TinaCMS;
     collectionName: string;
     includeDocuments?: boolean;
     startCursor?: string;
+    sortKey?: string;
     children: any;
 }) => JSX.Element;
 export default GetCollection;

package/dist/client.es.js

@@ -36,9 +36,7 @@ class TinaClient {
     };
     this.apiUrl = url;
     this.readonlyToken = token;
-    if (queries) {
-      this.queries = queries(this);
-    }
+    this.queries = queries(this);
   }
   async request(args) {
     const headers = new Headers();
@@ -57,9 +55,18 @@ class TinaClient {
       body: bodyString,
       redirect: "follow"
     });
+    if (!res.ok) {
+      let additionalInfo = "";
+      if (res.status === 401) {
+        additionalInfo = "Please check that your client ID, URL and read only token are configured properly.";
+      }
+      throw new Error(`Server responded with status code ${res.status}, ${res.statusText}. ${additionalInfo ? additionalInfo : ""} Please see our FAQ for more information: https://tina.io/docs/errors/faq/`);
+    }
     const json = await res.json();
     if (json.errors) {
-      throw new Error(`Unable to fetch, errors: 
+      throw new Error(`Unable to fetch, please see our FAQ for more information: https://tina.io/docs/errors/faq/
+  
+        Errors: 
 	${json.errors.map((error) => error.message).join("\n")}`);
     }
     return {

package/dist/client.js

@@ -43,9 +43,7 @@
       };
       this.apiUrl = url;
       this.readonlyToken = token;
-      if (queries) {
-        this.queries = queries(this);
-      }
+      this.queries = queries(this);
     }
     async request(args) {
       const headers = new Headers();
@@ -64,9 +62,18 @@
         body: bodyString,
         redirect: "follow"
       });
+      if (!res.ok) {
+        let additionalInfo = "";
+        if (res.status === 401) {
+          additionalInfo = "Please check that your client ID, URL and read only token are configured properly.";
+        }
+        throw new Error(`Server responded with status code ${res.status}, ${res.statusText}. ${additionalInfo ? additionalInfo : ""} Please see our FAQ for more information: https://tina.io/docs/errors/faq/`);
+      }
       const json = await res.json();
       if (json.errors) {
-        throw new Error(`Unable to fetch, errors: 
+        throw new Error(`Unable to fetch, please see our FAQ for more information: https://tina.io/docs/errors/faq/
+  
+        Errors: 
 	${json.errors.map((error) => error.message).join("\n")}`);
       }
       return {

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, OverflowMenu, CursorPaginator, PopupModal, 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, Select, OverflowMenu, CursorPaginator, PopupModal, FormStatus, FormBuilder } from "@tinacms/toolkit";
 export * from "@tinacms/toolkit";
 import * as G from "graphql";
 import { TypeInfo, visit, visitWithTypeInfo, getNamedType, GraphQLObjectType, isLeafType, GraphQLUnionType, isScalarType as isScalarType$1, getIntrospectionQuery, buildClientSchema, print, parse } from "graphql";
@@ -2155,7 +2155,7 @@ mutation addPendingDocumentMutation(
       const enrichedSchema = new TinaSchema({
         version: { fullVersion: "", major: "", minor: "", patch: "" },
         meta: { flags: [] },
-        ...addNamespaceToSchema(options.schema, [])
+        ...addNamespaceToSchema({ ...options.schema }, [])
       });
       this.schema = enrichedSchema;
     }
@@ -2459,7 +2459,6 @@ class TinaAdminApi {
   constructor(cms) {
     this.api = cms.api.tina;
     this.schema = cms.api.tina.schema;
-    this.useDataLayer = cms.flags.get("experimentalData");
   }
   async isAuthenticated() {
     return await this.api.isAuthenticated();
@@ -2484,11 +2483,10 @@ class TinaAdminApi {
   }
 }`, { variables: { collection, relativePath } });
   }
-  async fetchCollection(collectionName, includeDocuments, after) {
+  async fetchCollection(collectionName, includeDocuments, after, sortKey, order) {
     if (includeDocuments === true) {
-      if (this.useDataLayer) {
-        const sort = this.schema.getIsTitleFieldName(collectionName);
-        const response = await this.api.request(`#graphql
+      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){
         collection(collection: $collection){
           name
@@ -2522,45 +2520,56 @@ class TinaAdminApi {
           }
         }
       }`, {
-          variables: {
-            collection: collectionName,
-            includeDocuments,
-            sort,
-            limit: 10,
-            after
-          }
-        });
-        return response.collection;
-      } else {
-        const response = await this.api.request(`#graphql
-    query($collection: String!, $includeDocuments: Boolean!){
-      collection(collection: $collection){
-        name
-        label
-        format
-        templates
-        documents @include(if: $includeDocuments) {
-          totalCount
-          edges {
-            node {
-              ... on Document {
-                _sys {
-                  template
-                  breadcrumbs
-                  path
-                  basename
-                  relativePath
-                  filename
-                  extension
+        variables: {
+          collection: collectionName,
+          includeDocuments,
+          sort,
+          limit: 10,
+          after
+        }
+      }) : await this.api.request(`#graphql
+      query($collection: String!, $includeDocuments: Boolean!, $sort: String,  $limit: Float, $after: String){
+        collection(collection: $collection){
+          name
+          label
+          format
+          templates
+          documents(sort: $sort, before: $after, last: $limit) @include(if: $includeDocuments) {
+            totalCount
+            pageInfo {
+              hasPreviousPage
+              hasNextPage
+              startCursor
+              endCursor
+            }
+            edges {
+              node {
+                ... on Document {
+                  _sys {
+                    title
+                    template
+                    breadcrumbs
+                    path
+                    basename
+                    relativePath
+                    filename
+                    extension
+                  }
                 }
               }
             }
           }
         }
-      }
-    }`, { variables: { collection: collectionName, includeDocuments } });
-        return response.collection;
-      }
+      }`, {
+        variables: {
+          collection: collectionName,
+          includeDocuments,
+          sort,
+          limit: 10,
+          after
+        }
+      });
+      return response.collection;
     } else {
       try {
         const collection = this.schema.getCollection(collectionName);
@@ -3312,6 +3321,9 @@ var styles = /* @__PURE__ */ (() => `.tina-tailwind {
 .tina-tailwind .gap-4 {
   gap: 16px;
 }
+.tina-tailwind .gap-2 {
+  gap: 8px;
+}
 .tina-tailwind .gap-3 {
   gap: 12px;
 }
@@ -3330,6 +3342,9 @@ var styles = /* @__PURE__ */ (() => `.tina-tailwind {
 .tina-tailwind .overflow-y-auto {
   overflow-y: auto;
 }
+.tina-tailwind .whitespace-normal {
+  white-space: normal;
+}
 .tina-tailwind .whitespace-nowrap {
   white-space: nowrap;
 }
@@ -3451,8 +3466,8 @@ var styles = /* @__PURE__ */ (() => `.tina-tailwind {
 .tina-tailwind .pb-4 {
   padding-bottom: 16px;
 }
-.tina-tailwind .pt-18 {
-  padding-top: 72px;
+.tina-tailwind .pt-16 {
+  padding-top: 64px;
 }
 .tina-tailwind .pt-3 {
   padding-top: 12px;
@@ -3496,6 +3511,9 @@ var styles = /* @__PURE__ */ (() => `.tina-tailwind {
 .tina-tailwind .font-medium {
   font-weight: 500;
 }
+.tina-tailwind .font-semibold {
+  font-weight: 600;
+}
 .tina-tailwind .uppercase {
   text-transform: uppercase;
 }
@@ -4590,7 +4608,7 @@ const PageHeader = ({
   isLocalMode,
   children
 }) => /* @__PURE__ */ React.createElement(React.Fragment, null, isLocalMode && /* @__PURE__ */ React.createElement(LocalWarning, null), /* @__PURE__ */ React.createElement("div", {
-  className: "bg-white pb-4 pt-18 border-b border-gray-200 px-12"
+  className: "bg-white pb-4 pt-16 border-b border-gray-200 px-12"
 }, /* @__PURE__ */ React.createElement("div", {
   className: "w-full mx-auto max-w-screen-xl"
 }, /* @__PURE__ */ React.createElement("div", {
@@ -4717,8 +4735,10 @@ const LoadingPage = () => /* @__PURE__ */ React.createElement(React.Fragment, nu
     fontWeight: "normal"
   }
 }, "Please wait, Tina is loading data..."))));
-const useGetCollection = (cms, collectionName, includeDocuments = true, after = "") => {
+const useGetCollection = (cms, collectionName, includeDocuments = true, after = "", sortKey) => {
   const api = new TinaAdminApi(cms);
+  const schema = cms.api.tina.schema;
+  const collectionExtra = schema.getCollection(collectionName);
   const [collection, setCollection] = useState(void 0);
   const [loading, setLoading] = useState(true);
   const [error, setError] = useState(void 0);
@@ -4726,8 +4746,10 @@ const useGetCollection = (cms, collectionName, includeDocuments = true, after =
   useEffect(() => {
     const fetchCollection = async () => {
       if (await api.isAuthenticated()) {
+        const { name, order } = JSON.parse(sortKey || "{}");
+        const validSortKey = collectionExtra.fields.map((x) => x.name).includes(name) ? name : void 0;
         try {
-          const collection2 = await api.fetchCollection(collectionName, includeDocuments, after);
+          const collection2 = await api.fetchCollection(collectionName, includeDocuments, after, validSortKey, order);
           setCollection(collection2);
         } catch (error2) {
           cms.alerts.error(`[${error2.name}] GetCollection failed: ${error2.message}`, 30 * 1e3);
@@ -4740,26 +4762,29 @@ const useGetCollection = (cms, collectionName, includeDocuments = true, after =
     };
     setLoading(true);
     fetchCollection();
-  }, [cms, collectionName, resetState, after]);
+  }, [cms, collectionName, resetState, after, sortKey]);
   const reFetchCollection = () => setResetSate((x) => x + 1);
-  return { collection, loading, error, reFetchCollection };
+  return { collection, loading, error, reFetchCollection, collectionExtra };
 };
 const GetCollection = ({
   cms,
   collectionName,
   includeDocuments = true,
   startCursor,
+  sortKey,
   children
 }) => {
-  const { collection, loading, error, reFetchCollection } = useGetCollection(cms, collectionName, includeDocuments, startCursor || "");
+  const { collection, loading, error, reFetchCollection, collectionExtra } = useGetCollection(cms, collectionName, includeDocuments, startCursor || "", sortKey) || {};
   if (error) {
     return null;
   }
   if (loading) {
     return /* @__PURE__ */ React.createElement(LoadingPage, null);
   }
-  return /* @__PURE__ */ React.createElement(React.Fragment, null, children(collection, loading, reFetchCollection));
+  return /* @__PURE__ */ React.createElement(React.Fragment, null, children(collection, loading, reFetchCollection, collectionExtra));
 };
+const LOCAL_STORAGE_KEY = "tinacms.admin.collection.list.page";
+const isSSR = typeof window === "undefined";
 const TemplateMenu = ({ templates }) => {
   return /* @__PURE__ */ React.createElement(Menu, {
     as: "div",
@@ -4808,8 +4833,17 @@ const CollectionListPage = () => {
   });
   const [endCursor, setEndCursor] = useState("");
   const [prevCursors, setPrevCursors] = useState([]);
+  const [sortKey, setSortKey] = useState(isSSR ? "" : window.localStorage.getItem(`${LOCAL_STORAGE_KEY}.${collectionName}`) || JSON.stringify({
+    order: "asc",
+    name: ""
+  }));
+  const [sortOrder, setSortOrder] = useState("asc");
   const loc = useLocation();
   useEffect(() => {
+    setSortKey(window.localStorage.getItem(`${LOCAL_STORAGE_KEY}.${collectionName}`) || JSON.stringify({
+      order: "asc",
+      name: ""
+    }));
     setEndCursor("");
     setPrevCursors([]);
   }, [loc]);
@@ -4818,14 +4852,15 @@ const CollectionListPage = () => {
       cms,
       collectionName,
       includeDocuments: true,
-      startCursor: endCursor
-    }, (collection, _loading, reFetchCollection) => {
+      startCursor: endCursor,
+      sortKey
+    }, (collection, _loading, reFetchCollection, collectionExtra) => {
       var _a, _b;
       const totalCount = collection.documents.totalCount;
       const documents = collection.documents.edges;
       const admin = cms.api.admin;
       const pageInfo = collection.documents.pageInfo;
-      const useDataFlag = cms.flags.get("experimentalData");
+      const fields = collectionExtra.fields.filter((x) => ["string", "number", "datetime"].includes(x.type));
       return /* @__PURE__ */ React.createElement(PageWrapper, null, /* @__PURE__ */ React.createElement(React.Fragment, null, open && /* @__PURE__ */ React.createElement(DeleteModal, {
         filename: vars.relativePath,
         deleteFunc: async () => {
@@ -4842,9 +4877,56 @@ const CollectionListPage = () => {
         close: () => setOpen(false)
       }), /* @__PURE__ */ React.createElement(PageHeader, {
         isLocalMode: (_b = (_a = cms == null ? void 0 : cms.api) == null ? void 0 : _a.tina) == null ? void 0 : _b.isLocalMode
-      }, /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement("h3", {
+      }, /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__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), !collection.templates && /* @__PURE__ */ React.createElement(Link, {
+      }, collection.label ? collection.label : collection.name), fields.length > 0 && /* @__PURE__ */ React.createElement("div", {
+        className: "flex gap-2 items-center"
+      }, /* @__PURE__ */ React.createElement("label", {
+        htmlFor: "sort",
+        className: "block font-sans text-xs font-semibold text-gray-500 whitespace-normal"
+      }, "Sort by"), /* @__PURE__ */ React.createElement(Select, {
+        name: "sort",
+        options: [
+          {
+            label: "Default",
+            value: JSON.stringify({
+              order: "asc",
+              name: ""
+            })
+          },
+          ...fields.map((x) => [
+            {
+              label: x.label + " (Ascending)",
+              value: JSON.stringify({
+                name: x.name,
+                order: "asc"
+              })
+            },
+            {
+              label: x.label + " (Descending)",
+              value: JSON.stringify({
+                name: x.name,
+                order: "desc"
+              })
+            }
+          ]).flat()
+        ],
+        input: {
+          id: "sort",
+          name: "sort",
+          value: sortKey,
+          onChange: (e) => {
+            const val = JSON.parse(e.target.value);
+            setEndCursor("");
+            setPrevCursors([]);
+            window == null ? void 0 : window.localStorage.setItem(`${LOCAL_STORAGE_KEY}.${collectionName}`, e.target.value);
+            setSortKey(e.target.value);
+            setSortOrder(val.order);
+          }
+        }
+      }))), !collection.templates && /* @__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"
       }, "Create New", " ", /* @__PURE__ */ React.createElement(BiPlus, {
@@ -4928,11 +5010,11 @@ const CollectionListPage = () => {
             }
           ]
         })));
-      }))), useDataFlag && /* @__PURE__ */ React.createElement("div", {
+      }))), /* @__PURE__ */ React.createElement("div", {
         className: "pt-3"
       }, /* @__PURE__ */ React.createElement(CursorPaginator, {
         variant: "white",
-        hasNext: pageInfo == null ? void 0 : pageInfo.hasNextPage,
+        hasNext: sortOrder === "asc" ? pageInfo == null ? void 0 : pageInfo.hasNextPage : pageInfo.hasPreviousPage,
         navigateNext: () => {
           const newState = [...prevCursors, endCursor];
           setPrevCursors(newState);
@@ -5270,9 +5352,9 @@ const Redirect = () => {
   return null;
 };
 const TinaAdmin = () => {
-  const isSSR = typeof window === "undefined";
+  const isSSR2 = typeof window === "undefined";
   const { edit } = useEditState();
-  if (isSSR) {
+  if (isSSR2) {
     return null;
   }
   if (!edit) {

package/dist/index.js

@@ -2173,7 +2173,7 @@ mutation addPendingDocumentMutation(
         const enrichedSchema = new schemaTools.TinaSchema({
           version: { fullVersion: "", major: "", minor: "", patch: "" },
           meta: { flags: [] },
-          ...schemaTools.addNamespaceToSchema(options.schema, [])
+          ...schemaTools.addNamespaceToSchema({ ...options.schema }, [])
         });
         this.schema = enrichedSchema;
       }
@@ -2477,7 +2477,6 @@ mutation addPendingDocumentMutation(
     constructor(cms) {
       this.api = cms.api.tina;
       this.schema = cms.api.tina.schema;
-      this.useDataLayer = cms.flags.get("experimentalData");
     }
     async isAuthenticated() {
       return await this.api.isAuthenticated();
@@ -2502,11 +2501,10 @@ mutation addPendingDocumentMutation(
   }
 }`, { variables: { collection, relativePath } });
     }
-    async fetchCollection(collectionName, includeDocuments, after) {
+    async fetchCollection(collectionName, includeDocuments, after, sortKey, order) {
       if (includeDocuments === true) {
-        if (this.useDataLayer) {
-          const sort = this.schema.getIsTitleFieldName(collectionName);
-          const response = await this.api.request(`#graphql
+        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){
         collection(collection: $collection){
           name
@@ -2540,45 +2538,56 @@ mutation addPendingDocumentMutation(
           }
         }
       }`, {
-            variables: {
-              collection: collectionName,
-              includeDocuments,
-              sort,
-              limit: 10,
-              after
+          variables: {
+            collection: collectionName,
+            includeDocuments,
+            sort,
+            limit: 10,
+            after
+          }
+        }) : await this.api.request(`#graphql
+      query($collection: String!, $includeDocuments: Boolean!, $sort: String,  $limit: Float, $after: String){
+        collection(collection: $collection){
+          name
+          label
+          format
+          templates
+          documents(sort: $sort, before: $after, last: $limit) @include(if: $includeDocuments) {
+            totalCount
+            pageInfo {
+              hasPreviousPage
+              hasNextPage
+              startCursor
+              endCursor
             }
-          });
-          return response.collection;
-        } else {
-          const response = await this.api.request(`#graphql
-    query($collection: String!, $includeDocuments: Boolean!){
-      collection(collection: $collection){
-        name
-        label
-        format
-        templates
-        documents @include(if: $includeDocuments) {
-          totalCount
-          edges {
-            node {
-              ... on Document {
-                _sys {
-                  template
-                  breadcrumbs
-                  path
-                  basename
-                  relativePath
-                  filename
-                  extension
+            edges {
+              node {
+                ... on Document {
+                  _sys {
+                    title
+                    template
+                    breadcrumbs
+                    path
+                    basename
+                    relativePath
+                    filename
+                    extension
+                  }
                 }
               }
             }
           }
         }
-      }
-    }`, { variables: { collection: collectionName, includeDocuments } });
-          return response.collection;
-        }
+      }`, {
+          variables: {
+            collection: collectionName,
+            includeDocuments,
+            sort,
+            limit: 10,
+            after
+          }
+        });
+        return response.collection;
       } else {
         try {
           const collection = this.schema.getCollection(collectionName);
@@ -3330,6 +3339,9 @@ mutation addPendingDocumentMutation(
 .tina-tailwind .gap-4 {
   gap: 16px;
 }
+.tina-tailwind .gap-2 {
+  gap: 8px;
+}
 .tina-tailwind .gap-3 {
   gap: 12px;
 }
@@ -3348,6 +3360,9 @@ mutation addPendingDocumentMutation(
 .tina-tailwind .overflow-y-auto {
   overflow-y: auto;
 }
+.tina-tailwind .whitespace-normal {
+  white-space: normal;
+}
 .tina-tailwind .whitespace-nowrap {
   white-space: nowrap;
 }
@@ -3469,8 +3484,8 @@ mutation addPendingDocumentMutation(
 .tina-tailwind .pb-4 {
   padding-bottom: 16px;
 }
-.tina-tailwind .pt-18 {
-  padding-top: 72px;
+.tina-tailwind .pt-16 {
+  padding-top: 64px;
 }
 .tina-tailwind .pt-3 {
   padding-top: 12px;
@@ -3514,6 +3529,9 @@ mutation addPendingDocumentMutation(
 .tina-tailwind .font-medium {
   font-weight: 500;
 }
+.tina-tailwind .font-semibold {
+  font-weight: 600;
+}
 .tina-tailwind .uppercase {
   text-transform: uppercase;
 }
@@ -4608,7 +4626,7 @@ This will work when developing locally but NOT when deployed to production.
     isLocalMode,
     children
   }) => /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, isLocalMode && /* @__PURE__ */ React__default["default"].createElement(toolkit.LocalWarning, null), /* @__PURE__ */ React__default["default"].createElement("div", {
-    className: "bg-white pb-4 pt-18 border-b border-gray-200 px-12"
+    className: "bg-white pb-4 pt-16 border-b border-gray-200 px-12"
   }, /* @__PURE__ */ React__default["default"].createElement("div", {
     className: "w-full mx-auto max-w-screen-xl"
   }, /* @__PURE__ */ React__default["default"].createElement("div", {
@@ -4735,8 +4753,10 @@ 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 = "") => {
+  const useGetCollection = (cms, collectionName, includeDocuments = true, after = "", sortKey) => {
     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);
@@ -4744,8 +4764,10 @@ This will work when developing locally but NOT when deployed to production.
     React.useEffect(() => {
       const fetchCollection = async () => {
         if (await api.isAuthenticated()) {
+          const { name, order } = JSON.parse(sortKey || "{}");
+          const validSortKey = collectionExtra.fields.map((x) => x.name).includes(name) ? name : void 0;
           try {
-            const collection2 = await api.fetchCollection(collectionName, includeDocuments, after);
+            const collection2 = await api.fetchCollection(collectionName, includeDocuments, after, validSortKey, order);
             setCollection(collection2);
           } catch (error2) {
             cms.alerts.error(`[${error2.name}] GetCollection failed: ${error2.message}`, 30 * 1e3);
@@ -4758,26 +4780,29 @@ This will work when developing locally but NOT when deployed to production.
       };
       setLoading(true);
       fetchCollection();
-    }, [cms, collectionName, resetState, after]);
+    }, [cms, collectionName, resetState, after, sortKey]);
     const reFetchCollection = () => setResetSate((x) => x + 1);
-    return { collection, loading, error, reFetchCollection };
+    return { collection, loading, error, reFetchCollection, collectionExtra };
   };
   const GetCollection = ({
     cms,
     collectionName,
     includeDocuments = true,
     startCursor,
+    sortKey,
     children
   }) => {
-    const { collection, loading, error, reFetchCollection } = useGetCollection(cms, collectionName, includeDocuments, startCursor || "");
+    const { collection, loading, error, reFetchCollection, collectionExtra } = useGetCollection(cms, collectionName, includeDocuments, startCursor || "", sortKey) || {};
     if (error) {
       return null;
     }
     if (loading) {
       return /* @__PURE__ */ React__default["default"].createElement(LoadingPage, null);
     }
-    return /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, children(collection, loading, reFetchCollection));
+    return /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, children(collection, loading, reFetchCollection, collectionExtra));
   };
+  const LOCAL_STORAGE_KEY = "tinacms.admin.collection.list.page";
+  const isSSR = typeof window === "undefined";
   const TemplateMenu = ({ templates }) => {
     return /* @__PURE__ */ React__default["default"].createElement(react.Menu, {
       as: "div",
@@ -4826,8 +4851,17 @@ This will work when developing locally but NOT when deployed to production.
     });
     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 [sortOrder, setSortOrder] = React.useState("asc");
     const loc = reactRouterDom.useLocation();
     React.useEffect(() => {
+      setSortKey(window.localStorage.getItem(`${LOCAL_STORAGE_KEY}.${collectionName}`) || JSON.stringify({
+        order: "asc",
+        name: ""
+      }));
       setEndCursor("");
       setPrevCursors([]);
     }, [loc]);
@@ -4836,14 +4870,15 @@ This will work when developing locally but NOT when deployed to production.
         cms,
         collectionName,
         includeDocuments: true,
-        startCursor: endCursor
-      }, (collection, _loading, reFetchCollection) => {
+        startCursor: endCursor,
+        sortKey
+      }, (collection, _loading, reFetchCollection, collectionExtra) => {
         var _a, _b;
         const totalCount = collection.documents.totalCount;
         const documents = collection.documents.edges;
         const admin = cms.api.admin;
         const pageInfo = collection.documents.pageInfo;
-        const useDataFlag = cms.flags.get("experimentalData");
+        const fields = collectionExtra.fields.filter((x) => ["string", "number", "datetime"].includes(x.type));
         return /* @__PURE__ */ React__default["default"].createElement(PageWrapper, null, /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, open && /* @__PURE__ */ React__default["default"].createElement(DeleteModal, {
           filename: vars.relativePath,
           deleteFunc: async () => {
@@ -4860,9 +4895,56 @@ This will work when developing locally but NOT when deployed to production.
           close: () => setOpen(false)
         }), /* @__PURE__ */ React__default["default"].createElement(PageHeader, {
           isLocalMode: (_b = (_a = cms == null ? void 0 : cms.api) == null ? void 0 : _a.tina) == null ? void 0 : _b.isLocalMode
-        }, /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, /* @__PURE__ */ React__default["default"].createElement("h3", {
+        }, /* @__PURE__ */ React__default["default"].createElement(React__default["default"].Fragment, null, /* @__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), !collection.templates && /* @__PURE__ */ React__default["default"].createElement(reactRouterDom.Link, {
+        }, collection.label ? collection.label : collection.name), fields.length > 0 && /* @__PURE__ */ React__default["default"].createElement("div", {
+          className: "flex gap-2 items-center"
+        }, /* @__PURE__ */ React__default["default"].createElement("label", {
+          htmlFor: "sort",
+          className: "block font-sans text-xs font-semibold text-gray-500 whitespace-normal"
+        }, "Sort by"), /* @__PURE__ */ React__default["default"].createElement(toolkit.Select, {
+          name: "sort",
+          options: [
+            {
+              label: "Default",
+              value: JSON.stringify({
+                order: "asc",
+                name: ""
+              })
+            },
+            ...fields.map((x) => [
+              {
+                label: x.label + " (Ascending)",
+                value: JSON.stringify({
+                  name: x.name,
+                  order: "asc"
+                })
+              },
+              {
+                label: x.label + " (Descending)",
+                value: JSON.stringify({
+                  name: x.name,
+                  order: "desc"
+                })
+              }
+            ]).flat()
+          ],
+          input: {
+            id: "sort",
+            name: "sort",
+            value: sortKey,
+            onChange: (e) => {
+              const val = JSON.parse(e.target.value);
+              setEndCursor("");
+              setPrevCursors([]);
+              window == null ? void 0 : window.localStorage.setItem(`${LOCAL_STORAGE_KEY}.${collectionName}`, e.target.value);
+              setSortKey(e.target.value);
+              setSortOrder(val.order);
+            }
+          }
+        }))), !collection.templates && /* @__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"
         }, "Create New", " ", /* @__PURE__ */ React__default["default"].createElement(BiPlus, {
@@ -4946,11 +5028,11 @@ This will work when developing locally but NOT when deployed to production.
               }
             ]
           })));
-        }))), useDataFlag && /* @__PURE__ */ React__default["default"].createElement("div", {
+        }))), /* @__PURE__ */ React__default["default"].createElement("div", {
           className: "pt-3"
         }, /* @__PURE__ */ React__default["default"].createElement(toolkit.CursorPaginator, {
           variant: "white",
-          hasNext: pageInfo == null ? void 0 : pageInfo.hasNextPage,
+          hasNext: sortOrder === "asc" ? pageInfo == null ? void 0 : pageInfo.hasNextPage : pageInfo.hasPreviousPage,
           navigateNext: () => {
             const newState = [...prevCursors, endCursor];
             setPrevCursors(newState);
@@ -5288,9 +5370,9 @@ This will work when developing locally but NOT when deployed to production.
     return null;
   };
   const TinaAdmin = () => {
-    const isSSR = typeof window === "undefined";
+    const isSSR2 = typeof window === "undefined";
     const { edit } = sharedctx.useEditState();
-    if (isSSR) {
+    if (isSSR2) {
       return null;
     }
     if (!edit) {

package/dist/style.css

@@ -544,6 +544,9 @@
 .tina-tailwind .gap-4 {
   gap: 16px;
 }
+.tina-tailwind .gap-2 {
+  gap: 8px;
+}
 .tina-tailwind .gap-3 {
   gap: 12px;
 }
@@ -562,6 +565,9 @@
 .tina-tailwind .overflow-y-auto {
   overflow-y: auto;
 }
+.tina-tailwind .whitespace-normal {
+  white-space: normal;
+}
 .tina-tailwind .whitespace-nowrap {
   white-space: nowrap;
 }
@@ -683,8 +689,8 @@
 .tina-tailwind .pb-4 {
   padding-bottom: 16px;
 }
-.tina-tailwind .pt-18 {
-  padding-top: 72px;
+.tina-tailwind .pt-16 {
+  padding-top: 64px;
 }
 .tina-tailwind .pt-3 {
   padding-top: 12px;
@@ -728,6 +734,9 @@
 .tina-tailwind .font-medium {
   font-weight: 500;
 }
+.tina-tailwind .font-semibold {
+  font-weight: 600;
+}
 .tina-tailwind .uppercase {
   text-transform: uppercase;
 }

package/dist/tina-cms.d.ts

@@ -43,7 +43,7 @@ declare type APIProviderProps = {
      */
     branch?: never;
     /**
-     * Your clientID from tina.aio
+     * Your clientId from tina.io
      *
      * @deprecated use apiURL instead
      */
@@ -73,41 +73,11 @@ declare type APIProviderProps = {
      */
     branch?: never;
     /**
-     * Your clientID from tina.aio
+     * Your clientId from tina.io
      *
      * @deprecated use apiURL instead
      */
     clientId?: never;
-} | {
-    /**
-     * Content API URL
-     *
-     */
-    apiURL?: never;
-    /**
-     * Point to the local version of GraphQL instead of tina.io
-     * https://tina.io/docs/tinacms-context/#adding-tina-to-the-sites-frontend
-     *
-     * @deprecated use apiURL instead
-     */
-    isLocalClient?: boolean;
-    /**
-     * The base branch to pull content from. Note that this is ignored for local development
-     *
-     * @deprecated use apiURL instead
-     */
-    branch?: string;
-    /**
-     * Your clientID from tina.aio
-     *
-     * @deprecated use apiURL instead
-     */
-    clientId?: string;
-    /**
-     * The API url From this client will be used to make requests.
-     *
-     */
-    client: never;
 };
 interface BaseProviderProps {
     /** Callback if you need access to the TinaCMS instance */

package/dist/unifiedClient/index.d.ts

@@ -14,7 +14,7 @@ export declare const TINA_HOST = "content.tinajs.io";
 export interface TinaClientArgs<GenQueries = Record<string, unknown>> {
     url: string;
     token?: string;
-    queries?: (client: TinaClient<GenQueries>) => GenQueries;
+    queries: (client: TinaClient<GenQueries>) => GenQueries;
 }
 export declare type TinaClientRequestArgs = {
     variables?: Record<string, any>;
@@ -32,7 +32,7 @@ export declare class TinaClient<GenQueries> {
     /**
      *
      */
-    queries?: GenQueries;
+    queries: GenQueries;
     constructor({ token, url, queries }: TinaClientArgs<GenQueries>);
     request<DataType extends Record<string, any> = any>(args: TinaClientRequestArgs): Promise<{
         data: DataType;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tinacms",
-  "version": "0.68.12",
+  "version": "0.68.15",
   "main": "dist/index.js",
   "module": "./dist/index.es.js",
   "exports": {
@@ -43,9 +43,9 @@
     "@headlessui/react": "^1.5.0",
     "@heroicons/react": "^1.0.4",
     "@react-hook/window-size": "^3.0.7",
-    "@tinacms/schema-tools": "0.0.7",
+    "@tinacms/schema-tools": "0.0.9",
     "@tinacms/sharedctx": "0.1.2",
-    "@tinacms/toolkit": "0.56.35",
+    "@tinacms/toolkit": "0.56.37",
     "crypto-js": "^4.0.0",
     "fetch-ponyfill": "^7.1.0",
     "final-form": "4.20.1",