tinacms 0.68.14 → 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/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";
@@ -2483,10 +2483,10 @@ class TinaAdminApi {
   }
 }`, { variables: { collection, relativePath } });
   }
-  async fetchCollection(collectionName, includeDocuments, after) {
+  async fetchCollection(collectionName, includeDocuments, after, sortKey, order) {
     if (includeDocuments === true) {
-      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
@@ -2527,6 +2527,47 @@ class TinaAdminApi {
           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,
+          sort,
+          limit: 10,
+          after
+        }
       });
       return response.collection;
     } else {
@@ -3280,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;
 }
@@ -3298,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;
 }
@@ -3419,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;
@@ -3464,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;
 }
@@ -4558,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", {
@@ -4685,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);
@@ -4694,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);
@@ -4708,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",
@@ -4776,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]);
@@ -4786,13 +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 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 () => {
@@ -4809,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, {
@@ -4899,7 +5014,7 @@ const CollectionListPage = () => {
         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);
@@ -5237,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

@@ -2501,10 +2501,10 @@ mutation addPendingDocumentMutation(
   }
 }`, { variables: { collection, relativePath } });
     }
-    async fetchCollection(collectionName, includeDocuments, after) {
+    async fetchCollection(collectionName, includeDocuments, after, sortKey, order) {
       if (includeDocuments === true) {
-        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
@@ -2537,6 +2537,47 @@ mutation addPendingDocumentMutation(
             }
           }
         }
+      }`, {
+          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,
@@ -3298,6 +3339,9 @@ mutation addPendingDocumentMutation(
 .tina-tailwind .gap-4 {
   gap: 16px;
 }
+.tina-tailwind .gap-2 {
+  gap: 8px;
+}
 .tina-tailwind .gap-3 {
   gap: 12px;
 }
@@ -3316,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;
 }
@@ -3437,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;
@@ -3482,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;
 }
@@ -4576,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", {
@@ -4703,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);
@@ -4712,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);
@@ -4726,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",
@@ -4794,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]);
@@ -4804,13 +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 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 () => {
@@ -4827,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, {
@@ -4917,7 +5032,7 @@ This will work when developing locally but NOT when deployed to production.
           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);
@@ -5255,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tinacms",
-  "version": "0.68.14",
+  "version": "0.68.15",
   "main": "dist/index.js",
   "module": "./dist/index.es.js",
   "exports": {
@@ -45,7 +45,7 @@
     "@react-hook/window-size": "^3.0.7",
     "@tinacms/schema-tools": "0.0.9",
     "@tinacms/sharedctx": "0.1.2",
-    "@tinacms/toolkit": "0.56.36",
+    "@tinacms/toolkit": "0.56.37",
     "crypto-js": "^4.0.0",
     "fetch-ponyfill": "^7.1.0",
     "final-form": "4.20.1",