@sanity/orderable-document-list 1.0.3 → 1.1.0

package/lib/index.esm.js

@@ -1,2 +1,770 @@
-function e(e,t){var n=Object.keys(e);if(Object.getOwnPropertySymbols){var r=Object.getOwnPropertySymbols(e);t&&(r=r.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),n.push.apply(n,r)}return n}function t(t){for(var r=1;r<arguments.length;r++){var i=null!=arguments[r]?arguments[r]:{};r%2?e(Object(i),!0).forEach((function(e){n(t,e,i[e])})):Object.getOwnPropertyDescriptors?Object.defineProperties(t,Object.getOwnPropertyDescriptors(i)):e(Object(i)).forEach((function(e){Object.defineProperty(t,e,Object.getOwnPropertyDescriptor(i,e))}))}return t}function n(e,t,n){return t in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}import{defineField as r,useSchema as i,Preview as o,useClient as s}from"sanity";import{LexoRank as l}from"lexorank";import{DragHandleIcon as d,ChevronUpIcon as a,ChevronDownIcon as c,GenerateIcon as u,SortIcon as p}from"@sanity/icons";import{jsxs as h,jsx as g,Fragment as m}from"react/jsx-runtime";import f,{useContext as y,useState as v,useEffect as b,useCallback as w,useMemo as k,Component as R}from"react";import{Flex as O,Box as x,Text as I,Button as S,useToast as _,Card as D,Spinner as j,Stack as E}from"@sanity/ui";import{DragDropContext as P,Droppable as L,Draggable as T}from"@hello-pangea/dnd";import{usePaneRouter as C}from"sanity/desk";const $=e=>{if(!(null==e?void 0:e.type))throw new Error("\n      type must be provided.\n      Example: orderRankField({type: 'category'})\n      ");const{type:n}=e;return r(t(t({title:"Order Rank",readOnly:!0,hidden:!0},e),{},{name:"orderRank",type:"string",initialValue:async(e,t)=>{let{getClient:r}=t;return function(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"";const t=e?l.parse(e):l.min();return t.genNext().genNext().value}(await r({apiVersion:"2021-09-01"}).fetch("*[_type == $type]|order(@[$order] desc)[0][$order]",{type:n,order:"orderRank"}))}}))},z={title:"Ordered",name:"ordered",by:[{field:"orderRank",direction:"asc"}]},N=f.createContext({});function V(e){let{doc:t,increment:n,entities:r,handleSelect:s,index:l,isFirst:u,isLast:p}=e;const{showIncrements:m}=y(N),f=i();return h(O,{align:"center",children:[g(x,{paddingX:3,style:{flexShrink:0},children:g(I,{size:4,children:g(d,{})})}),m&&h(O,{style:{flexShrink:0},align:"center",gap:1,paddingRight:1,children:[g(S,{padding:2,mode:"ghost",onClick:()=>n(l,l+-1,t._id,r),disabled:u,icon:a}),g(S,{padding:2,mode:"ghost",disabled:p,onClick:()=>n(l,l+1,t._id,r),icon:c})]}),g(S,{style:{width:"100%"},padding:2,mode:"bleed",onClick:e=>s(t._id,l,e.nativeEvent),children:g(O,{flex:1,align:"center",children:g(x,{flex:1,children:g(o,{layout:"default",value:t,schemaType:f.get(t._type)})})})})]})}function B(e,t){return e.orderRank<t.orderRank?-1:e.orderRank>t.orderRank?1:0}function U(){return s({apiVersion:"2021-09-01"})}function F(e){let{data:n,type:r,listIsUpdating:i,setListIsUpdating:o}=e;const s=_(),d=C(),{navigateIntent:a}=d,[c,u]=v(n);b((()=>{i||u(n)}),[n]);const[p,m]=v(""),[f,y]=v([]),R=w((()=>y([])),[y]),O=w(((e,t,n)=>{const i=f.includes(e),o=n.shiftKey,s=-1!==navigator.appVersion.indexOf("Win")?n.ctrlKey:n.metaKey;let l=[];if(!o&&!s)return a("edit",{id:e,type:r}),y([e]);if(o&&!i){const n=f[f.length-1],r=c.findIndex((e=>e._id===n)),i=t<r?t:r,o=t>r?t:r,s=c.filter(((e,t)=>t>i&&t<o)).map((e=>e._id));l=[...f,...s,e]}else l=i?f.filter((t=>t!==e)):[...f,e];return y(l)}),[y,a,c,f,r]),I=U(),S=w((async(e,t)=>{const n=I.transaction();e.forEach((e=>{let[t,r]=e;return n.patch(t,r)})),await n.commit().then((e=>{R(),m(""),o(!1),s.push({title:"".concat(1===e.results.length?"1 Document":"".concat(e.results.length," Documents")," Reordered"),status:"success",description:t})})).catch((()=>{m(""),o(!1),s.push({title:"Reordering failed",status:"error"})}))}),[I,m,R,o,s]),j=w(((e,t)=>{m("");const{source:n,destination:r,draggableId:i}=null!=e?e:{};if((null==n?void 0:n.index)===(null==r?void 0:r.index))return;if(!(null==t?void 0:t.length)||!i)return;const s=(null==f?void 0:f.length)?f:[i];if(!(null==s?void 0:s.length))return;o(!0),y(s);const{newOrder:d,patches:a,message:c}=(e=>{let{entities:t,selectedIds:n,source:r,destination:i,debug:o=!1}=e;const s=r.index,d=i.index,a=s>d,c=t.filter((e=>n.includes(e._id))),u=["Moved",1===c.length?"1 Document":"".concat(c.length," Documents"),a?"up":"down","from position","".concat(s+1," to ").concat(d+1)].join(" "),{all:p,selected:h}=t.reduce(((e,r,i)=>{var o,s,u,p;if(n.includes(r._id))return{all:e.all,selected:e.selected};if(i===d){const n=i-1,d=(null==(o=t[n])?void 0:o.orderRank)?l.parse(null==(s=t[n])?void 0:s.orderRank):l.min(),h=l.parse(t[i].orderRank),g=i+1,m=(null==(u=t[g])?void 0:u.orderRank)?l.parse(null==(p=t[g])?void 0:p.orderRank):l.max();let f=a?d.between(h):h.between(m);for(let e=0;e<c.length;e+=1)c[e].orderRank=f.value,f=a?f.between(h):f.between(m);return{all:a?[...e.all,...c,r]:[...e.all,r,...c],selected:c}}return{all:[...e.all,r],selected:e.selected}}),{all:[],selected:[]}),g=h.map((e=>[e._id,{set:{orderRank:e.orderRank}}]));return{newOrder:p.sort(B),patches:g,message:u}})({entities:t,selectedIds:s,source:n,destination:r});(null==d?void 0:d.length)&&u(d),(null==a?void 0:a.length)&&S(a,c)}),[f,m,y,S,o]),E=w((e=>{const t=e.draggableId;f.includes(t)||R(),m(t)}),[f,R,m]),$=w(((e,t,n,r)=>j({draggableId:n,source:{index:e},destination:{index:t}},r)),[j]),z=w((e=>{"Escape"===e.key&&R()}),[R]);b((()=>(window.addEventListener("keydown",z),()=>{window.removeEventListener("keydown",z)})),[z]);const N=k((()=>{if(!c.length)return[];const e=c.map((e=>e.orderRank));return e.filter(((t,n)=>e.indexOf(t)!==n))}),[c]),F=w((e=>j(e,c)),[c,j]);return g(P,{onDragStart:E,onDragEnd:F,children:g(L,{droppableId:"documentSortZone",children:e=>h("div",t(t({},e.droppableProps),{},{ref:e.innerRef,children:[c.map(((e,n)=>g(T,{draggableId:e._id,index:n,children:(r,o)=>{const s=f.includes(e._id),l=o.isDragging,d=Boolean(!l&&p&&s),a=i&&s,u=Boolean(!e.orderRank),h=(e=>{const{isDuplicate:t,isGhosting:n,isDragging:r,isSelected:i}=e;return n?"transparent":r||i?"primary":t?"caution":void 0})({isDuplicate:N.includes(e.orderRank),isGhosting:d,isDragging:l,isSelected:s});return g("div",t(t(t({ref:r.innerRef},r.draggableProps),r.dragHandleProps),{},{style:u?{opacity:.2,pointerEvents:"none"}:(m=r.draggableProps.style,y=a,t({userSelect:"none",transition:"opacity 500ms ease-in-out",opacity:y?.2:1,pointerEvents:y?"none":void 0},m)),children:g(x,{paddingBottom:1,children:g(D,{tone:h,shadow:l?2:void 0,radius:2,children:g(V,{doc:e,entities:c,handleSelect:O,increment:$,index:n,isFirst:0===n,isLast:n===c.length-1})})})}));var m,y}},"".concat(e._id,"-").concat(e.orderRank)))),e.placeholder]}))})})}function K(e){let{children:t}=e;return g(x,{padding:3,children:g(D,{padding:4,radius:2,shadow:1,tone:"caution",children:g(I,{children:t})})})}const G={};function H(e){let{type:t,filter:n,params:r=G}=e;const[i,o]=v(!0),[s,l]=v(!1),[d,a]=v([]),c=U();b((()=>{const e="*[_type == $type ".concat(n?"&& ".concat(n):"","]|order(@[$order] asc){\n      _id, _type, ").concat("orderRank","\n    }"),l=Object.assign(r,{type:t,order:"orderRank"});let u;const p=async()=>{c.fetch(e,l).then((e=>{const t=e.reduce(((t,n)=>{if(!n._id.startsWith("drafts.")){return e.some((e=>e._id==="drafts.".concat(n._id)))?t:[...t,n]}return[...t,n]}),[]);a(t),i&&o(!1)}))};return s||d.length||(async()=>{o(!0),await p(),u||(u=c.listen(e,l).subscribe((()=>p())))})(),()=>null==u?void 0:u.unsubscribe()}),[t]);const u=k((()=>d.length?d.filter((e=>!e.orderRank)).length:0),[d]);return i?g(O,{style:{width:"100%",height:"100%"},align:"center",justify:"center",children:g(j,{})}):h(E,{space:1,style:{overflow:"auto",height:"100%"},children:[u>0&&h(K,{children:[u,"/",d.length," Documents have no Order. Select"," ",g("strong",{children:"Reset Order"})," from the Menu above to fix."]}),g(x,{padding:1,children:g(F,{data:d,type:t,listIsUpdating:s,setListIsUpdating:l})})]})}function M(e){let{type:t,showIncrements:n,resetOrderTransaction:r,filter:o,params:s}=e;const l=_(),d=i();b((()=>{(null==r?void 0:r.title)&&(null==r?void 0:r.status)&&l.push(r)}),[r,l]);const a=k((()=>{if(!t)return h(m,{children:["No ",g("code",{children:"type"})," was configured"]});const e=d.get(t);return e?"fields"in e&&e.fields.some((e=>"orderRank"===(null==e?void 0:e.name)))?"fields"in e&&e.fields.some((e=>{var t;return"orderRank"===(null==e?void 0:e.name)&&"string"!==(null==(t=null==e?void 0:e.type)?void 0:t.name)}))?h(m,{children:[g("code",{children:"orderRank"})," field on Schema ",g("code",{children:t})," must be"," ",g("code",{children:"string"})," type"]}):"":h(m,{children:["Schema ",g("code",{children:t})," must have an ",g("code",{children:"orderRank"})," field of type"," ",g("code",{children:"string"})]}):h(m,{children:["Schema ",g("code",{children:t})," not found"]})}),[t,d]);return a?g(K,{children:a}):g(N.Provider,{value:{showIncrements:n},children:g(H,{type:t,filter:o,params:s})})}class W extends R{constructor(e){super(e),this.actionHandlers={showIncrements:()=>{this.setState((e=>({showIncrements:!e.showIncrements})))},resetOrder:async()=>{var e;this.setState((()=>({resetOrderTransaction:{status:"info",title:"Reordering started...",closable:!0}})));const t=await async function(){let e=arguments.length>1?arguments[1]:void 0;const t="*[_type == $type]|order(@[$order] asc)._id",n={type:arguments.length>0&&void 0!==arguments[0]?arguments[0]:"",order:"orderRank"},r=await e.fetch(t,n);if(!r.length)return null;const i=e.transaction();let o=l.min();for(let e=0;e<r.length;e+=1)o=o.genNext().genNext(),i.patch(r[e],{set:{orderRank:o.value}});return i.commit().then((e=>e)).catch((e=>e))}(this.props.options.type,this.props.options.client),n=null==(e=null==t?void 0:t.results)?void 0:e.length;this.setState((()=>({resetOrderTransaction:{status:n?"success":"info",title:n?"Reordered ".concat(1===t.results.length?"Document":"Documents"):"Reordering failed",closable:!0}})))}},this.state={showIncrements:!1,resetOrderTransaction:{}}}render(){var e,t,n,r,i,o;const s=null==(t=null==(e=null==this?void 0:this.props)?void 0:e.options)?void 0:t.type;return s?g(M,{filter:null==(r=null==(n=null==this?void 0:this.props)?void 0:n.options)?void 0:r.filter,params:null==(o=null==(i=null==this?void 0:this.props)?void 0:i.options)?void 0:o.params,type:s,showIncrements:this.state.showIncrements,resetOrderTransaction:this.state.resetOrderTransaction}):null}}function X(e){var t,n;if(!(null==e?void 0:e.type)||!e.context||!e.S)throw new Error("\n    type, context and S (StructureBuilder) must be provided.\n    context and S are available when configuring structure.\n    Example: orderableDocumentListDeskItem({type: 'category'})\n    ");const{type:r,filter:i,params:o,title:s,icon:l,id:d,context:a,S:c}=e,{schema:h,getClient:g}=a,m=g({apiVersion:"2021-09-01"}),f=null!=s?s:"Orderable ".concat(r),y=null!=d?d:"orderable-".concat(r),v=null!=l?l:p,b=null!=(n=null==(t=h.get(r))?void 0:t.title)?n:r;return c.listItem().title(f).id(y).icon(v).child(Object.assign(c.documentTypeList(r).serialize(),{__preserveInstance:!0,key:y,type:"component",component:W,options:{type:r,filter:i,params:o,client:m},menuItems:[c.menuItem().title("Create new ".concat(b)).intent({type:"create",params:{type:r}}).serialize(),c.menuItem().title("Reset Order").icon(u).action("resetOrder").serialize(),c.menuItem().title("Show Increments").icon(p).action("showIncrements").serialize()]})).serialize()}export{$ as orderRankField,z as orderRankOrdering,X as orderableDocumentListDeskItem};
+import { defineField, useSchema, PreviewCard, Preview, useClient } from 'sanity';
+import { LexoRank } from 'lexorank';
+import { DragHandleIcon, ChevronUpIcon, ChevronDownIcon, GenerateIcon, SortIcon } from '@sanity/icons';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import React, { useContext, useMemo, useState, useEffect, useCallback, Component } from 'react';
+import { Flex, Box, Text, Button, Card, AvatarCounter, useToast, Spinner, Container, Stack } from '@sanity/ui';
+import { useListeningQuery, Feedback } from 'sanity-plugin-utils';
+import { DragDropContext, Droppable, Draggable } from '@hello-pangea/dnd';
+import { usePaneRouter } from 'sanity/desk';
+const ORDER_FIELD_NAME = "orderRank";
+function initialRank() {
+  let lastRankValue = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "";
+  const lastRank = lastRankValue ? LexoRank.parse(lastRankValue) : LexoRank.min();
+  const nextRank = lastRank.genNext().genNext();
+  return nextRank.toString();
+}
+const orderRankField = config => {
+  if (!(config == null ? void 0 : config.type)) {
+    throw new Error("\n      type must be provided.\n      Example: orderRankField({type: 'category'})\n      ");
+  }
+  const {
+    type
+  } = config;
+  return defineField({
+    title: "Order Rank",
+    readOnly: true,
+    hidden: true,
+    ...config,
+    name: ORDER_FIELD_NAME,
+    type: "string",
+    initialValue: async (p, _ref) => {
+      let {
+        getClient
+      } = _ref;
+      const lastDocOrderRank = await getClient({
+        apiVersion: "2021-09-01"
+      }).fetch("*[_type == $type]|order(@[$order] desc)[0][$order]", {
+        type,
+        order: ORDER_FIELD_NAME
+      });
+      return initialRank(lastDocOrderRank);
+    }
+  });
+};
+const orderRankOrdering = {
+  title: "Ordered",
+  name: "ordered",
+  by: [{
+    field: ORDER_FIELD_NAME,
+    direction: "asc"
+  }]
+};
+const OrderableContext = React.createContext({});
+function Document(_ref2) {
+  let {
+    doc,
+    increment,
+    entities,
+    index,
+    isFirst,
+    isLast,
+    dragBadge
+  } = _ref2;
+  var _a, _b;
+  const {
+    showIncrements
+  } = useContext(OrderableContext);
+  const schema = useSchema();
+  const router = usePaneRouter();
+  const {
+    ChildLink,
+    groupIndex,
+    routerPanesState
+  } = router;
+  const currentDoc = ((_b = (_a = routerPanesState[groupIndex + 1]) == null ? void 0 : _a[0]) == null ? void 0 : _b.id) || false;
+  const pressed = currentDoc === doc._id || currentDoc === doc._id.replace("drafts.", "");
+  const selected = pressed && routerPanesState.length === groupIndex + 2;
+  const Link = useMemo(() => function LinkComponent(linkProps) {
+    return /* @__PURE__ */jsx(ChildLink, {
+      ...linkProps,
+      childId: doc._id
+    });
+  }, [ChildLink, doc._id]);
+  return /* @__PURE__ */jsx(PreviewCard, {
+    __unstable_focusRing: true,
+    as: Link,
+    "data-as": "a",
+    "data-ui": "PaneItem",
+    radius: 2,
+    pressed,
+    selected,
+    sizing: "border",
+    tabIndex: -1,
+    tone: "inherit",
+    width: "100%",
+    flex: 1,
+    children: /* @__PURE__ */jsxs(Flex, {
+      align: "center",
+      children: [/* @__PURE__ */jsx(Box, {
+        paddingX: 3,
+        style: {
+          flexShrink: 0
+        },
+        children: /* @__PURE__ */jsx(Text, {
+          size: 2,
+          children: /* @__PURE__ */jsx(DragHandleIcon, {
+            cursor: "grab"
+          })
+        })
+      }), showIncrements && /* @__PURE__ */jsxs(Flex, {
+        style: {
+          flexShrink: 0
+        },
+        align: "center",
+        gap: 1,
+        paddingRight: 1,
+        children: [/* @__PURE__ */jsx(Button, {
+          padding: 2,
+          mode: "ghost",
+          onClick: () => increment(index, index + -1, doc._id, entities),
+          disabled: isFirst,
+          icon: ChevronUpIcon
+        }), /* @__PURE__ */jsx(Button, {
+          padding: 2,
+          mode: "ghost",
+          disabled: isLast,
+          onClick: () => increment(index, index + 1, doc._id, entities),
+          icon: ChevronDownIcon
+        })]
+      }), /* @__PURE__ */jsx(Box, {
+        style: {
+          width: "100%"
+        },
+        padding: 2,
+        children: /* @__PURE__ */jsx(Flex, {
+          flex: 1,
+          align: "center",
+          children: /* @__PURE__ */jsx(Preview, {
+            layout: "default",
+            value: doc,
+            schemaType: schema.get(doc._type)
+          })
+        })
+      }), dragBadge && /* @__PURE__ */jsx(Card, {
+        tone: "default",
+        marginRight: 4,
+        radius: 5,
+        children: /* @__PURE__ */jsx(AvatarCounter, {
+          count: dragBadge
+        })
+      })]
+    })
+  });
+}
+function lexicographicalSort(a, b) {
+  if (!a[ORDER_FIELD_NAME] || !b[ORDER_FIELD_NAME]) {
+    return 0;
+  } else if (a[ORDER_FIELD_NAME] < b[ORDER_FIELD_NAME]) {
+    return -1;
+  } else if (a[ORDER_FIELD_NAME] > b[ORDER_FIELD_NAME]) {
+    return 1;
+  }
+  return 0;
+}
+const reorderDocuments = _ref3 => {
+  let {
+    entities,
+    selectedIds,
+    source,
+    destination
+  } = _ref3;
+  const startIndex = source.index;
+  const endIndex = destination.index;
+  const isMovingUp = startIndex > endIndex;
+  const selectedItems = entities.filter(item => selectedIds.includes(item._id));
+  const message = ["Moved", selectedItems.length === 1 ? "1 document" : "".concat(selectedItems.length, " documents"), isMovingUp ? "up" : "down", "from position", "".concat(startIndex + 1, " to ").concat(endIndex + 1)].join(" ");
+  const {
+    all,
+    selected
+  } = entities.reduce((acc, cur, curIndex) => {
+    var _a, _b, _c, _d;
+    if (selectedIds.includes(cur._id)) {
+      return {
+        all: acc.all,
+        selected: acc.selected
+      };
+    }
+    if (curIndex === endIndex) {
+      const prevIndex = curIndex - 1;
+      const prevRank = ((_a = entities[prevIndex]) == null ? void 0 : _a[ORDER_FIELD_NAME]) ? LexoRank.parse((_b = entities[prevIndex]) == null ? void 0 : _b[ORDER_FIELD_NAME]) : LexoRank.min();
+      const curRank = LexoRank.parse(entities[curIndex][ORDER_FIELD_NAME]);
+      const nextIndex = curIndex + 1;
+      const nextRank = ((_c = entities[nextIndex]) == null ? void 0 : _c[ORDER_FIELD_NAME]) ? LexoRank.parse((_d = entities[nextIndex]) == null ? void 0 : _d[ORDER_FIELD_NAME]) : LexoRank.max();
+      let betweenRank = isMovingUp ? prevRank.between(curRank) : curRank.between(nextRank);
+      for (let selectedIndex = 0; selectedIndex < selectedItems.length; selectedIndex += 1) {
+        selectedItems[selectedIndex][ORDER_FIELD_NAME] = betweenRank.toString();
+        betweenRank = isMovingUp ? betweenRank.between(curRank) : betweenRank.between(nextRank);
+      }
+      return {
+        // The `all` array gets sorted by order field later anyway
+        // so that this probably isn't necessary ¯\_(ツ)_/¯
+        all: isMovingUp ? [...acc.all, ...selectedItems, cur] : [...acc.all, cur, ...selectedItems],
+        selected: selectedItems
+      };
+    }
+    return {
+      all: [...acc.all, cur],
+      selected: acc.selected
+    };
+  }, {
+    all: [],
+    selected: []
+  });
+  const patches = selected.flatMap(doc => {
+    const docPatches = [[doc._id, {
+      set: {
+        [ORDER_FIELD_NAME]: doc[ORDER_FIELD_NAME]
+      }
+    }]];
+    if (doc._id.startsWith("drafts.") && doc.hasPublished) {
+      docPatches.push([doc._id.replace("drafts.", ""), {
+        set: {
+          [ORDER_FIELD_NAME]: doc[ORDER_FIELD_NAME]
+        }
+      }]);
+    }
+    return docPatches;
+  });
+  const allSorted = all.sort(lexicographicalSort);
+  return {
+    newOrder: allSorted,
+    patches,
+    message
+  };
+};
+function useSanityClient() {
+  return useClient({
+    apiVersion: "2021-09-01"
+  });
+}
+const getItemStyle = (draggableStyle, itemIsUpdating) => ({
+  userSelect: "none",
+  transition: "opacity 500ms ease-in-out",
+  opacity: itemIsUpdating ? 0.2 : 1,
+  pointerEvents: itemIsUpdating ? "none" : void 0,
+  ...draggableStyle
+});
+const cardTone = settings => {
+  const {
+    isDuplicate,
+    isGhosting,
+    isDragging,
+    isSelected
+  } = settings;
+  if (isGhosting) return "transparent";
+  if (isDragging || isSelected) return "primary";
+  if (isDuplicate) return "caution";
+  return void 0;
+};
+function DraggableList(_ref4) {
+  let {
+    data,
+    listIsUpdating,
+    setListIsUpdating
+  } = _ref4;
+  var _a, _b;
+  const toast = useToast();
+  const router = usePaneRouter();
+  const {
+    groupIndex,
+    routerPanesState
+  } = router;
+  const currentDoc = ((_b = (_a = routerPanesState[groupIndex + 1]) == null ? void 0 : _a[0]) == null ? void 0 : _b.id) || false;
+  const [orderedData, setOrderedData] = useState(data);
+  useEffect(() => {
+    if (!listIsUpdating) setOrderedData(data);
+  }, [data]);
+  const [draggingId, setDraggingId] = useState("");
+  const [selectedIds, setSelectedIds] = useState(currentDoc ? [currentDoc] : []);
+  const clearSelected = useCallback(() => setSelectedIds([]), [setSelectedIds]);
+  const handleSelect = useCallback((clickedId, index, nativeEvent) => {
+    const isSelected = selectedIds.includes(clickedId);
+    const selectMultiple = nativeEvent.shiftKey;
+    const isUsingWindows = navigator.appVersion.indexOf("Win") !== -1;
+    const selectAdditional = isUsingWindows ? nativeEvent.ctrlKey : nativeEvent.metaKey;
+    let updatedIds = [];
+    if (!selectMultiple && !selectAdditional) {
+      return setSelectedIds([clickedId]);
+    }
+    if (selectMultiple) {
+      nativeEvent.preventDefault();
+    }
+    if (selectMultiple && !isSelected) {
+      const lastSelectedId = selectedIds[selectedIds.length - 1];
+      const lastSelectedIndex = orderedData.findIndex(item => item._id === lastSelectedId);
+      const firstSelected = index < lastSelectedIndex ? index : lastSelectedIndex;
+      const lastSelected = index > lastSelectedIndex ? index : lastSelectedIndex;
+      const betweenIds = orderedData.filter((item, itemIndex) => itemIndex > firstSelected && itemIndex < lastSelected).map(item => item._id);
+      updatedIds = [...selectedIds, ...betweenIds, clickedId];
+    } else if (isSelected) {
+      updatedIds = selectedIds.filter(id => id !== clickedId);
+    } else {
+      updatedIds = [...selectedIds, clickedId];
+    }
+    return setSelectedIds(updatedIds);
+  }, [setSelectedIds, orderedData, selectedIds]);
+  const client = useSanityClient();
+  const transactPatches = useCallback(async (patches, message) => {
+    const transaction = client.transaction();
+    patches.forEach(_ref5 => {
+      let [docId, ops] = _ref5;
+      return transaction.patch(docId, ops);
+    });
+    await transaction.commit().then(updated => {
+      clearSelected();
+      setDraggingId("");
+      setListIsUpdating(false);
+      toast.push({
+        title: "".concat(updated.results.length === 1 ? "1 Document" : "".concat(updated.results.length, " Documents"), " Reordered"),
+        status: "success",
+        description: message
+      });
+    }).catch(() => {
+      setDraggingId("");
+      setListIsUpdating(false);
+      toast.push({
+        title: "Reordering failed",
+        status: "error"
+      });
+    });
+  }, [client, setDraggingId, clearSelected, setListIsUpdating, toast]);
+  const handleDragEnd = useCallback((result, entities) => {
+    setDraggingId("");
+    const {
+      source,
+      destination,
+      draggableId
+    } = result != null ? result : {};
+    if ((source == null ? void 0 : source.index) === (destination == null ? void 0 : destination.index)) return;
+    if (!(entities == null ? void 0 : entities.length) || !draggableId) return;
+    const effectedIds = (selectedIds == null ? void 0 : selectedIds.length) ? selectedIds : [draggableId];
+    if (!(effectedIds == null ? void 0 : effectedIds.length)) return;
+    setListIsUpdating(true);
+    setSelectedIds(effectedIds);
+    const {
+      newOrder,
+      patches,
+      message
+    } = reorderDocuments({
+      entities,
+      selectedIds: effectedIds,
+      source,
+      destination
+    });
+    if (newOrder == null ? void 0 : newOrder.length) {
+      setOrderedData(newOrder);
+    }
+    if (patches == null ? void 0 : patches.length) {
+      transactPatches(patches, message);
+    }
+  }, [selectedIds, setDraggingId, setSelectedIds, transactPatches, setListIsUpdating]);
+  const handleDragStart = useCallback(start => {
+    const id = start.draggableId;
+    const selected = selectedIds.includes(id);
+    if (!selected) clearSelected();
+    setDraggingId(id);
+  }, [selectedIds, clearSelected, setDraggingId]);
+  const incrementIndex = useCallback((shiftFrom, shiftTo, id, entities) => {
+    const result = {
+      draggableId: id,
+      source: {
+        index: shiftFrom
+      },
+      destination: {
+        index: shiftTo
+      }
+    };
+    return handleDragEnd(result, entities);
+  }, [handleDragEnd]);
+  const onWindowKeyDown = useCallback(event => {
+    if (event.key === "Escape") {
+      clearSelected();
+    }
+  }, [clearSelected]);
+  useEffect(() => {
+    window.addEventListener("keydown", onWindowKeyDown);
+    return () => {
+      window.removeEventListener("keydown", onWindowKeyDown);
+    };
+  }, [onWindowKeyDown]);
+  const duplicateOrders = useMemo(() => {
+    if (!orderedData.length) return [];
+    const orderField = orderedData.map(item => item[ORDER_FIELD_NAME]);
+    return orderField.filter((item, index) => orderField.indexOf(item) !== index);
+  }, [orderedData]);
+  const onDragEnd = useCallback(result => handleDragEnd(result, orderedData), [orderedData, handleDragEnd]);
+  return /* @__PURE__ */jsx(DragDropContext, {
+    onDragStart: handleDragStart,
+    onDragEnd,
+    children: /* @__PURE__ */jsx(Droppable, {
+      droppableId: "documentSortZone",
+      children: provided => /* @__PURE__ */jsxs("div", {
+        ...provided.droppableProps,
+        ref: provided.innerRef,
+        children: [orderedData.map((item, index) => /* @__PURE__ */jsx(Draggable, {
+          draggableId: item._id,
+          index,
+          children: (innerProvided, innerSnapshot) => {
+            const isSelected = selectedIds.includes(item._id);
+            const isDragging = innerSnapshot.isDragging;
+            const isGhosting = Boolean(!isDragging && draggingId && isSelected);
+            const isUpdating = listIsUpdating && isSelected;
+            const isDisabled = Boolean(!item[ORDER_FIELD_NAME]);
+            const isDuplicate = duplicateOrders.includes(item[ORDER_FIELD_NAME]);
+            const tone = cardTone({
+              isDuplicate,
+              isGhosting,
+              isDragging,
+              isSelected
+            });
+            const selectedCount = selectedIds.length;
+            const dragBadge = isDragging && selectedCount > 1 ? selectedCount : false;
+            return /* @__PURE__ */jsx("div", {
+              ref: innerProvided.innerRef,
+              ...innerProvided.draggableProps,
+              ...innerProvided.dragHandleProps,
+              style: isDisabled ? {
+                opacity: 0.2,
+                pointerEvents: "none"
+              } : getItemStyle(innerProvided.draggableProps.style, isUpdating),
+              children: /* @__PURE__ */jsx(Box, {
+                paddingBottom: 1,
+                children: /* @__PURE__ */jsx(Card, {
+                  tone,
+                  shadow: isDragging ? 2 : void 0,
+                  radius: 2,
+                  onClick: e => handleSelect(item._id, index, e.nativeEvent),
+                  children: /* @__PURE__ */jsx(Document, {
+                    doc: item,
+                    entities: orderedData,
+                    increment: incrementIndex,
+                    index,
+                    isFirst: index === 0,
+                    isLast: index === orderedData.length - 1,
+                    dragBadge
+                  })
+                })
+              })
+            });
+          }
+        }, "".concat(item._id, "-").concat(item[ORDER_FIELD_NAME]))), provided.placeholder]
+      })
+    })
+  });
+}
+const DEFAULT_PARAMS = {};
+function DocumentListQuery(_ref6) {
+  let {
+    type,
+    filter,
+    params = DEFAULT_PARAMS
+  } = _ref6;
+  const [listIsUpdating, setListIsUpdating] = useState(false);
+  const [data, setData] = useState([]);
+  const query = "*[_type == $type ".concat(filter ? "&& ".concat(filter) : "", "]|order(@[$order] asc){\n    _id, _type, ").concat(ORDER_FIELD_NAME, "\n  }");
+  const queryParams = {
+    ...params,
+    type,
+    order: ORDER_FIELD_NAME
+  };
+  const {
+    data: queryData,
+    loading,
+    error
+  } = useListeningQuery(query, {
+    params: queryParams,
+    initialValue: []
+  });
+  useEffect(() => {
+    if (queryData) {
+      const filteredDocuments = queryData.reduce((acc, cur) => {
+        if (!cur._id.startsWith("drafts.")) {
+          const alsoHasDraft = queryData.some(doc => doc._id === "drafts.".concat(cur._id));
+          return alsoHasDraft ? acc : [...acc, cur];
+        }
+        cur.hasPublished = queryData.some(doc => doc._id === cur._id.replace("drafts.", ""));
+        return [...acc, cur];
+      }, []);
+      setData(filteredDocuments);
+    } else {
+      setData([]);
+    }
+  }, [queryData]);
+  const unorderedDataCount = useMemo(() => (data == null ? void 0 : data.length) ? data.filter(doc => !doc[ORDER_FIELD_NAME]).length : 0, [data]);
+  if (loading) {
+    return /* @__PURE__ */jsx(Flex, {
+      style: {
+        width: "100%",
+        height: "100%"
+      },
+      align: "center",
+      justify: "center",
+      children: /* @__PURE__ */jsx(Spinner, {})
+    });
+  }
+  if (error) {
+    return /* @__PURE__ */jsx(Box, {
+      padding: 2,
+      children: /* @__PURE__ */jsx(Feedback, {
+        tone: "critical",
+        title: "There was an error",
+        description: "Please try again later"
+      })
+    });
+  }
+  if (!data || (data == null ? void 0 : data.length) == 0) return /* @__PURE__ */jsx(Flex, {
+    align: "center",
+    direction: "column",
+    height: "fill",
+    justify: "center",
+    children: /* @__PURE__ */jsx(Container, {
+      width: 1,
+      children: /* @__PURE__ */jsx(Box, {
+        paddingX: 4,
+        paddingY: 5,
+        children: /* @__PURE__ */jsx(Text, {
+          align: "center",
+          muted: true,
+          children: "No documents of this type"
+        })
+      })
+    })
+  });
+  return /* @__PURE__ */jsx(Stack, {
+    space: 1,
+    style: {
+      overflow: "auto",
+      height: "100%"
+    },
+    children: /* @__PURE__ */jsxs(Box, {
+      padding: 2,
+      children: [unorderedDataCount > 0 && /* @__PURE__ */jsx(Box, {
+        marginBottom: 2,
+        children: /* @__PURE__ */jsx(Feedback, {
+          tone: "caution",
+          description: /* @__PURE__ */jsxs(Fragment, {
+            children: [unorderedDataCount, "/", data == null ? void 0 : data.length, " documents have no order. Select", " ", /* @__PURE__ */jsx("strong", {
+              children: "Reset Order"
+            }), " from the menu above to fix."]
+          })
+        })
+      }), /* @__PURE__ */jsx(DraggableList, {
+        data,
+        listIsUpdating,
+        setListIsUpdating
+      })]
+    })
+  });
+}
+function DocumentListWrapper(_ref7) {
+  let {
+    type,
+    showIncrements,
+    resetOrderTransaction,
+    filter,
+    params
+  } = _ref7;
+  const toast = useToast();
+  const schema = useSchema();
+  useEffect(() => {
+    if ((resetOrderTransaction == null ? void 0 : resetOrderTransaction.title) && (resetOrderTransaction == null ? void 0 : resetOrderTransaction.status)) {
+      toast.push(resetOrderTransaction);
+    }
+  }, [resetOrderTransaction, toast]);
+  const schemaIsInvalid = useMemo(() => {
+    if (!type) {
+      return /* @__PURE__ */jsxs(Fragment, {
+        children: ["No ", /* @__PURE__ */jsx("code", {
+          children: "type"
+        }), " was configured"]
+      });
+    }
+    const typeSchema = schema.get(type);
+    if (!typeSchema) {
+      return /* @__PURE__ */jsxs(Fragment, {
+        children: ["Schema ", /* @__PURE__ */jsx("code", {
+          children: type
+        }), " not found"]
+      });
+    }
+    if (!("fields" in typeSchema) || !typeSchema.fields.some(field => (field == null ? void 0 : field.name) === ORDER_FIELD_NAME)) {
+      return /* @__PURE__ */jsxs(Fragment, {
+        children: ["Schema ", /* @__PURE__ */jsx("code", {
+          children: type
+        }), " must have an ", /* @__PURE__ */jsx("code", {
+          children: ORDER_FIELD_NAME
+        }), " field of type", " ", /* @__PURE__ */jsx("code", {
+          children: "string"
+        })]
+      });
+    }
+    if ("fields" in typeSchema && typeSchema.fields.some(field => {
+      var _a;
+      return (field == null ? void 0 : field.name) === ORDER_FIELD_NAME && ((_a = field == null ? void 0 : field.type) == null ? void 0 : _a.name) !== "string";
+    })) {
+      return /* @__PURE__ */jsxs(Fragment, {
+        children: [/* @__PURE__ */jsx("code", {
+          children: ORDER_FIELD_NAME
+        }), " field on Schema ", /* @__PURE__ */jsx("code", {
+          children: type
+        }), " must be", " ", /* @__PURE__ */jsx("code", {
+          children: "string"
+        }), " type"]
+      });
+    }
+    return "";
+  }, [type, schema]);
+  if (schemaIsInvalid) {
+    return /* @__PURE__ */jsx(Box, {
+      padding: 2,
+      children: /* @__PURE__ */jsx(Feedback, {
+        description: schemaIsInvalid,
+        tone: "caution"
+      })
+    });
+  }
+  return /* @__PURE__ */jsx(OrderableContext.Provider, {
+    value: {
+      showIncrements
+    },
+    children: /* @__PURE__ */jsx(DocumentListQuery, {
+      type,
+      filter,
+      params
+    })
+  });
+}
+async function resetOrder() {
+  let type = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "";
+  let client = arguments.length > 1 ? arguments[1] : undefined;
+  const query = "*[_type == $type]|order(@[$order] asc)._id";
+  const queryParams = {
+    type,
+    order: ORDER_FIELD_NAME
+  };
+  const documents = await client.fetch(query, queryParams);
+  if (!documents.length) {
+    return null;
+  }
+  const transaction = client.transaction();
+  let aLexoRank = LexoRank.min();
+  for (let index = 0; index < documents.length; index += 1) {
+    aLexoRank = aLexoRank.genNext().genNext();
+    transaction.patch(documents[index], {
+      set: {
+        [ORDER_FIELD_NAME]: aLexoRank.toString()
+      }
+    });
+  }
+  return transaction.commit().then(update => update).catch(err => err);
+}
+var __defProp = Object.defineProperty;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, {
+  enumerable: true,
+  configurable: true,
+  writable: true,
+  value
+}) : obj[key] = value;
+var __publicField = (obj, key, value) => {
+  __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
+  return value;
+};
+class OrderableDocumentList extends Component {
+  constructor(props) {
+    super(props);
+    __publicField(this, "actionHandlers", {
+      showIncrements: () => {
+        this.setState(state => ({
+          showIncrements: !state.showIncrements
+        }));
+      },
+      resetOrder: async () => {
+        var _a;
+        this.setState(() => ({
+          resetOrderTransaction: {
+            status: "info",
+            title: "Reordering started...",
+            closable: true
+          }
+        }));
+        const update = await resetOrder(this.props.options.type, this.props.options.client);
+        const reorderWasSuccessful = (_a = update == null ? void 0 : update.results) == null ? void 0 : _a.length;
+        this.setState(() => ({
+          resetOrderTransaction: {
+            status: reorderWasSuccessful ? "success" : "info",
+            title: reorderWasSuccessful ? "Reordered ".concat(update.results.length === 1 ? "Document" : "Documents") : "Reordering failed",
+            closable: true
+          }
+        }));
+      }
+    });
+    this.state = {
+      showIncrements: false,
+      resetOrderTransaction: {}
+    };
+  }
+  render() {
+    var _a, _b, _c, _d, _e, _f;
+    const type = (_b = (_a = this == null ? void 0 : this.props) == null ? void 0 : _a.options) == null ? void 0 : _b.type;
+    if (!type) {
+      return null;
+    }
+    return /* @__PURE__ */jsx(DocumentListWrapper, {
+      filter: (_d = (_c = this == null ? void 0 : this.props) == null ? void 0 : _c.options) == null ? void 0 : _d.filter,
+      params: (_f = (_e = this == null ? void 0 : this.props) == null ? void 0 : _e.options) == null ? void 0 : _f.params,
+      type,
+      showIncrements: this.state.showIncrements,
+      resetOrderTransaction: this.state.resetOrderTransaction
+    });
+  }
+}
+function orderableDocumentListDeskItem(config) {
+  var _a, _b;
+  if (!(config == null ? void 0 : config.type) || !config.context || !config.S) {
+    throw new Error("\n    type, context and S (StructureBuilder) must be provided.\n    context and S are available when configuring structure.\n    Example: orderableDocumentListDeskItem({type: 'category'})\n    ");
+  }
+  const {
+    type,
+    filter,
+    params,
+    title,
+    icon,
+    id,
+    context,
+    S
+  } = config;
+  const {
+    schema,
+    getClient
+  } = context;
+  const client = getClient({
+    apiVersion: "2021-09-01"
+  });
+  const listTitle = title != null ? title : "Orderable ".concat(type);
+  const listId = id != null ? id : "orderable-".concat(type);
+  const listIcon = icon != null ? icon : SortIcon;
+  const typeTitle = (_b = (_a = schema.get(type)) == null ? void 0 : _a.title) != null ? _b : type;
+  return S.listItem().title(listTitle).id(listId).icon(listIcon).child(Object.assign(S.documentTypeList(type).serialize(), {
+    // Prevents the component from re-rendering when switching documents
+    __preserveInstance: true,
+    // Prevents the component from NOT re-rendering when switching listItems
+    key: listId,
+    type: "component",
+    component: OrderableDocumentList,
+    options: {
+      type,
+      filter,
+      params,
+      client
+    },
+    menuItems: [S.menuItem().title("Create new ".concat(typeTitle)).intent({
+      type: "create",
+      params: {
+        type
+      }
+    }).serialize(), S.menuItem().title("Reset Order").icon(GenerateIcon).action("resetOrder").serialize(), S.menuItem().title("Toggle Increments").icon(SortIcon).action("showIncrements").serialize()]
+  })).serialize();
+}
+export { orderRankField, orderRankOrdering, orderableDocumentListDeskItem };
 //# sourceMappingURL=index.esm.js.map