@sanity/orderable-document-list 1.0.4 → 1.1.1

package/lib/index.esm.js

@@ -1 +1,774 @@
-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}import{defineField as r,useSchema as i,Preview as o,useClient as s}from"sanity";import{LexoRank as l}from"lexorank";import{DragHandleIcon as c,ChevronUpIcon as d,ChevronDownIcon as a,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 O,Component as x}from"react";import{Flex as I,Box as S,Text as _,Button as D,Card as j,useToast as k,Spinner as P,Stack as E}from"@sanity/ui";import{DragDropContext as R,Droppable as T,Draggable as L}from"@hello-pangea/dnd";import{usePaneRouter as C}from"sanity/desk";const $="orderRank";const z=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:$,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?l.parse(e):l.min()).genNext().genNext().toString()}(await r({apiVersion:"2021-09-01"}).fetch("*[_type == $type]|order(@[$order] desc)[0][$order]",{type:n,order:$}))}}))},N={title:"Ordered",name:"ordered",by:[{field:$,direction:"asc"}]},V=f.createContext({});function B(e){let{doc:t,increment:n,entities:r,handleSelect:s,index:l,isFirst:u,isLast:p}=e;const{showIncrements:m}=y(V),f=i();return h(I,{align:"center",children:[g(S,{paddingX:3,style:{flexShrink:0},children:g(_,{size:4,children:g(c,{})})}),m&&h(I,{style:{flexShrink:0},align:"center",gap:1,paddingRight:1,children:[g(D,{padding:2,mode:"ghost",onClick:()=>n(l,l+-1,t._id,r),disabled:u,icon:d}),g(D,{padding:2,mode:"ghost",disabled:p,onClick:()=>n(l,l+1,t._id,r),icon:a})]}),g(D,{style:{width:"100%"},padding:2,mode:"bleed",onClick:e=>s(t._id,l,e.nativeEvent),children:g(I,{flex:1,align:"center",children:g(j,{tone:"default",children:g(o,{layout:"default",value:t,schemaType:f.get(t._type)})})})})]})}function U(e,t){return e[$]&&t[$]?e[$]<t[$]?-1:e[$]>t[$]?1:0:0}const F=e=>{let{entities:t,selectedIds:n,source:r,destination:i}=e;const o=r.index,s=i.index,c=o>s,d=t.filter((e=>n.includes(e._id))),a=["Moved",1===d.length?"1 Document":"".concat(d.length," Documents"),c?"up":"down","from position","".concat(o+1," to ").concat(s+1)].join(" "),{all:u,selected:p}=t.reduce(((e,r,i)=>{var o,a,u,p;if(n.includes(r._id))return{all:e.all,selected:e.selected};if(i===s){const n=i-1,s=(null==(o=t[n])?void 0:o[$])?l.parse(null==(a=t[n])?void 0:a[$]):l.min(),h=l.parse(t[i][$]),g=i+1,m=(null==(u=t[g])?void 0:u[$])?l.parse(null==(p=t[g])?void 0:p[$]):l.max();let f=c?s.between(h):h.between(m);for(let e=0;e<d.length;e+=1)d[e][$]=f.toString(),f=c?f.between(h):f.between(m);return{all:c?[...e.all,...d,r]:[...e.all,r,...d],selected:d}}return{all:[...e.all,r],selected:e.selected}}),{all:[],selected:[]}),h=p.map((e=>[e._id,{set:{[$]:e[$]}}]));return{newOrder:u.sort(U),patches:h,message:a}};function K(){return s({apiVersion:"2021-09-01"})}const G=(e,n)=>t({userSelect:"none",transition:"opacity 500ms ease-in-out",opacity:n?.2:1,pointerEvents:n?"none":void 0},e),H=e=>{const{isDuplicate:t,isGhosting:n,isDragging:r,isSelected:i}=e;return n?"transparent":r||i?"primary":t?"caution":void 0};function M(e){let{data:n,type:r,listIsUpdating:i,setListIsUpdating:o}=e;const s=k(),l=C(),{navigateIntent:c}=l,[d,a]=v(n);b((()=>{i||a(n)}),[n]);const[u,p]=v(""),[m,f]=v([]),y=w((()=>f([])),[f]),x=w(((e,t,n)=>{const i=m.includes(e),o=n.shiftKey,s=-1!==navigator.appVersion.indexOf("Win")?n.ctrlKey:n.metaKey;let l=[];if(!o&&!s)return c("edit",{id:e,type:r}),f([e]);if(o&&!i){const n=m[m.length-1],r=d.findIndex((e=>e._id===n)),i=t<r?t:r,o=t>r?t:r,s=d.filter(((e,t)=>t>i&&t<o)).map((e=>e._id));l=[...m,...s,e]}else l=i?m.filter((t=>t!==e)):[...m,e];return f(l)}),[f,c,d,m,r]),I=K(),_=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=>{y(),p(""),o(!1),s.push({title:"".concat(1===e.results.length?"1 Document":"".concat(e.results.length," Documents")," Reordered"),status:"success",description:t})})).catch((()=>{p(""),o(!1),s.push({title:"Reordering failed",status:"error"})}))}),[I,p,y,o,s]),D=w(((e,t)=>{p("");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==m?void 0:m.length)?m:[i];if(!(null==s?void 0:s.length))return;o(!0),f(s);const{newOrder:l,patches:c,message:d}=F({entities:t,selectedIds:s,source:n,destination:r});(null==l?void 0:l.length)&&a(l),(null==c?void 0:c.length)&&_(c,d)}),[m,p,f,_,o]),P=w((e=>{const t=e.draggableId;m.includes(t)||y(),p(t)}),[m,y,p]),E=w(((e,t,n,r)=>D({draggableId:n,source:{index:e},destination:{index:t}},r)),[D]),z=w((e=>{"Escape"===e.key&&y()}),[y]);b((()=>(window.addEventListener("keydown",z),()=>{window.removeEventListener("keydown",z)})),[z]);const N=O((()=>{if(!d.length)return[];const e=d.map((e=>e[$]));return e.filter(((t,n)=>e.indexOf(t)!==n))}),[d]),V=w((e=>D(e,d)),[d,D]);return g(R,{onDragStart:P,onDragEnd:V,children:g(T,{droppableId:"documentSortZone",children:e=>h("div",t(t({},e.droppableProps),{},{ref:e.innerRef,children:[d.map(((e,n)=>g(L,{draggableId:e._id,index:n,children:(r,o)=>{const s=m.includes(e._id),l=o.isDragging,c=Boolean(!l&&u&&s),a=i&&s,p=Boolean(!e[$]),h=N.includes(e[$]),f=H({isDuplicate:h,isGhosting:c,isDragging:l,isSelected:s});return g("div",t(t(t({ref:r.innerRef},r.draggableProps),r.dragHandleProps),{},{style:p?{opacity:.2,pointerEvents:"none"}:G(r.draggableProps.style,a),children:g(S,{paddingBottom:1,children:g(j,{tone:f,shadow:l?2:void 0,radius:2,children:g(B,{doc:e,entities:d,handleSelect:x,increment:E,index:n,isFirst:0===n,isLast:n===d.length-1})})})}))}},"".concat(e._id,"-").concat(e[$])))),e.placeholder]}))})})}function W(e){let{children:t}=e;return g(S,{padding:3,children:g(j,{padding:4,radius:2,shadow:1,tone:"caution",children:g(_,{children:t})})})}const X={};function Z(e){let{type:t,filter:n,params:r=X}=e;const[i,o]=v(!0),[s,l]=v(!1),[c,d]=v([]),a=K();b((()=>{const e="*[_type == $type ".concat(n?"&& ".concat(n):"","]|order(@[$order] asc){\n      _id, _type, ").concat($,"\n    }"),l=Object.assign(r,{type:t,order:$});let u;const p=async()=>{a.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]}),[]);d(t),i&&o(!1)}))};return s||c.length||(async()=>{o(!0),await p(),u||(u=a.listen(e,l).subscribe((()=>p())))})(),()=>null==u?void 0:u.unsubscribe()}),[t]);const u=O((()=>c.length?c.filter((e=>!e[$])).length:0),[c]);return i?g(I,{style:{width:"100%",height:"100%"},align:"center",justify:"center",children:g(P,{})}):h(E,{space:1,style:{overflow:"auto",height:"100%"},children:[u>0&&h(W,{children:[u,"/",c.length," Documents have no Order. Select"," ",g("strong",{children:"Reset Order"})," from the Menu above to fix."]}),g(S,{padding:1,children:g(M,{data:c,type:t,listIsUpdating:s,setListIsUpdating:l})})]})}function q(e){let{type:t,showIncrements:n,resetOrderTransaction:r,filter:o,params:s}=e;const l=k(),c=i();b((()=>{(null==r?void 0:r.title)&&(null==r?void 0:r.status)&&l.push(r)}),[r,l]);const d=O((()=>{if(!t)return h(m,{children:["No ",g("code",{children:"type"})," was configured"]});const e=c.get(t);return e?"fields"in e&&e.fields.some((e=>(null==e?void 0:e.name)===$))?"fields"in e&&e.fields.some((e=>{var t;return(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:$})," 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:$})," field of type"," ",g("code",{children:"string"})]}):h(m,{children:["Schema ",g("code",{children:t})," not found"]})}),[t,c]);return d?g(W,{children:d}):g(V.Provider,{value:{showIncrements:n},children:g(Z,{type:t,filter:o,params:s})})}class A extends x{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:$},n=await e.fetch("*[_type == $type]|order(@[$order] asc)._id",t);if(!n.length)return null;const r=e.transaction();let i=l.min();for(let e=0;e<n.length;e+=1)i=i.genNext().genNext(),r.patch(n[e],{set:{[$]:i.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,o;const s=null==(t=null==(e=null==this?void 0:this.props)?void 0:e.options)?void 0:t.type;return s?g(q,{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 J(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:c,context:d,S:a}=e,{schema:h,getClient:g}=d,m=g({apiVersion:"2021-09-01"}),f=null!=s?s:"Orderable ".concat(r),y=null!=c?c:"orderable-".concat(r),v=null!=l?l:p,b=null!=(n=null==(t=h.get(r))?void 0:t.title)?n:r;return a.listItem().title(f).id(y).icon(v).child(Object.assign(a.documentTypeList(r).serialize(),{__preserveInstance:!0,key:y,type:"component",component:A,options:{type:r,filter:i,params:o,client:m},menuItems:[a.menuItem().title("Create new ".concat(b)).intent({type:"create",params:{type:r}}).serialize(),a.menuItem().title("Reset Order").icon(u).action("resetOrder").serialize(),a.menuItem().title("Toggle Increments").icon(p).action("showIncrements").serialize()]})).serialize()}export{z as orderRankField,N as orderRankOrdering,J as orderableDocumentListDeskItem};//# sourceMappingURL=index.esm.js.map
+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: 2,
+        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%"
+        },
+        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,
+    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 : 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(GenerateIcon).action("resetOrder").serialize(), S.menuItem().title("Toggle Increments").icon(SortIcon).action("showIncrements").serialize()]
+  })).serialize();
+}
+export { orderRankField, orderRankOrdering, orderableDocumentListDeskItem };
+//# sourceMappingURL=index.esm.js.map