@sanity/orderable-document-list 1.0.4 → 1.1.1

package/lib/index.js

@@ -1 +1,787 @@
-"use strict";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=function(e){var t=function(e,t){if("object"!=typeof e||null===e)return e;var n=e[Symbol.toPrimitive];if(void 0!==n){var r=n.call(e,t||"default");if("object"!=typeof r)return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}(e,"string");return"symbol"==typeof t?t:String(t)}(t))in e?Object.defineProperty(e,t,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[t]=n,e}Object.defineProperty(exports,"__esModule",{value:!0});var r=require("sanity"),i=require("lexorank"),s=require("@sanity/icons"),o=require("react/jsx-runtime"),l=require("react"),a=require("@sanity/ui"),c=require("@hello-pangea/dnd"),d=require("sanity/desk");function u(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}const p="orderRank";const h={title:"Ordered",name:"ordered",by:[{field:p,direction:"asc"}]},g=u(l).default.createContext({});function f(e){let{doc:t,increment:n,entities:i,handleSelect:c,index:d,isFirst:u,isLast:p}=e;const{showIncrements:h}=l.useContext(g),f=r.useSchema();return o.jsxs(a.Flex,{align:"center",children:[o.jsx(a.Box,{paddingX:3,style:{flexShrink:0},children:o.jsx(a.Text,{size:4,children:o.jsx(s.DragHandleIcon,{})})}),h&&o.jsxs(a.Flex,{style:{flexShrink:0},align:"center",gap:1,paddingRight:1,children:[o.jsx(a.Button,{padding:2,mode:"ghost",onClick:()=>n(d,d+-1,t._id,i),disabled:u,icon:s.ChevronUpIcon}),o.jsx(a.Button,{padding:2,mode:"ghost",disabled:p,onClick:()=>n(d,d+1,t._id,i),icon:s.ChevronDownIcon})]}),o.jsx(a.Button,{style:{width:"100%"},padding:2,mode:"bleed",onClick:e=>c(t._id,d,e.nativeEvent),children:o.jsx(a.Flex,{flex:1,align:"center",children:o.jsx(a.Card,{tone:"default",children:o.jsx(r.Preview,{layout:"default",value:t,schemaType:f.get(t._type)})})})})]})}function m(e,t){return e[p]&&t[p]?e[p]<t[p]?-1:e[p]>t[p]?1:0:0}const x=e=>{let{entities:t,selectedIds:n,source:r,destination:s}=e;const o=r.index,l=s.index,a=o>l,c=t.filter((e=>n.includes(e._id))),d=["Moved",1===c.length?"1 Document":"".concat(c.length," Documents"),a?"up":"down","from position","".concat(o+1," to ").concat(l+1)].join(" "),{all:u,selected:h}=t.reduce(((e,r,s)=>{var o,d,u,h;if(n.includes(r._id))return{all:e.all,selected:e.selected};if(s===l){const n=s-1,l=(null==(o=t[n])?void 0:o[p])?i.LexoRank.parse(null==(d=t[n])?void 0:d[p]):i.LexoRank.min(),g=i.LexoRank.parse(t[s][p]),f=s+1,m=(null==(u=t[f])?void 0:u[p])?i.LexoRank.parse(null==(h=t[f])?void 0:h[p]):i.LexoRank.max();let x=a?l.between(g):g.between(m);for(let e=0;e<c.length;e+=1)c[e][p]=x.toString(),x=a?x.between(g):x.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:{[p]:e[p]}}]));return{newOrder:u.sort(m),patches:g,message:d}};function y(){return r.useClient({apiVersion:"2021-09-01"})}const v=(e,n)=>t({userSelect:"none",transition:"opacity 500ms ease-in-out",opacity:n?.2:1,pointerEvents:n?"none":void 0},e),b=e=>{const{isDuplicate:t,isGhosting:n,isDragging:r,isSelected:i}=e;return n?"transparent":r||i?"primary":t?"caution":void 0};function j(e){let{data:n,type:r,listIsUpdating:i,setListIsUpdating:s}=e;const u=a.useToast(),h=d.usePaneRouter(),{navigateIntent:g}=h,[m,j]=l.useState(n);l.useEffect((()=>{i||j(n)}),[n]);const[w,O]=l.useState(""),[S,I]=l.useState([]),k=l.useCallback((()=>I([])),[I]),D=l.useCallback(((e,t,n)=>{const i=S.includes(e),s=n.shiftKey,o=-1!==navigator.appVersion.indexOf("Win")?n.ctrlKey:n.metaKey;let l=[];if(!s&&!o)return g("edit",{id:e,type:r}),I([e]);if(s&&!i){const n=S[S.length-1],r=m.findIndex((e=>e._id===n)),i=t<r?t:r,s=t>r?t:r,o=m.filter(((e,t)=>t>i&&t<s)).map((e=>e._id));l=[...S,...o,e]}else l=i?S.filter((t=>t!==e)):[...S,e];return I(l)}),[I,g,m,S,r]),_=y(),C=l.useCallback((async(e,t)=>{const n=_.transaction();e.forEach((e=>{let[t,r]=e;return n.patch(t,r)})),await n.commit().then((e=>{k(),O(""),s(!1),u.push({title:"".concat(1===e.results.length?"1 Document":"".concat(e.results.length," Documents")," Reordered"),status:"success",description:t})})).catch((()=>{O(""),s(!1),u.push({title:"Reordering failed",status:"error"})}))}),[_,O,k,s,u]),R=l.useCallback(((e,t)=>{O("");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 o=(null==S?void 0:S.length)?S:[i];if(!(null==o?void 0:o.length))return;s(!0),I(o);const{newOrder:l,patches:a,message:c}=x({entities:t,selectedIds:o,source:n,destination:r});(null==l?void 0:l.length)&&j(l),(null==a?void 0:a.length)&&C(a,c)}),[S,O,I,C,s]),E=l.useCallback((e=>{const t=e.draggableId;S.includes(t)||k(),O(t)}),[S,k,O]),P=l.useCallback(((e,t,n,r)=>R({draggableId:n,source:{index:e},destination:{index:t}},r)),[R]),L=l.useCallback((e=>{"Escape"===e.key&&k()}),[k]);l.useEffect((()=>(window.addEventListener("keydown",L),()=>{window.removeEventListener("keydown",L)})),[L]);const T=l.useMemo((()=>{if(!m.length)return[];const e=m.map((e=>e[p]));return e.filter(((t,n)=>e.indexOf(t)!==n))}),[m]),F=l.useCallback((e=>R(e,m)),[m,R]);return o.jsx(c.DragDropContext,{onDragStart:E,onDragEnd:F,children:o.jsx(c.Droppable,{droppableId:"documentSortZone",children:e=>o.jsxs("div",t(t({},e.droppableProps),{},{ref:e.innerRef,children:[m.map(((e,n)=>o.jsx(c.Draggable,{draggableId:e._id,index:n,children:(r,s)=>{const l=S.includes(e._id),c=s.isDragging,d=Boolean(!c&&w&&l),u=i&&l,h=Boolean(!e[p]),g=T.includes(e[p]),x=b({isDuplicate:g,isGhosting:d,isDragging:c,isSelected:l});return o.jsx("div",t(t(t({ref:r.innerRef},r.draggableProps),r.dragHandleProps),{},{style:h?{opacity:.2,pointerEvents:"none"}:v(r.draggableProps.style,u),children:o.jsx(a.Box,{paddingBottom:1,children:o.jsx(a.Card,{tone:x,shadow:c?2:void 0,radius:2,children:o.jsx(f,{doc:e,entities:m,handleSelect:D,increment:P,index:n,isFirst:0===n,isLast:n===m.length-1})})})}))}},"".concat(e._id,"-").concat(e[p])))),e.placeholder]}))})})}function w(e){let{children:t}=e;return o.jsx(a.Box,{padding:3,children:o.jsx(a.Card,{padding:4,radius:2,shadow:1,tone:"caution",children:o.jsx(a.Text,{children:t})})})}const O={};function S(e){let{type:t,filter:n,params:r=O}=e;const[i,s]=l.useState(!0),[c,d]=l.useState(!1),[u,h]=l.useState([]),g=y();l.useEffect((()=>{const e="*[_type == $type ".concat(n?"&& ".concat(n):"","]|order(@[$order] asc){\n      _id, _type, ").concat(p,"\n    }"),o=Object.assign(r,{type:t,order:p});let l;const a=async()=>{g.fetch(e,o).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]}),[]);h(t),i&&s(!1)}))};return c||u.length||(async()=>{s(!0),await a(),l||(l=g.listen(e,o).subscribe((()=>a())))})(),()=>null==l?void 0:l.unsubscribe()}),[t]);const f=l.useMemo((()=>u.length?u.filter((e=>!e[p])).length:0),[u]);return i?o.jsx(a.Flex,{style:{width:"100%",height:"100%"},align:"center",justify:"center",children:o.jsx(a.Spinner,{})}):o.jsxs(a.Stack,{space:1,style:{overflow:"auto",height:"100%"},children:[f>0&&o.jsxs(w,{children:[f,"/",u.length," Documents have no Order. Select"," ",o.jsx("strong",{children:"Reset Order"})," from the Menu above to fix."]}),o.jsx(a.Box,{padding:1,children:o.jsx(j,{data:u,type:t,listIsUpdating:c,setListIsUpdating:d})})]})}function I(e){let{type:t,showIncrements:n,resetOrderTransaction:i,filter:s,params:c}=e;const d=a.useToast(),u=r.useSchema();l.useEffect((()=>{(null==i?void 0:i.title)&&(null==i?void 0:i.status)&&d.push(i)}),[i,d]);const h=l.useMemo((()=>{if(!t)return o.jsxs(o.Fragment,{children:["No ",o.jsx("code",{children:"type"})," was configured"]});const e=u.get(t);return e?"fields"in e&&e.fields.some((e=>(null==e?void 0:e.name)===p))?"fields"in e&&e.fields.some((e=>{var t;return(null==e?void 0:e.name)===p&&"string"!==(null==(t=null==e?void 0:e.type)?void 0:t.name)}))?o.jsxs(o.Fragment,{children:[o.jsx("code",{children:p})," field on Schema ",o.jsx("code",{children:t})," must be"," ",o.jsx("code",{children:"string"})," type"]}):"":o.jsxs(o.Fragment,{children:["Schema ",o.jsx("code",{children:t})," must have an ",o.jsx("code",{children:p})," field of type"," ",o.jsx("code",{children:"string"})]}):o.jsxs(o.Fragment,{children:["Schema ",o.jsx("code",{children:t})," not found"]})}),[t,u]);return h?o.jsx(w,{children:h}):o.jsx(g.Provider,{value:{showIncrements:n},children:o.jsx(S,{type:t,filter:s,params:c})})}class k extends l.Component{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:arguments.length>0&&void 0!==arguments[0]?arguments[0]:"",order:p},n=await e.fetch("*[_type == $type]|order(@[$order] asc)._id",t);if(!n.length)return null;const r=e.transaction();let s=i.LexoRank.min();for(let e=0;e<n.length;e+=1)s=s.genNext().genNext(),r.patch(n[e],{set:{[p]:s.toString()}});return r.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,s;const l=null==(t=null==(e=null==this?void 0:this.props)?void 0:e.options)?void 0:t.type;return l?o.jsx(I,{filter:null==(r=null==(n=null==this?void 0:this.props)?void 0:n.options)?void 0:r.filter,params:null==(s=null==(i=null==this?void 0:this.props)?void 0:i.options)?void 0:s.params,type:l,showIncrements:this.state.showIncrements,resetOrderTransaction:this.state.resetOrderTransaction}):null}}exports.orderRankField=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.defineField(t(t({title:"Order Rank",readOnly:!0,hidden:!0},e),{},{name:p,type:"string",initialValue:async(e,t)=>{let{getClient:r}=t;return function(){let e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:"";return(e?i.LexoRank.parse(e):i.LexoRank.min()).genNext().genNext().toString()}(await r({apiVersion:"2021-09-01"}).fetch("*[_type == $type]|order(@[$order] desc)[0][$order]",{type:n,order:p}))}}))},exports.orderRankOrdering=h,exports.orderableDocumentListDeskItem=function(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:l,icon:a,id:c,context:d,S:u}=e,{schema:p,getClient:h}=d,g=h({apiVersion:"2021-09-01"}),f=null!=l?l:"Orderable ".concat(r),m=null!=c?c:"orderable-".concat(r),x=null!=a?a:s.SortIcon,y=null!=(n=null==(t=p.get(r))?void 0:t.title)?n:r;return u.listItem().title(f).id(m).icon(x).child(Object.assign(u.documentTypeList(r).serialize(),{__preserveInstance:!0,key:m,type:"component",component:k,options:{type:r,filter:i,params:o,client:g},menuItems:[u.menuItem().title("Create new ".concat(y)).intent({type:"create",params:{type:r}}).serialize(),u.menuItem().title("Reset Order").icon(s.GenerateIcon).action("resetOrder").serialize(),u.menuItem().title("Toggle Increments").icon(s.SortIcon).action("showIncrements").serialize()]})).serialize()};//# sourceMappingURL=index.js.map
+'use strict';
+
+Object.defineProperty(exports, '__esModule', {
+  value: true
+});
+var sanity = require('sanity');
+var lexorank = require('lexorank');
+var icons = require('@sanity/icons');
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var ui = require('@sanity/ui');
+var sanityPluginUtils = require('sanity-plugin-utils');
+var dnd = require('@hello-pangea/dnd');
+var desk = require('sanity/desk');
+function _interopDefaultCompat(e) {
+  return e && typeof e === 'object' && 'default' in e ? e : {
+    default: e
+  };
+}
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+const ORDER_FIELD_NAME = "orderRank";
+function initialRank() {
+  let lastRankValue = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : "";
+  const lastRank = lastRankValue ? lexorank.LexoRank.parse(lastRankValue) : lexorank.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 sanity.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__default.default.createContext({});
+function Document(_ref2) {
+  let {
+    doc,
+    increment,
+    entities,
+    index,
+    isFirst,
+    isLast,
+    dragBadge
+  } = _ref2;
+  var _a, _b;
+  const {
+    showIncrements
+  } = React.useContext(OrderableContext);
+  const schema = sanity.useSchema();
+  const router = desk.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 = React.useMemo(() => function LinkComponent(linkProps) {
+    return /* @__PURE__ */jsxRuntime.jsx(ChildLink, {
+      ...linkProps,
+      childId: doc._id
+    });
+  }, [ChildLink, doc._id]);
+  return /* @__PURE__ */jsxRuntime.jsx(sanity.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__ */jsxRuntime.jsxs(ui.Flex, {
+      align: "center",
+      children: [/* @__PURE__ */jsxRuntime.jsx(ui.Box, {
+        paddingX: 2,
+        style: {
+          flexShrink: 0
+        },
+        children: /* @__PURE__ */jsxRuntime.jsx(ui.Text, {
+          size: 2,
+          children: /* @__PURE__ */jsxRuntime.jsx(icons.DragHandleIcon, {
+            cursor: "grab"
+          })
+        })
+      }), showIncrements && /* @__PURE__ */jsxRuntime.jsxs(ui.Flex, {
+        style: {
+          flexShrink: 0
+        },
+        align: "center",
+        gap: 1,
+        paddingRight: 1,
+        children: [/* @__PURE__ */jsxRuntime.jsx(ui.Button, {
+          padding: 2,
+          mode: "ghost",
+          onClick: () => increment(index, index + -1, doc._id, entities),
+          disabled: isFirst,
+          icon: icons.ChevronUpIcon
+        }), /* @__PURE__ */jsxRuntime.jsx(ui.Button, {
+          padding: 2,
+          mode: "ghost",
+          disabled: isLast,
+          onClick: () => increment(index, index + 1, doc._id, entities),
+          icon: icons.ChevronDownIcon
+        })]
+      }), /* @__PURE__ */jsxRuntime.jsx(ui.Box, {
+        style: {
+          width: "100%"
+        },
+        children: /* @__PURE__ */jsxRuntime.jsx(ui.Flex, {
+          flex: 1,
+          align: "center",
+          children: /* @__PURE__ */jsxRuntime.jsx(sanity.Preview, {
+            layout: "default",
+            value: doc,
+            schemaType: schema.get(doc._type)
+          })
+        })
+      }), dragBadge && /* @__PURE__ */jsxRuntime.jsx(ui.Card, {
+        tone: "default",
+        marginRight: 4,
+        radius: 5,
+        children: /* @__PURE__ */jsxRuntime.jsx(ui.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.LexoRank.parse((_b = entities[prevIndex]) == null ? void 0 : _b[ORDER_FIELD_NAME]) : lexorank.LexoRank.min();
+      const curRank = lexorank.LexoRank.parse(entities[curIndex][ORDER_FIELD_NAME]);
+      const nextIndex = curIndex + 1;
+      const nextRank = ((_c = entities[nextIndex]) == null ? void 0 : _c[ORDER_FIELD_NAME]) ? lexorank.LexoRank.parse((_d = entities[nextIndex]) == null ? void 0 : _d[ORDER_FIELD_NAME]) : lexorank.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 sanity.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 = ui.useToast();
+  const router = desk.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] = React.useState(data);
+  React.useEffect(() => {
+    if (!listIsUpdating) setOrderedData(data);
+  }, [data]);
+  const [draggingId, setDraggingId] = React.useState("");
+  const [selectedIds, setSelectedIds] = React.useState(currentDoc ? [currentDoc] : []);
+  const clearSelected = React.useCallback(() => setSelectedIds([]), [setSelectedIds]);
+  const handleSelect = React.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 = React.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 = React.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 = React.useCallback(start => {
+    const id = start.draggableId;
+    const selected = selectedIds.includes(id);
+    if (!selected) clearSelected();
+    setDraggingId(id);
+  }, [selectedIds, clearSelected, setDraggingId]);
+  const incrementIndex = React.useCallback((shiftFrom, shiftTo, id, entities) => {
+    const result = {
+      draggableId: id,
+      source: {
+        index: shiftFrom
+      },
+      destination: {
+        index: shiftTo
+      }
+    };
+    return handleDragEnd(result, entities);
+  }, [handleDragEnd]);
+  const onWindowKeyDown = React.useCallback(event => {
+    if (event.key === "Escape") {
+      clearSelected();
+    }
+  }, [clearSelected]);
+  React.useEffect(() => {
+    window.addEventListener("keydown", onWindowKeyDown);
+    return () => {
+      window.removeEventListener("keydown", onWindowKeyDown);
+    };
+  }, [onWindowKeyDown]);
+  const duplicateOrders = React.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 = React.useCallback(result => handleDragEnd(result, orderedData), [orderedData, handleDragEnd]);
+  return /* @__PURE__ */jsxRuntime.jsx(dnd.DragDropContext, {
+    onDragStart: handleDragStart,
+    onDragEnd,
+    children: /* @__PURE__ */jsxRuntime.jsx(dnd.Droppable, {
+      droppableId: "documentSortZone",
+      children: provided => /* @__PURE__ */jsxRuntime.jsxs("div", {
+        ...provided.droppableProps,
+        ref: provided.innerRef,
+        children: [orderedData.map((item, index) => /* @__PURE__ */jsxRuntime.jsx(dnd.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__ */jsxRuntime.jsx("div", {
+              ref: innerProvided.innerRef,
+              ...innerProvided.draggableProps,
+              ...innerProvided.dragHandleProps,
+              style: isDisabled ? {
+                opacity: 0.2,
+                pointerEvents: "none"
+              } : getItemStyle(innerProvided.draggableProps.style, isUpdating),
+              children: /* @__PURE__ */jsxRuntime.jsx(ui.Box, {
+                paddingBottom: 1,
+                children: /* @__PURE__ */jsxRuntime.jsx(ui.Card, {
+                  tone,
+                  shadow: isDragging ? 2 : void 0,
+                  radius: 2,
+                  onClick: e => handleSelect(item._id, index, e.nativeEvent),
+                  children: /* @__PURE__ */jsxRuntime.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] = React.useState(false);
+  const [data, setData] = React.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
+  } = sanityPluginUtils.useListeningQuery(query, {
+    params: queryParams,
+    initialValue: []
+  });
+  React.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 = React.useMemo(() => (data == null ? void 0 : data.length) ? data.filter(doc => !doc[ORDER_FIELD_NAME]).length : 0, [data]);
+  if (loading) {
+    return /* @__PURE__ */jsxRuntime.jsx(ui.Flex, {
+      style: {
+        width: "100%",
+        height: "100%"
+      },
+      align: "center",
+      justify: "center",
+      children: /* @__PURE__ */jsxRuntime.jsx(ui.Spinner, {})
+    });
+  }
+  if (error) {
+    return /* @__PURE__ */jsxRuntime.jsx(ui.Box, {
+      padding: 2,
+      children: /* @__PURE__ */jsxRuntime.jsx(sanityPluginUtils.Feedback, {
+        tone: "critical",
+        title: "There was an error",
+        description: "Please try again later"
+      })
+    });
+  }
+  if (!data || (data == null ? void 0 : data.length) == 0) return /* @__PURE__ */jsxRuntime.jsx(ui.Flex, {
+    align: "center",
+    direction: "column",
+    height: "fill",
+    justify: "center",
+    children: /* @__PURE__ */jsxRuntime.jsx(ui.Container, {
+      width: 1,
+      children: /* @__PURE__ */jsxRuntime.jsx(ui.Box, {
+        paddingX: 4,
+        paddingY: 5,
+        children: /* @__PURE__ */jsxRuntime.jsx(ui.Text, {
+          align: "center",
+          muted: true,
+          children: "No documents of this type"
+        })
+      })
+    })
+  });
+  return /* @__PURE__ */jsxRuntime.jsx(ui.Stack, {
+    space: 1,
+    style: {
+      overflow: "auto",
+      height: "100%"
+    },
+    children: /* @__PURE__ */jsxRuntime.jsxs(ui.Box, {
+      padding: 2,
+      children: [unorderedDataCount > 0 && /* @__PURE__ */jsxRuntime.jsx(ui.Box, {
+        marginBottom: 2,
+        children: /* @__PURE__ */jsxRuntime.jsx(sanityPluginUtils.Feedback, {
+          tone: "caution",
+          description: /* @__PURE__ */jsxRuntime.jsxs(jsxRuntime.Fragment, {
+            children: [unorderedDataCount, "/", data == null ? void 0 : data.length, " documents have no order. Select", " ", /* @__PURE__ */jsxRuntime.jsx("strong", {
+              children: "Reset Order"
+            }), " from the menu above to fix."]
+          })
+        })
+      }), /* @__PURE__ */jsxRuntime.jsx(DraggableList, {
+        data,
+        listIsUpdating,
+        setListIsUpdating
+      })]
+    })
+  });
+}
+function DocumentListWrapper(_ref7) {
+  let {
+    type,
+    showIncrements,
+    resetOrderTransaction,
+    filter,
+    params
+  } = _ref7;
+  const toast = ui.useToast();
+  const schema = sanity.useSchema();
+  React.useEffect(() => {
+    if ((resetOrderTransaction == null ? void 0 : resetOrderTransaction.title) && (resetOrderTransaction == null ? void 0 : resetOrderTransaction.status)) {
+      toast.push(resetOrderTransaction);
+    }
+  }, [resetOrderTransaction, toast]);
+  const schemaIsInvalid = React.useMemo(() => {
+    if (!type) {
+      return /* @__PURE__ */jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: ["No ", /* @__PURE__ */jsxRuntime.jsx("code", {
+          children: "type"
+        }), " was configured"]
+      });
+    }
+    const typeSchema = schema.get(type);
+    if (!typeSchema) {
+      return /* @__PURE__ */jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: ["Schema ", /* @__PURE__ */jsxRuntime.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__ */jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: ["Schema ", /* @__PURE__ */jsxRuntime.jsx("code", {
+          children: type
+        }), " must have an ", /* @__PURE__ */jsxRuntime.jsx("code", {
+          children: ORDER_FIELD_NAME
+        }), " field of type", " ", /* @__PURE__ */jsxRuntime.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__ */jsxRuntime.jsxs(jsxRuntime.Fragment, {
+        children: [/* @__PURE__ */jsxRuntime.jsx("code", {
+          children: ORDER_FIELD_NAME
+        }), " field on Schema ", /* @__PURE__ */jsxRuntime.jsx("code", {
+          children: type
+        }), " must be", " ", /* @__PURE__ */jsxRuntime.jsx("code", {
+          children: "string"
+        }), " type"]
+      });
+    }
+    return "";
+  }, [type, schema]);
+  if (schemaIsInvalid) {
+    return /* @__PURE__ */jsxRuntime.jsx(ui.Box, {
+      padding: 2,
+      children: /* @__PURE__ */jsxRuntime.jsx(sanityPluginUtils.Feedback, {
+        description: schemaIsInvalid,
+        tone: "caution"
+      })
+    });
+  }
+  return /* @__PURE__ */jsxRuntime.jsx(OrderableContext.Provider, {
+    value: {
+      showIncrements
+    },
+    children: /* @__PURE__ */jsxRuntime.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.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 React.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__ */jsxRuntime.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,
+    menuItems = [],
+    createIntent,
+    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 : icons.SortIcon;
+  const typeTitle = (_b = (_a = schema.get(type)) == null ? void 0 : _a.title) != null ? _b : type;
+  if (createIntent !== false) {
+    menuItems.push(S.menuItem().title("Create new ".concat(typeTitle)).intent({
+      type: "create",
+      params: {
+        type
+      }
+    }).serialize());
+  }
+  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: [...menuItems, S.menuItem().title("Reset Order").icon(icons.GenerateIcon).action("resetOrder").serialize(), S.menuItem().title("Toggle Increments").icon(icons.SortIcon).action("showIncrements").serialize()]
+  })).serialize();
+}
+exports.orderRankField = orderRankField;
+exports.orderRankOrdering = orderRankOrdering;
+exports.orderableDocumentListDeskItem = orderableDocumentListDeskItem;
+//# sourceMappingURL=index.js.map