@sanity/orderable-document-list 1.2.1 → 1.2.3

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2024 Sanity.io
+Copyright (c) 2025 Sanity.io
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -17,12 +17,12 @@ A Sanity Studio with [Desk Structure](https://www.sanity.io/docs/structure-build
 
 ```ts
 import {defineConfig} from 'sanity'
-import {deskTool, StructureBuilder} from 'sanity/structure'
+import {structureTool, StructureBuilder} from 'sanity/structure'
 
 export default defineConfig({
   //...
   plugins: [
-    deskTool({
+    structureTool({
       structure: (S, context) => {
         /* Structure code */
       },
@@ -54,13 +54,13 @@ The config parameter requires `type`, `S` and `context`. It also accepts `title`
 
 ```ts
 import {defineConfig} from 'sanity'
-import {deskTool, StructureBuilder} from 'sanity/structure'
+import {structureTool, StructureBuilder} from 'sanity/structure'
 import {orderableDocumentListDeskItem} from '@sanity/orderable-document-list'
 
 export default defineConfig({
   //...
   plugins: [
-    deskTool({
+    structureTool({
       structure: (S, context) => {
         return S.list()
           .title('Content')
@@ -115,13 +115,13 @@ You can configure the placement of new documents by setting `newItemPosition` to
 ```js
 // sanity.config.js
 import {defineConfig} from "sanity";
-import {deskTool, StructureBuilder} from "sanity/structure";
+import {structureTool, StructureBuilder} from "sanity/structure";
 import {orderRankField, orderRankOrdering} from '@sanity/orderable-document-list'
 
 export default defineConfig({
     //...
     plugins: [
-        deskTool({structure: (S, context) => {/* snip */}})
+        structureTool({structure: (S, context) => {/* snip */}})
     ],
     schema: {
         types: (previousTypes) => {

package/lib/index.cjs

@@ -0,0 +1,499 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: !0 });
+var sanity = require("sanity"), lexorank = require("lexorank"), icons = require("@sanity/icons"), jsxRuntime = require("react/jsx-runtime"), react = require("react"), ui = require("@sanity/ui"), sanityPluginUtils = require("sanity-plugin-utils"), dnd = require("@hello-pangea/dnd"), structure = require("sanity/structure");
+const ORDER_FIELD_NAME = "orderRank", API_VERSION = "2021-09-01";
+function initialRank(compareRankValue = "", newItemPosition = "after") {
+  const compareRank = compareRankValue ? lexorank.LexoRank.parse(compareRankValue) : lexorank.LexoRank.min();
+  return (newItemPosition === "before" ? compareRank.genPrev().genPrev() : compareRank.genNext().genNext()).toString();
+}
+const orderRankField = (config) => {
+  if (!config?.type)
+    throw new Error(
+      `
+      type must be provided.
+      Example: orderRankField({type: 'category'})
+      `
+    );
+  const { type, newItemPosition = "after" } = config;
+  return sanity.defineField({
+    title: "Order Rank",
+    readOnly: !0,
+    hidden: !0,
+    ...config,
+    name: ORDER_FIELD_NAME,
+    type: "string",
+    initialValue: async (p, { getClient }) => {
+      const direction = newItemPosition === "before" ? "asc" : "desc", lastDocOrderRank = await getClient({ apiVersion: API_VERSION }).fetch(
+        `*[_type == $type]|order(@[$order] ${direction})[0][$order]`,
+        { type, order: ORDER_FIELD_NAME },
+        { tag: "orderable-document-list.last-doc-order-rank" }
+      );
+      return initialRank(lastDocOrderRank, newItemPosition);
+    }
+  });
+}, orderRankOrdering = {
+  title: "Ordered",
+  name: "ordered",
+  by: [{ field: ORDER_FIELD_NAME, direction: "asc" }]
+}, OrderableContext = react.createContext({});
+function Document({
+  doc,
+  increment,
+  entities,
+  index,
+  isFirst,
+  isLast,
+  dragBadge
+}) {
+  const { showIncrements } = react.useContext(OrderableContext), schema = sanity.useSchema(), router = structure.usePaneRouter(), { ChildLink, groupIndex, routerPanesState } = router, currentDoc = routerPanesState[groupIndex + 1]?.[0]?.id || !1, pressed = currentDoc === doc._id || currentDoc === doc._id.replace("drafts.", ""), selected = pressed && routerPanesState.length === groupIndex + 2, Link = react.useMemo(
+    () => function(linkProps) {
+      return /* @__PURE__ */ jsxRuntime.jsx(ChildLink, { ...linkProps, childId: doc._id });
+    },
+    [ChildLink, doc._id]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    sanity.PreviewCard,
+    {
+      __unstable_focusRing: !0,
+      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) {
+  return !a[ORDER_FIELD_NAME] || !b[ORDER_FIELD_NAME] ? 0 : a[ORDER_FIELD_NAME] < b[ORDER_FIELD_NAME] ? -1 : a[ORDER_FIELD_NAME] > b[ORDER_FIELD_NAME] ? 1 : 0;
+}
+const reorderDocuments = ({
+  entities,
+  selectedIds,
+  source,
+  destination
+}) => {
+  const startIndex = source.index, endIndex = destination.index, isMovingUp = startIndex > endIndex, selectedItems = entities.filter((item) => selectedIds.includes(item._id)), message = [
+    "Moved",
+    selectedItems.length === 1 ? "1 document" : `${selectedItems.length} documents`,
+    isMovingUp ? "up" : "down",
+    "from position",
+    `${startIndex + 1} to ${endIndex + 1}`
+  ].join(" "), { all, selected } = entities.reduce(
+    (acc, cur, curIndex) => {
+      if (selectedIds.includes(cur._id))
+        return { all: acc.all, selected: acc.selected };
+      if (curIndex === endIndex) {
+        const prevIndex = curIndex - 1, prevRank = entities[prevIndex]?.[ORDER_FIELD_NAME] ? lexorank.LexoRank.parse(entities[prevIndex]?.[ORDER_FIELD_NAME]) : lexorank.LexoRank.min(), curRank = lexorank.LexoRank.parse(entities[curIndex][ORDER_FIELD_NAME]), nextIndex = curIndex + 1, nextRank = entities[nextIndex]?.[ORDER_FIELD_NAME] ? lexorank.LexoRank.parse(entities[nextIndex]?.[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: [] }
+  ), patches = selected.flatMap((doc) => {
+    const docPatches = [
+      [
+        doc._id,
+        {
+          set: {
+            [ORDER_FIELD_NAME]: doc[ORDER_FIELD_NAME]
+          }
+        }
+      ]
+    ];
+    return doc._id.startsWith("drafts.") && doc.hasPublished && docPatches.push([
+      doc._id.replace("drafts.", ""),
+      {
+        set: {
+          [ORDER_FIELD_NAME]: doc[ORDER_FIELD_NAME]
+        }
+      }
+    ]), docPatches;
+  });
+  return { newOrder: all.sort(lexicographicalSort), patches, message };
+};
+function useSanityClient() {
+  return sanity.useClient({ apiVersion: API_VERSION });
+}
+const getItemStyle = (draggableStyle, itemIsUpdating) => ({
+  userSelect: "none",
+  transition: "opacity 500ms ease-in-out",
+  opacity: itemIsUpdating ? 0.2 : 1,
+  pointerEvents: itemIsUpdating ? "none" : void 0,
+  ...draggableStyle
+}), cardTone = (settings) => {
+  const { isDuplicate, isGhosting, isDragging, isSelected } = settings;
+  if (isGhosting) return "transparent";
+  if (isDragging || isSelected) return "primary";
+  if (isDuplicate) return "caution";
+};
+function DraggableList({ data, listIsUpdating, setListIsUpdating }) {
+  const toast = ui.useToast(), router = structure.usePaneRouter(), { groupIndex, routerPanesState } = router, currentDoc = routerPanesState[groupIndex + 1]?.[0]?.id || !1, [orderedData, setOrderedData] = react.useState(data);
+  react.useEffect(() => {
+    listIsUpdating || setOrderedData(data);
+  }, [data]);
+  const [draggingId, setDraggingId] = react.useState(""), [selectedIds, setSelectedIds] = react.useState(currentDoc ? [currentDoc] : []), clearSelected = react.useCallback(() => setSelectedIds([]), [setSelectedIds]), handleSelect = react.useCallback(
+    (clickedId, index, nativeEvent) => {
+      const isSelected = selectedIds.includes(clickedId), selectMultiple = nativeEvent.shiftKey, selectAdditional = navigator.appVersion.indexOf("Win") !== -1 ? nativeEvent.ctrlKey : nativeEvent.metaKey;
+      let updatedIds = [];
+      if (!selectMultiple && !selectAdditional)
+        return setSelectedIds([clickedId]);
+      if (selectMultiple && nativeEvent.preventDefault(), selectMultiple && !isSelected) {
+        const lastSelectedId = selectedIds[selectedIds.length - 1], lastSelectedIndex = orderedData.findIndex((item) => item._id === lastSelectedId), firstSelected = index < lastSelectedIndex ? index : lastSelectedIndex, lastSelected = index > lastSelectedIndex ? index : lastSelectedIndex, betweenIds = orderedData.filter((item, itemIndex) => itemIndex > firstSelected && itemIndex < lastSelected).map((item) => item._id);
+        updatedIds = [...selectedIds, ...betweenIds, clickedId];
+      } else isSelected ? updatedIds = selectedIds.filter((id) => id !== clickedId) : updatedIds = [...selectedIds, clickedId];
+      return setSelectedIds(updatedIds);
+    },
+    [setSelectedIds, orderedData, selectedIds]
+  ), client = useSanityClient(), transactPatches = react.useCallback(
+    async (patches, message) => {
+      const transaction = client.transaction();
+      patches.forEach(([docId, ops]) => transaction.patch(docId, ops));
+      try {
+        const updated = await transaction.commit({
+          visibility: "async",
+          tag: "orderable-document-list.reorder"
+        });
+        clearSelected(), setDraggingId(""), setListIsUpdating(!1), toast.push({
+          title: `${updated.results.length === 1 ? "1 document" : `${updated.results.length} documents`} reordered`,
+          status: "success",
+          description: message
+        });
+      } catch {
+        setDraggingId(""), setListIsUpdating(!1), toast.push({
+          title: "Reordering failed",
+          status: "error"
+        });
+      }
+    },
+    [client, setDraggingId, clearSelected, setListIsUpdating, toast]
+  ), handleDragEnd = react.useCallback(
+    (result, entities) => {
+      setDraggingId("");
+      const { source, destination, draggableId } = result ?? {};
+      if (source?.index === destination?.index || !entities?.length || !draggableId) return;
+      const effectedIds = selectedIds?.length ? selectedIds : [draggableId];
+      if (!effectedIds?.length) return;
+      setListIsUpdating(!0), setSelectedIds(effectedIds);
+      const { newOrder, patches, message } = reorderDocuments({
+        entities,
+        selectedIds: effectedIds,
+        source,
+        destination
+      });
+      newOrder?.length && setOrderedData(newOrder), patches?.length && transactPatches(patches, message);
+    },
+    [selectedIds, setDraggingId, setSelectedIds, transactPatches, setListIsUpdating]
+  ), handleDragStart = react.useCallback(
+    (start) => {
+      const id = start.draggableId;
+      selectedIds.includes(id) || clearSelected(), setDraggingId(id);
+    },
+    [selectedIds, clearSelected, setDraggingId]
+  ), incrementIndex = react.useCallback(
+    (shiftFrom, shiftTo, id, entities) => handleDragEnd({
+      draggableId: id,
+      source: { index: shiftFrom },
+      destination: { index: shiftTo }
+    }, entities),
+    [handleDragEnd]
+  ), onWindowKeyDown = react.useCallback(
+    (event) => {
+      event.key === "Escape" && clearSelected();
+    },
+    [clearSelected]
+  );
+  react.useEffect(() => (window.addEventListener("keydown", onWindowKeyDown), () => {
+    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]), 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), isDragging = innerSnapshot.isDragging, isGhosting = !!(!isDragging && draggingId && isSelected), isUpdating = listIsUpdating && isSelected, isDisabled = !item[ORDER_FIELD_NAME], isDuplicate = duplicateOrders.includes(item[ORDER_FIELD_NAME]), tone = cardTone({ isDuplicate, isGhosting, isDragging, isSelected }), selectedCount = selectedIds.length, dragBadge = isDragging && selectedCount > 1 ? selectedCount : !1;
+          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
+                    }
+                  )
+                }
+              ) })
+            }
+          );
+        }
+      },
+      `${item._id}-${item[ORDER_FIELD_NAME]}`
+    )),
+    provided.placeholder
+  ] }) }) });
+}
+const DEFAULT_PARAMS = {};
+function DocumentListQuery({ type, filter, params = DEFAULT_PARAMS }) {
+  const [listIsUpdating, setListIsUpdating] = react.useState(!1), [data, setData] = react.useState([]), query = `*[_type == $type ${filter ? `&& ${filter}` : ""}]|order(@[$order] asc){
+    _id, _type, ${ORDER_FIELD_NAME}
+  }`, queryParams = {
+    ...params,
+    type,
+    order: ORDER_FIELD_NAME
+  }, {
+    data: _queryData,
+    loading,
+    error
+  } = sanityPluginUtils.useListeningQuery(query, {
+    params: queryParams,
+    initialValue: []
+  }), queryData = _queryData;
+  react.useEffect(() => {
+    if (queryData) {
+      const filteredDocuments = queryData.reduce((acc, cur) => cur._id.startsWith("drafts.") ? (cur.hasPublished = queryData.some((doc) => doc._id === cur._id.replace("drafts.", "")), [...acc, cur]) : queryData.some((doc) => doc._id === `drafts.${cur._id}`) ? acc : [...acc, cur], []);
+      setData(filteredDocuments);
+    } else
+      setData([]);
+  }, [queryData]);
+  const unorderedDataCount = react.useMemo(
+    () => data?.length ? data.filter((doc) => !doc[ORDER_FIELD_NAME]).length : 0,
+    [data]
+  );
+  return loading ? /* @__PURE__ */ jsxRuntime.jsx(ui.Flex, { style: { width: "100%", height: "100%" }, align: "center", justify: "center", children: /* @__PURE__ */ jsxRuntime.jsx(ui.Spinner, {}) }) : error ? /* @__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" }) }) : !data || data?.length == 0 ? /* @__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: !0, children: "No documents of this type" }) }) }) }) : /* @__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?.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({
+  type,
+  showIncrements,
+  resetOrderTransaction,
+  filter,
+  params
+}) {
+  const toast = ui.useToast(), schema = sanity.useSchema();
+  react.useEffect(() => {
+    resetOrderTransaction?.title && 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);
+    return typeSchema ? !("fields" in typeSchema) || !typeSchema.fields.some((field) => field?.name === ORDER_FIELD_NAME) ? /* @__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" })
+    ] }) : "fields" in typeSchema && typeSchema.fields.some(
+      (field) => field?.name === ORDER_FIELD_NAME && field?.type?.name !== "string"
+    ) ? /* @__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"
+    ] }) : "" : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+      "Schema ",
+      /* @__PURE__ */ jsxRuntime.jsx("code", { children: type }),
+      " not found"
+    ] });
+  }, [type, schema]);
+  return schemaIsInvalid ? /* @__PURE__ */ jsxRuntime.jsx(ui.Box, { padding: 2, children: /* @__PURE__ */ jsxRuntime.jsx(sanityPluginUtils.Feedback, { description: schemaIsInvalid, tone: "caution" }) }) : /* @__PURE__ */ jsxRuntime.jsx(OrderableContext.Provider, { value: { showIncrements }, children: /* @__PURE__ */ jsxRuntime.jsx(DocumentListQuery, { type, filter, params }) });
+}
+async function resetOrder(type, client) {
+  const query = "*[_type == $type]|order(@[$order] asc)._id", queryParams = { type, order: ORDER_FIELD_NAME }, documentIds = await client.fetch(query, queryParams, {
+    tag: "orderable-document-list.reset-order"
+  });
+  if (documentIds.length === 0)
+    return null;
+  let aLexoRank = lexorank.LexoRank.min();
+  return documentIds.reduce((trx, documentId) => (aLexoRank = aLexoRank.genNext().genNext(), trx.patch(documentId, {
+    set: { [ORDER_FIELD_NAME]: aLexoRank.toString() }
+  })), client.transaction()).commit({
+    visibility: "async",
+    tag: "orderable-document-list.reset-order"
+  });
+}
+class OrderableDocumentList extends react.Component {
+  constructor(props) {
+    super(props), this.state = {
+      showIncrements: !1,
+      resetOrderTransaction: {}
+    };
+  }
+  actionHandlers = {
+    showIncrements: () => {
+      this.setState((state) => ({
+        showIncrements: !state.showIncrements
+      }));
+    },
+    resetOrder: async () => {
+      this.setState(() => ({
+        resetOrderTransaction: {
+          status: "info",
+          title: "Reordering started...",
+          closable: !0
+        }
+      }));
+      const update = await resetOrder(this.props.options.type, this.props.options.client), reorderWasSuccessful = update?.results?.length;
+      this.setState(() => ({
+        resetOrderTransaction: {
+          status: reorderWasSuccessful ? "success" : "info",
+          title: reorderWasSuccessful ? `Reordered ${update.results.length === 1 ? "Document" : "Documents"}` : "Reordering failed",
+          closable: !0
+        }
+      }));
+    }
+  };
+  render() {
+    const type = this?.props?.options?.type;
+    return type ? /* @__PURE__ */ jsxRuntime.jsx(
+      DocumentListWrapper,
+      {
+        filter: this?.props?.options?.filter,
+        params: this?.props?.options?.params,
+        type,
+        showIncrements: this.state.showIncrements,
+        resetOrderTransaction: this.state.resetOrderTransaction
+      }
+    ) : null;
+  }
+}
+function orderableDocumentListDeskItem(config) {
+  if (!config?.type || !config.context || !config.S)
+    throw new Error(`
+    type, context and S (StructureBuilder) must be provided.
+    context and S are available when configuring structure.
+    Example: orderableDocumentListDeskItem({type: 'category'})
+    `);
+  const { type, filter, menuItems = [], createIntent, params, title, icon, id, context, S } = config, { schema, getClient } = context, client = getClient({ apiVersion: API_VERSION }), listTitle = title ?? `Orderable ${type}`, listId = id ?? `orderable-${type}`, listIcon = icon ?? icons.SortIcon, typeTitle = schema.get(type)?.title ?? type;
+  return createIntent !== !1 && menuItems.push(
+    S.menuItem().title(`Create new ${typeTitle}`).intent({ type: "create", params: { type } }).serialize()
+  ), S.listItem().title(listTitle).id(listId).icon(listIcon).schemaType(type).child(
+    Object.assign(
+      S.documentTypeList(type).canHandleIntent(() => !!createIntent).serialize(),
+      {
+        // Prevents the component from re-rendering when switching documents
+        __preserveInstance: !0,
+        // 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.cjs.map