payload-nested-docs-page-tree 1.2.4 → 1.4.1

package/dist/components/PageTreeListView.client.js

@@ -1,27 +1,142 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { DndContext, DragOverlay, PointerSensor, useDroppable, useSensor, useSensors } from '@dnd-kit/core';
-import { DefaultListView, ListQueryProvider, SelectAll, SelectRow, toast, useConfig, useLocale, useTranslation } from '@payloadcms/ui';
+import { arrayMove, SortableContext, useSortable } from '@dnd-kit/sortable';
+import { DefaultListView, ListQueryProvider, Pill, SelectAll, SelectRow, SortHeader, toast, useConfig, useLocale, usePreferences, useTranslation } from '@payloadcms/ui';
 import { useRouter, useSearchParams } from 'next/navigation';
 import React from 'react';
-import { pageTreeMoveRequestHeader, pageTreeMoveRequestHeaderValue } from '../types.js';
 import { buildInsertDropTargets, getDropTargetParentDoc } from '../utilities/dropTargets.js';
 import { CANCEL_DRAG_MESSAGE, getDropValidation } from '../utilities/moveValidation.js';
 import { buildDocSlugPath, buildPageTreeDocs, buildProspectiveDocSlugPath, getDocDisplayLabel, getVisibleTreeDocs } from '../utilities/pageTree.js';
 import { pageTreeCollisionDetectionStrategy } from '../utilities/pageTreeCollision.js';
 import { getPageTreeBadgeColor, getPageTreeBadgeLabel, getPageTreeDisplayStatus } from '../utilities/status.js';
-import { PageTreeProvider } from './PageTreeContext.js';
+import { PageTreeProvider, PageTreeRowDndProvider } from './PageTreeContext.js';
 import styles from './PageTreeListView.module.css';
 import { PageTreeTitleCell } from './PageTreeTitleCell.js';
-const MANUAL_ORDER_COLUMN_ACCESSOR = '_dragHandle';
 const SILENT_MOVE_MESSAGES = new Set([
     CANCEL_DRAG_MESSAGE
 ]);
+const ALREADY_ROOT_MESSAGE = 'This page is already in root level.';
+function getParentMovePreferenceKey(collectionSlug) {
+    return `payload-nested-docs-page-tree:${collectionSlug}:parentMoveHandle`;
+}
 function getRowDropID(rowID) {
     return `page-drop:${rowID}`;
 }
+function getSortableRowID(rowID) {
+    return `page-sort:${rowID}`;
+}
+function getDiagnosticString(value) {
+    return typeof value === 'string' && value.length > 0 ? value : null;
+}
 function getPageTreeDragData(value) {
-    return value && typeof value === 'object' ? value : {};
+    if (!value || typeof value !== 'object') {
+        return {};
+    }
+    const data = value;
+    const dragType = data.dragType === 'move' || data.dragType === 'order' ? data.dragType : undefined;
+    const parentID = data.parentID === null || typeof data.parentID === 'string' ? data.parentID : undefined;
+    const rowID = typeof data.rowID === 'string' ? data.rowID : undefined;
+    return {
+        dragType,
+        parentID,
+        rowID
+    };
+}
+function getSortableTransform(transform) {
+    if (!transform) {
+        return undefined;
+    }
+    const scaleX = transform.scaleX ?? 1;
+    const scaleY = transform.scaleY ?? 1;
+    return `translate3d(${transform.x}px, ${transform.y}px, 0) scaleX(${scaleX}) scaleY(${scaleY})`;
+}
+function getVisibleSubtreeIndexRange(docs, rootIndex) {
+    const rootDoc = docs[rootIndex];
+    if (!rootDoc) {
+        return null;
+    }
+    let end = rootIndex;
+    for(let index = rootIndex + 1; index < docs.length; index += 1){
+        if (!docs[index]?.__pageTreeAncestorIDs.includes(rootDoc.__pageTreeID)) {
+            break;
+        }
+        end = index;
+    }
+    return {
+        end,
+        start: rootIndex
+    };
+}
+function getRangeRect(args) {
+    const { activeNodeRect, activeRange, range, rects } = args;
+    const firstRect = rects[range.start] ?? (range.start === activeRange.start ? activeNodeRect : undefined);
+    const lastRect = rects[range.end] ?? (range.end === activeRange.end ? activeNodeRect : undefined);
+    if (!firstRect || !lastRect) {
+        return null;
+    }
+    return {
+        bottom: lastRect.top + lastRect.height,
+        height: lastRect.top + lastRect.height - firstRect.top,
+        top: firstRect.top
+    };
+}
+function isIndexInRange(index, range) {
+    return index >= range.start && index <= range.end;
+}
+function buildPageTreeSortingStrategy(docs) {
+    return ({ activeIndex, activeNodeRect, index, overIndex, rects })=>{
+        const activeRange = getVisibleSubtreeIndexRange(docs, activeIndex);
+        const overRange = getVisibleSubtreeIndexRange(docs, overIndex);
+        if (!activeRange || !overRange || activeRange.start === overRange.start) {
+            return null;
+        }
+        const activeRect = getRangeRect({
+            activeNodeRect,
+            activeRange,
+            range: activeRange,
+            rects
+        });
+        const overRect = getRangeRect({
+            activeNodeRect,
+            activeRange,
+            range: overRange,
+            rects
+        });
+        if (!activeRect || !overRect) {
+            return null;
+        }
+        if (isIndexInRange(index, activeRange)) {
+            return {
+                scaleX: 1,
+                scaleY: 1,
+                x: 0,
+                y: activeRange.start < overRange.start ? overRect.bottom - activeRect.bottom : overRect.top - activeRect.top
+            };
+        }
+        if (activeRange.start < overRange.start && index > activeRange.end && index <= overRange.end) {
+            return {
+                scaleX: 1,
+                scaleY: 1,
+                x: 0,
+                y: -activeRect.height
+            };
+        }
+        if (activeRange.start > overRange.start && index >= overRange.start && index < activeRange.start) {
+            return {
+                scaleX: 1,
+                scaleY: 1,
+                x: 0,
+                y: activeRect.height
+            };
+        }
+        return {
+            scaleX: 1,
+            scaleY: 1,
+            x: 0,
+            y: 0
+        };
+    };
 }
 function buildPaginatedData(docs, limit, requestedPage) {
     const totalDocs = docs.length;
@@ -56,8 +171,12 @@ function normalizePositiveInt(value, fallback) {
     const parsedValue = Number.parseInt(value, 10);
     return Number.isNaN(parsedValue) || parsedValue <= 0 ? fallback : parsedValue;
 }
-function normalizePageTreeColumnState(columnState, useAsTitle) {
-    return columnState.filter((column)=>column.accessor !== MANUAL_ORDER_COLUMN_ACCESSOR).map((column)=>column.accessor === useAsTitle ? {
+function isOrderableSortActive(args) {
+    const { orderableFieldName, sort } = args;
+    return Boolean(orderableFieldName && (sort === orderableFieldName || sort === `-${orderableFieldName}`));
+}
+function ensureUseAsTitleColumn(columnState, useAsTitle) {
+    return columnState.map((column)=>column.accessor === useAsTitle ? {
             ...column,
             active: true
         } : column);
@@ -82,6 +201,191 @@ function getSelectableRowData(doc) {
 function shouldSilenceMoveMessage(message) {
     return typeof message === 'string' && SILENT_MOVE_MESSAGES.has(message);
 }
+function getVisibleSubtreeRowIDs(docs, rowID) {
+    const rootIndex = docs.findIndex((doc)=>doc.__pageTreeID === rowID);
+    if (rootIndex < 0) {
+        return [];
+    }
+    const rowIDs = [
+        rowID
+    ];
+    for (const doc of docs.slice(rootIndex + 1)){
+        if (!doc.__pageTreeAncestorIDs.includes(rowID)) {
+            break;
+        }
+        rowIDs.push(doc.__pageTreeID);
+    }
+    return rowIDs;
+}
+function buildOptimisticOrderRowIDs(args) {
+    const { activeRowID, docs, targetRowID } = args;
+    if (activeRowID === targetRowID) {
+        return null;
+    }
+    const activeDoc = docs.find((doc)=>doc.__pageTreeID === activeRowID);
+    const targetDoc = docs.find((doc)=>doc.__pageTreeID === targetRowID);
+    if (!activeDoc || !targetDoc || activeDoc.__pageTreeParentID !== targetDoc.__pageTreeParentID) {
+        return null;
+    }
+    const activeBlockIDs = getVisibleSubtreeRowIDs(docs, activeRowID);
+    const targetBlockIDs = getVisibleSubtreeRowIDs(docs, targetRowID);
+    if (activeBlockIDs.length === 0 || targetBlockIDs.length === 0 || targetBlockIDs.includes(activeRowID)) {
+        return null;
+    }
+    const currentRowIDs = docs.map((doc)=>doc.__pageTreeID);
+    if (activeBlockIDs.length === 1 && targetBlockIDs.length === 1) {
+        const activeIndex = currentRowIDs.indexOf(activeRowID);
+        const targetIndex = currentRowIDs.indexOf(targetRowID);
+        return activeIndex < 0 || targetIndex < 0 ? null : arrayMove(currentRowIDs, activeIndex, targetIndex);
+    }
+    const remainingRowIDs = currentRowIDs.filter((rowID)=>!activeBlockIDs.includes(rowID));
+    const activeIndex = currentRowIDs.indexOf(activeRowID);
+    const targetIndex = currentRowIDs.indexOf(targetRowID);
+    const targetAnchorID = activeIndex < targetIndex ? targetBlockIDs[targetBlockIDs.length - 1] : targetBlockIDs[0];
+    if (!targetAnchorID) {
+        return null;
+    }
+    const targetAnchorIndex = remainingRowIDs.indexOf(targetAnchorID);
+    if (targetAnchorIndex < 0) {
+        return null;
+    }
+    const insertIndex = activeIndex < targetIndex ? targetAnchorIndex + 1 : targetAnchorIndex;
+    return [
+        ...remainingRowIDs.slice(0, insertIndex),
+        ...activeBlockIDs,
+        ...remainingRowIDs.slice(insertIndex)
+    ];
+}
+function buildReorderRequestBody(args) {
+    const { activeRowID, docs, orderableFieldName, sort, targetRowID } = args;
+    if (!orderableFieldName || sort !== orderableFieldName && sort !== `-${orderableFieldName}`) {
+        return null;
+    }
+    if (activeRowID === targetRowID) {
+        return null;
+    }
+    const activeDoc = docs.find((doc)=>doc.__pageTreeID === activeRowID);
+    const targetDoc = docs.find((doc)=>doc.__pageTreeID === targetRowID);
+    if (!activeDoc || !targetDoc || activeDoc.__pageTreeParentID !== targetDoc.__pageTreeParentID) {
+        return null;
+    }
+    const siblingDocs = docs.filter((doc)=>doc.__pageTreeParentID === activeDoc.__pageTreeParentID);
+    const moveFromIndex = siblingDocs.findIndex((doc)=>doc.__pageTreeID === activeRowID);
+    const moveToIndex = siblingDocs.findIndex((doc)=>doc.__pageTreeID === targetRowID);
+    if (moveFromIndex < 0 || moveToIndex < 0 || moveFromIndex === moveToIndex) {
+        return null;
+    }
+    const newBeforeRow = moveToIndex > moveFromIndex ? siblingDocs[moveToIndex] : siblingDocs[moveToIndex - 1];
+    const newAfterRow = moveToIndex > moveFromIndex ? siblingDocs[moveToIndex + 1] : siblingDocs[moveToIndex];
+    const target = newBeforeRow ?? newAfterRow;
+    if (!target) {
+        return null;
+    }
+    const getFrontendOrderEntry = (doc, index)=>{
+        const orderKey = doc[orderableFieldName];
+        return {
+            slug: getDiagnosticString(doc.slug),
+            index,
+            orderKey: typeof orderKey === 'string' && orderKey.length > 0 ? orderKey : null
+        };
+    };
+    const siblingDocsAfter = [
+        ...siblingDocs
+    ];
+    const [movedSiblingDoc] = siblingDocsAfter.splice(moveFromIndex, 1);
+    if (!movedSiblingDoc) {
+        return null;
+    }
+    siblingDocsAfter.splice(moveToIndex, 0, movedSiblingDoc);
+    const targetKey = target[orderableFieldName];
+    const newKeyWillBe = newBeforeRow && sort === orderableFieldName || !newBeforeRow && sort === `-${orderableFieldName}` ? 'greater' : 'less';
+    return {
+        docsToMove: [
+            activeRowID
+        ],
+        frontendOrder: {
+            activeSlug: getDiagnosticString(activeDoc.slug),
+            after: siblingDocsAfter.map(getFrontendOrderEntry),
+            before: siblingDocs.map(getFrontendOrderEntry),
+            moveFromIndex,
+            moveToIndex,
+            newAfterRowSlug: newAfterRow ? getDiagnosticString(newAfterRow.slug) : null,
+            newBeforeRowSlug: newBeforeRow ? getDiagnosticString(newBeforeRow.slug) : null,
+            sort: sort ?? null,
+            targetSlug: getDiagnosticString(targetDoc.slug)
+        },
+        newKeyWillBe,
+        orderableFieldName,
+        target: {
+            id: target.__pageTreeID,
+            key: typeof targetKey === 'string' && targetKey.length > 0 ? targetKey : null
+        }
+    };
+}
+function orderDocsByRowIDs(docs, orderRowIDs) {
+    if (!orderRowIDs) {
+        return docs;
+    }
+    const docsByID = new Map(docs.map((doc)=>[
+            doc.__pageTreeID,
+            doc
+        ]));
+    const orderedDocs = orderRowIDs.flatMap((rowID)=>{
+        const doc = docsByID.get(rowID);
+        return doc ? [
+            doc
+        ] : [];
+    });
+    return orderedDocs.length === docs.length ? orderedDocs : docs;
+}
+function getDropTargetValidation(args) {
+    const { activeDoc, docsByID, dropTarget } = args;
+    if (dropTarget.dropType === 'row') {
+        return getDropValidation({
+            activeDoc,
+            targetDoc: docsByID.get(dropTarget.rowID) ?? undefined
+        });
+    }
+    if (dropTarget.parentID === null) {
+        if (activeDoc.__pageTreeParentID === null) {
+            return {
+                isValid: false,
+                message: ALREADY_ROOT_MESSAGE,
+                parentID: null
+            };
+        }
+        return {
+            isValid: true,
+            parentID: null
+        };
+    }
+    const targetDoc = docsByID.get(dropTarget.parentID);
+    if (!targetDoc) {
+        return {
+            isValid: false,
+            message: 'Could not resolve drop target.',
+            parentID: dropTarget.parentID
+        };
+    }
+    if (targetDoc.__pageTreeID === activeDoc.__pageTreeID) {
+        return {
+            isValid: false,
+            message: CANCEL_DRAG_MESSAGE,
+            parentID: targetDoc.__pageTreeID
+        };
+    }
+    if (targetDoc.__pageTreeAncestorIDs.includes(activeDoc.__pageTreeID)) {
+        return {
+            isValid: false,
+            message: 'A document cannot be moved under one of its descendants.',
+            parentID: targetDoc.__pageTreeID
+        };
+    }
+    return {
+        isValid: true,
+        parentID: targetDoc.__pageTreeID
+    };
+}
 function getStatusClassName(status) {
     if (status === 'changed' || status === 'draft' || status === 'published') {
         return status;
@@ -113,8 +417,20 @@ function renderStatusBadge(args) {
         })
     }, doc.__pageTreeID ?? index);
 }
+function ParentMoveToggle({ collectionSlug, enabled, onToggle }) {
+    return /*#__PURE__*/ _jsx(Pill, {
+        "aria-checked": enabled,
+        "aria-label": `${enabled ? 'Hide' : 'Show'} edit hierarchy handles`,
+        className: "pages-hierarchy-parent-move-toggle",
+        id: `pages-hierarchy-parent-move-toggle-${collectionSlug}`,
+        onClick: onToggle,
+        pillStyle: enabled ? 'dark' : 'light',
+        size: "small",
+        children: "Edit Hierarchy"
+    });
+}
 function buildTableColumns(args) {
-    const { badgeConfig, columnState, docs, enableRowSelections, homeIndicatorEnabled, parentFieldSlug, t, useAsTitle } = args;
+    const { badgeConfig, columnState, docs, enableRowSelections, homeIndicatorEnabled, orderableFieldName, parentFieldSlug, t, useAsTitle } = args;
     const columnsToUse = columnState.map((column)=>{
         if (column.accessor === useAsTitle) {
             return {
@@ -162,18 +478,35 @@ function buildTableColumns(args) {
                 }, doc.__pageTreeID ?? index))
         });
     }
+    if (orderableFieldName) {
+        const orderableColumn = {
+            accessor: '_pageTreeOrderSort',
+            active: true,
+            field: {
+                hidden: true
+            },
+            Heading: /*#__PURE__*/ _jsx(SortHeader, {}),
+            renderedCells: docs.map((doc, index)=>/*#__PURE__*/ _jsx("span", {
+                    "aria-hidden": "true",
+                    className: "pages-hierarchy-order-sort-spacer"
+                }, doc.__pageTreeID ?? index))
+        };
+        const selectColumnIndex = columnsToUse.findIndex((column)=>column.accessor === '_select');
+        columnsToUse.splice(selectColumnIndex >= 0 ? selectColumnIndex + 1 : 0, 0, orderableColumn);
+    }
     return columnsToUse;
 }
-function HierarchyInsertRow({ activeColumnsCount, activeDragRowID, dropTarget, dropValidation, isMovePending }) {
+function HierarchyInsertRow({ activeColumnsCount, activeDragRowID, activeDropTargetID, dropTarget, dropValidation, isMovePending }) {
     const { isOver, setNodeRef } = useDroppable({
         id: dropTarget.dropID,
         data: dropTarget,
         disabled: isMovePending
     });
     const hasActiveDrag = Boolean(activeDragRowID);
+    const showInsertLine = isOver && activeDropTargetID === dropTarget.dropID;
     return /*#__PURE__*/ _jsx("tr", {
         className: "pages-hierarchy-insert-row",
-        "data-drag-over": isOver ? 'true' : 'false',
+        "data-drag-over": showInsertLine ? 'true' : 'false',
         "data-drop-valid": hasActiveDrag ? dropValidation?.isValid ? 'true' : 'false' : undefined,
         "data-page-tree-insert": "true",
         children: /*#__PURE__*/ _jsx("td", {
@@ -186,7 +519,7 @@ function HierarchyInsertRow({ activeColumnsCount, activeDragRowID, dropTarget, d
         })
     });
 }
-function HierarchyTableRow({ activeColumns, activeDragRowID, doc, dropValidation, insertAfterDropID, insertBeforeDropID, isMovePending, rowIndex, titleCellAccessor }) {
+function HierarchyTableRow({ activeColumns, activeDragRowID, activeDragType, canReorderRows, doc, dropValidation, insertAfterDropID, insertBeforeDropID, isMovePending, rowIndex, titleCellAccessor }) {
     const { isOver, setNodeRef } = useDroppable({
         id: getRowDropID(doc.__pageTreeID),
         data: {
@@ -197,51 +530,110 @@ function HierarchyTableRow({ activeColumns, activeDragRowID, doc, dropValidation
         },
         disabled: isMovePending
     });
-    const hasActiveDrag = Boolean(activeDragRowID);
+    const sortable = useSortable({
+        id: getSortableRowID(doc.__pageTreeID),
+        data: {
+            dragType: 'order',
+            parentID: doc.__pageTreeParentID,
+            rowID: doc.__pageTreeID
+        },
+        disabled: !canReorderRows || isMovePending || activeDragType === 'move'
+    });
+    const hasActiveMoveDrag = activeDragType === 'move' && Boolean(activeDragRowID);
     const isActiveDragRow = activeDragRowID === doc.__pageTreeID;
+    const setRowRef = React.useCallback((element)=>{
+        setNodeRef(element);
+        sortable.setNodeRef(element);
+    }, [
+        setNodeRef,
+        sortable
+    ]);
+    const rowDndValue = React.useMemo(()=>({
+            isOrderDragging: sortable.isDragging,
+            orderHandleAttributes: sortable.attributes,
+            orderHandleListeners: sortable.listeners,
+            orderHandleRef: sortable.setActivatorNodeRef
+        }), [
+        sortable.attributes,
+        sortable.isDragging,
+        sortable.listeners,
+        sortable.setActivatorNodeRef
+    ]);
+    const sortableStyle = React.useMemo(()=>({
+            position: sortable.isDragging ? 'relative' : undefined,
+            transform: getSortableTransform(sortable.transform),
+            transition: activeDragType === 'order' ? sortable.transition : undefined,
+            zIndex: sortable.isDragging ? 1 : undefined
+        }), [
+        activeDragType,
+        sortable.isDragging,
+        sortable.transform,
+        sortable.transition
+    ]);
     return /*#__PURE__*/ _jsx("tr", {
         className: `row-${rowIndex + 1}`,
-        "data-drag-over": isOver ? 'true' : 'false',
-        "data-drop-valid": hasActiveDrag ? dropValidation?.isValid ? 'true' : 'false' : undefined,
+        "data-drag-over": activeDragType === 'move' && isOver ? 'true' : 'false',
+        "data-drop-valid": hasActiveMoveDrag ? dropValidation?.isValid ? 'true' : 'false' : undefined,
         "data-id": doc.id,
-        "data-is-drag-source": isActiveDragRow ? 'true' : 'false',
+        "data-is-drag-source": activeDragType === 'move' && isActiveDragRow ? 'true' : 'false',
+        "data-is-order-drag-source": sortable.isDragging ? 'true' : 'false',
         "data-page-tree-row": "true",
-        ref: setNodeRef,
-        children: activeColumns.map((column, columnIndex)=>{
-            const { accessor } = column;
-            return /*#__PURE__*/ _jsx("td", {
-                className: `cell-${accessor.replace(/\./g, '__')}`,
-                "data-page-tree-manual-order-cell": accessor === MANUAL_ORDER_COLUMN_ACCESSOR ? 'true' : undefined,
-                "data-page-tree-title-cell": accessor === titleCellAccessor ? 'true' : undefined,
-                children: column.renderedCells?.[rowIndex] ?? null
-            }, columnIndex);
+        ref: setRowRef,
+        style: sortableStyle,
+        children: /*#__PURE__*/ _jsx(PageTreeRowDndProvider, {
+            value: rowDndValue,
+            children: activeColumns.map((column, columnIndex)=>{
+                const { accessor } = column;
+                return /*#__PURE__*/ _jsx("td", {
+                    className: `cell-${accessor.replace(/\./g, '__')}`,
+                    "data-page-tree-title-cell": accessor === titleCellAccessor ? 'true' : undefined,
+                    children: column.renderedCells?.[rowIndex] ?? null
+                }, columnIndex);
+            })
         })
     });
 }
-function HierarchyTable({ activeDragRowID, allDocsByID, columns, data, isMovePending, titleCellAccessor }) {
+function HierarchyTable({ activeDragRowID, activeDragType, activeDropTarget, allDocsByID, canReorderRows, columns, data, isMovePending, titleCellAccessor }) {
     const activeColumns = React.useMemo(()=>columns.filter((column)=>column?.active), [
         columns
     ]);
-    const hasManualOrderColumn = React.useMemo(()=>activeColumns.some((column)=>column.accessor === MANUAL_ORDER_COLUMN_ACCESSOR), [
-        activeColumns
+    const sortableItems = React.useMemo(()=>data.map((doc)=>getSortableRowID(doc.__pageTreeID)), [
+        data
+    ]);
+    const sortingStrategy = React.useMemo(()=>buildPageTreeSortingStrategy(data), [
+        data
     ]);
     const insertDropTargets = React.useMemo(()=>buildInsertDropTargets(data), [
         data
     ]);
-    const activeDoc = activeDragRowID ? allDocsByID.get(activeDragRowID) ?? null : null;
+    const insertDropTargetsByReferenceRowID = React.useMemo(()=>new Map(insertDropTargets.map((dropTarget)=>[
+                dropTarget.referenceRowID,
+                dropTarget
+            ])), [
+        insertDropTargets
+    ]);
+    const activeDropTargetID = activeDropTarget?.dropType === 'insert' ? activeDropTarget.dropID : null;
+    const activeDoc = activeDragType === 'move' && activeDragRowID ? allDocsByID.get(activeDragRowID) ?? null : null;
     const rowDropValidationByID = React.useMemo(()=>{
         if (!activeDoc) {
             return new Map();
         }
         return new Map(data.map((doc)=>[
                 doc.__pageTreeID,
-                getDropValidation({
+                getDropTargetValidation({
                     activeDoc,
-                    targetDoc: doc
+                    docsByID: allDocsByID,
+                    dropTarget: {
+                        dropType: 'row',
+                        insertAfterDropID: null,
+                        insertBeforeDropID: null,
+                        rowID: doc.__pageTreeID
+                    }
                 })
             ]));
     }, [
         activeDoc,
+        allDocsByID,
         data
     ]);
     const insertDropValidationByID = React.useMemo(()=>{
@@ -250,9 +642,10 @@ function HierarchyTable({ activeDragRowID, allDocsByID, columns, data, isMovePen
         }
         return new Map(insertDropTargets.map((dropTarget)=>[
                 dropTarget.dropID,
-                getDropValidation({
+                getDropTargetValidation({
                     activeDoc,
-                    targetDoc: dropTarget.parentID === null ? undefined : allDocsByID.get(dropTarget.parentID) ?? undefined
+                    docsByID: allDocsByID,
+                    dropTarget
                 })
             ]));
     }, [
@@ -270,7 +663,6 @@ function HierarchyTable({ activeDragRowID, allDocsByID, columns, data, isMovePen
             'table-wrap pages-hierarchy-table',
             activeDoc ? 'pages-hierarchy-table--dragging' : ''
         ].filter(Boolean).join(' '),
-        "data-page-tree-orderable": hasManualOrderColumn ? 'true' : undefined,
         children: /*#__PURE__*/ _jsx("div", {
             className: "table table--appearance-default",
             children: /*#__PURE__*/ _jsxs("table", {
@@ -280,66 +672,72 @@ function HierarchyTable({ activeDragRowID, allDocsByID, columns, data, isMovePen
                     /*#__PURE__*/ _jsx("thead", {
                         children: /*#__PURE__*/ _jsx("tr", {
                             children: activeColumns.map((column, index)=>/*#__PURE__*/ _jsx("th", {
-                                    "data-page-tree-manual-order-cell": column.accessor === MANUAL_ORDER_COLUMN_ACCESSOR ? 'true' : undefined,
                                     "data-page-tree-title-cell": column.accessor === titleCellAccessor ? 'true' : undefined,
                                     id: `heading-${column.accessor.replace(/\./g, '__')}`,
                                     children: column.Heading
                                 }, index))
                         })
                     }),
-                    /*#__PURE__*/ _jsxs("tbody", {
-                        children: [
-                            insertDropTargets[0] ? /*#__PURE__*/ _jsx(HierarchyInsertRow, {
-                                activeColumnsCount: activeColumns.length,
-                                activeDragRowID: activeDragRowID,
-                                dropTarget: insertDropTargets[0],
-                                dropValidation: insertDropValidationByID.get(insertDropTargets[0].dropID),
-                                isMovePending: isMovePending
-                            }, insertDropTargets[0].dropID) : null,
-                            data.map((doc, rowIndex)=>/*#__PURE__*/ _jsxs(React.Fragment, {
+                    /*#__PURE__*/ _jsx("tbody", {
+                        children: /*#__PURE__*/ _jsx(SortableContext, {
+                            items: sortableItems,
+                            strategy: sortingStrategy,
+                            children: data.map((doc, rowIndex)=>{
+                                const rootInsertBeforeDropTarget = doc.__pageTreeParentID === null ? insertDropTargetsByReferenceRowID.get(doc.__pageTreeID) : undefined;
+                                const rootInsertTargetIndex = rootInsertBeforeDropTarget !== undefined ? insertDropTargets.indexOf(rootInsertBeforeDropTarget) : -1;
+                                const rootInsertAfterDropTarget = rootInsertTargetIndex >= 0 ? insertDropTargets[rootInsertTargetIndex + 1] : undefined;
+                                const isTrailingRootInsert = rootInsertAfterDropTarget === insertDropTargets[insertDropTargets.length - 1];
+                                const nextVisibleDoc = data[rowIndex + 1];
+                                const hasVisibleDescendantAfter = nextVisibleDoc?.__pageTreeAncestorIDs.includes(doc.__pageTreeID) ?? false;
+                                return /*#__PURE__*/ _jsxs(React.Fragment, {
                                     children: [
+                                        rootInsertBeforeDropTarget ? /*#__PURE__*/ _jsx(HierarchyInsertRow, {
+                                            activeColumnsCount: activeColumns.length,
+                                            activeDragRowID: activeDoc ? activeDragRowID : null,
+                                            activeDropTargetID: activeDropTargetID,
+                                            dropTarget: rootInsertBeforeDropTarget,
+                                            dropValidation: insertDropValidationByID.get(rootInsertBeforeDropTarget.dropID),
+                                            isMovePending: isMovePending
+                                        }, rootInsertBeforeDropTarget.dropID) : null,
                                         /*#__PURE__*/ _jsx(HierarchyTableRow, {
                                             activeColumns: activeColumns,
                                             activeDragRowID: activeDragRowID,
+                                            activeDragType: activeDragType,
+                                            canReorderRows: canReorderRows,
                                             doc: doc,
                                             dropValidation: rowDropValidationByID.get(doc.__pageTreeID),
-                                            insertAfterDropID: insertDropTargets[rowIndex + 1].dropID,
-                                            insertBeforeDropID: insertDropTargets[rowIndex].dropID,
+                                            insertAfterDropID: hasVisibleDescendantAfter || isTrailingRootInsert ? null : rootInsertAfterDropTarget?.dropID ?? null,
+                                            insertBeforeDropID: rootInsertBeforeDropTarget?.dropID ?? null,
                                             isMovePending: isMovePending,
                                             rowIndex: rowIndex,
                                             titleCellAccessor: titleCellAccessor
-                                        }),
-                                        insertDropTargets[rowIndex + 1] ? /*#__PURE__*/ _jsx(HierarchyInsertRow, {
-                                            activeColumnsCount: activeColumns.length,
-                                            activeDragRowID: activeDragRowID,
-                                            dropTarget: insertDropTargets[rowIndex + 1],
-                                            dropValidation: insertDropValidationByID.get(insertDropTargets[rowIndex + 1].dropID),
-                                            isMovePending: isMovePending
-                                        }, insertDropTargets[rowIndex + 1].dropID) : null
+                                        })
                                     ]
-                                }, doc.__pageTreeID))
-                        ]
+                                }, doc.__pageTreeID);
+                            })
+                        })
                     })
                 ]
             })
         })
     });
 }
-export default function PageTreeListViewClient({ allDocs, badgeConfig, canMoveDocs, columnState, homeIndicatorEnabled, orderableFieldName: _orderableFieldName, parentFieldSlug, query, sourceDocs, useAsTitle, ...props }) {
+export default function PageTreeListViewClient({ allDocs, badgeConfig, canMoveDocs, columnState, homeIndicatorEnabled, orderableFieldName, parentFieldSlug, query, sourceDocs, useAsTitle, ...props }) {
     const router = useRouter();
     const searchParams = useSearchParams();
     const { config } = useConfig();
     const locale = useLocale();
     const { i18n } = useTranslation();
     const [activeDragRowID, setActiveDragRowID] = React.useState(null);
+    const [activeDragType, setActiveDragType] = React.useState(null);
     const [activeDropTarget, setActiveDropTarget] = React.useState(null);
     const [collapsedIDs, setCollapsedIDs] = React.useState(()=>new Set());
-    const [localSourceDocs, setLocalSourceDocs] = React.useState(sourceDocs);
+    const [optimisticOrderRowIDs, setOptimisticOrderRowIDs] = React.useState(null);
+    const [parentMoveEnabled, setParentMoveEnabled] = React.useState(false);
     const [pendingMoveRowID, setPendingMoveRowID] = React.useState(null);
-    React.useEffect(()=>{
-        setLocalSourceDocs(sourceDocs);
-    }, [
-        sourceDocs
+    const { getPreference, setPreference } = usePreferences();
+    const parentMovePreferenceKey = React.useMemo(()=>getParentMovePreferenceKey(props.collectionSlug), [
+        props.collectionSlug
     ]);
     const toggleRow = React.useCallback((rowID)=>{
         setCollapsedIDs((currentState)=>{
@@ -352,6 +750,16 @@ export default function PageTreeListViewClient({ allDocs, badgeConfig, canMoveDo
             return nextState;
         });
     }, []);
+    const handleParentMoveToggle = React.useCallback(()=>{
+        setParentMoveEnabled((currentValue)=>{
+            const nextValue = !currentValue;
+            void setPreference(parentMovePreferenceKey, nextValue);
+            return nextValue;
+        });
+    }, [
+        parentMovePreferenceKey,
+        setPreference
+    ]);
     const currentSort = React.useMemo(()=>{
         const searchParamSort = searchParams.getAll('sort');
         if (searchParamSort.length > 0) {
@@ -362,6 +770,10 @@ export default function PageTreeListViewClient({ allDocs, badgeConfig, canMoveDo
         query.sort,
         searchParams
     ]);
+    const canReorderRows = canMoveDocs && isOrderableSortActive({
+        orderableFieldName,
+        sort: currentSort
+    });
     const currentLimit = React.useMemo(()=>normalizePositiveInt(searchParams.get('limit'), typeof query.limit === 'number' && query.limit > 0 ? query.limit : 10), [
         query.limit,
         searchParams
@@ -370,13 +782,13 @@ export default function PageTreeListViewClient({ allDocs, badgeConfig, canMoveDo
         query.page,
         searchParams
     ]);
-    const liveAllDocs = React.useMemo(()=>buildPageTreeDocs(localSourceDocs, {
+    const liveAllDocs = React.useMemo(()=>buildPageTreeDocs(sourceDocs, {
             parentFieldSlug,
             sort: currentSort
         }), [
         currentSort,
-        localSourceDocs,
-        parentFieldSlug
+        parentFieldSlug,
+        sourceDocs
     ]);
     const collapseResetKey = React.useMemo(()=>JSON.stringify([
             props.collectionSlug,
@@ -391,19 +803,37 @@ export default function PageTreeListViewClient({ allDocs, badgeConfig, canMoveDo
             activeDragRowID,
             canMoveDocs,
             collapsedIDs,
+            parentMoveEnabled,
             pendingMoveRowID,
             toggleRow
         }), [
         activeDragRowID,
         canMoveDocs,
         collapsedIDs,
+        parentMoveEnabled,
         pendingMoveRowID,
         toggleRow
     ]);
+    React.useEffect(()=>{
+        let isMounted = true;
+        void getPreference(parentMovePreferenceKey).then((storedValue)=>{
+            if (isMounted) {
+                setParentMoveEnabled(storedValue === true);
+            }
+        });
+        return ()=>{
+            isMounted = false;
+        };
+    }, [
+        getPreference,
+        parentMovePreferenceKey
+    ]);
     React.useEffect(()=>{
         setActiveDragRowID(null);
+        setActiveDragType(null);
         setActiveDropTarget(null);
         setCollapsedIDs(new Set());
+        setOptimisticOrderRowIDs(null);
     }, [
         collapseResetKey
     ]);
@@ -417,17 +847,36 @@ export default function PageTreeListViewClient({ allDocs, badgeConfig, canMoveDo
         visibleDocs
     ]);
     const paginatedDocs = paginatedData.docs;
+    const paginatedServerOrderKey = React.useMemo(()=>paginatedDocs.map((doc)=>doc.__pageTreeID).join('\0'), [
+        paginatedDocs
+    ]);
+    const displayedPaginatedDocs = React.useMemo(()=>orderDocsByRowIDs(paginatedDocs, optimisticOrderRowIDs), [
+        optimisticOrderRowIDs,
+        paginatedDocs
+    ]);
+    const displayedPaginatedData = React.useMemo(()=>({
+            ...paginatedData,
+            docs: displayedPaginatedDocs
+        }), [
+        displayedPaginatedDocs,
+        paginatedData
+    ]);
+    React.useEffect(()=>{
+        setOptimisticOrderRowIDs(null);
+    }, [
+        paginatedServerOrderKey
+    ]);
     const allDocsByID = React.useMemo(()=>new Map(liveAllDocs.map((doc)=>[
                 doc.__pageTreeID,
                 doc
             ])), [
         liveAllDocs
     ]);
-    const paginatedDocsByID = React.useMemo(()=>new Map(paginatedDocs.map((doc)=>[
+    const paginatedDocsByID = React.useMemo(()=>new Map(displayedPaginatedDocs.map((doc)=>[
                 doc.__pageTreeID,
                 doc
             ])), [
-        paginatedDocs
+        displayedPaginatedDocs
     ]);
     const renderedCellIndexByDocID = React.useMemo(()=>new Map(allDocs.map((doc, index)=>[
                 doc.__pageTreeID,
@@ -435,29 +884,31 @@ export default function PageTreeListViewClient({ allDocs, badgeConfig, canMoveDo
             ])), [
         allDocs
     ]);
-    const normalizedColumnState = React.useMemo(()=>normalizePageTreeColumnState(columnState, useAsTitle), [
+    const normalizedColumnState = React.useMemo(()=>ensureUseAsTitleColumn(columnState, useAsTitle), [
         columnState,
         useAsTitle
     ]);
-    const paginatedColumnState = React.useMemo(()=>sliceColumnState(normalizedColumnState, paginatedDocs, renderedCellIndexByDocID), [
+    const paginatedColumnState = React.useMemo(()=>sliceColumnState(normalizedColumnState, displayedPaginatedDocs, renderedCellIndexByDocID), [
+        displayedPaginatedDocs,
         normalizedColumnState,
-        paginatedDocs,
         renderedCellIndexByDocID
     ]);
     const tableColumns = React.useMemo(()=>buildTableColumns({
             badgeConfig,
             columnState: paginatedColumnState,
-            docs: paginatedDocs,
+            docs: displayedPaginatedDocs,
             enableRowSelections: props.enableRowSelections,
             homeIndicatorEnabled,
+            orderableFieldName,
             parentFieldSlug,
             t: i18n.t,
             useAsTitle
         }), [
         paginatedColumnState,
-        paginatedDocs,
+        displayedPaginatedDocs,
         badgeConfig,
         homeIndicatorEnabled,
+        orderableFieldName,
         parentFieldSlug,
         props.enableRowSelections,
         i18n.t,
@@ -465,7 +916,7 @@ export default function PageTreeListViewClient({ allDocs, badgeConfig, canMoveDo
     ]);
     const activeDragDoc = activeDragRowID ? paginatedDocsByID.get(activeDragRowID) ?? null : null;
     const activeDragPreviewPath = React.useMemo(()=>{
-        if (!activeDragDoc) {
+        if (!activeDragDoc || activeDragType !== 'move') {
             return null;
         }
         if (!activeDropTarget) {
@@ -478,9 +929,10 @@ export default function PageTreeListViewClient({ allDocs, badgeConfig, canMoveDo
             docsByID: allDocsByID,
             dropTarget: activeDropTarget
         });
-        const dropValidation = getDropValidation({
+        const dropValidation = getDropTargetValidation({
             activeDoc: activeDragDoc,
-            targetDoc: targetDoc ?? undefined
+            docsByID: allDocsByID,
+            dropTarget: activeDropTarget
         });
         if (!dropValidation.isValid) {
             return buildDocSlugPath({
@@ -495,66 +947,46 @@ export default function PageTreeListViewClient({ allDocs, badgeConfig, canMoveDo
         });
     }, [
         activeDragDoc,
+        activeDragType,
         activeDropTarget,
         allDocsByID
     ]);
     const isMovePending = pendingMoveRowID !== null;
     const sensors = useSensors(useSensor(PointerSensor, {
         activationConstraint: {
-            distance: 4
+            distance: 2
         }
     }));
-    const moveDocument = React.useCallback(async (args)=>{
-        const { parentID, rowID } = args;
-        const params = new URLSearchParams();
-        if (locale?.code) {
-            params.set('locale', locale.code);
-        }
-        const response = await fetch(`${config.routes.api}/${props.collectionSlug}/${encodeURIComponent(rowID)}/move${params.size > 0 ? `?${params.toString()}` : ''}`, {
-            body: JSON.stringify({
-                parentID
-            }),
-            credentials: 'include',
-            headers: {
-                'Accept-Language': i18n.language,
-                'Content-Type': 'application/json',
-                [pageTreeMoveRequestHeader]: pageTreeMoveRequestHeaderValue
-            },
-            method: 'POST'
-        });
-        const result = await response.json().catch(()=>null);
-        if (!response.ok) {
-            throw new Error(result?.message ?? 'Could not move document.');
-        }
-        return result;
-    }, [
-        config.routes.api,
-        i18n.language,
-        locale?.code,
-        props.collectionSlug
-    ]);
     const handleDragCancel = React.useCallback(()=>{
         setActiveDragRowID(null);
+        setActiveDragType(null);
         setActiveDropTarget(null);
     }, []);
     const handleDragStart = React.useCallback((event)=>{
-        const dragData = getPageTreeDragData(event.active.data.current);
         if (!canMoveDocs || isMovePending) {
             return;
         }
-        const rowID = dragData.rowID;
-        if (typeof rowID === 'string' && paginatedDocsByID.has(rowID)) {
+        const dragData = getPageTreeDragData(event.active.data.current);
+        const { dragType, rowID } = dragData;
+        if (typeof rowID === 'string' && dragType && paginatedDocsByID.has(rowID) && (dragType !== 'order' || canReorderRows)) {
             setActiveDragRowID(rowID);
+            setActiveDragType(dragType);
             setActiveDropTarget(null);
         }
     }, [
         canMoveDocs,
+        canReorderRows,
         isMovePending,
         paginatedDocsByID
     ]);
     const handleDragOver = React.useCallback((event)=>{
+        const dragData = getPageTreeDragData(event.active.data.current);
         const overData = event.over?.data.current;
-        if (!overData) {
+        if (dragData.dragType === 'order') {
+            setActiveDropTarget(null);
+            return;
+        }
+        if (dragData.dragType !== 'move' || !overData) {
             setActiveDropTarget(null);
             return;
         }
@@ -570,51 +1002,132 @@ export default function PageTreeListViewClient({ allDocs, badgeConfig, canMoveDo
     }, []);
     const handleDragEnd = React.useCallback(async (event)=>{
         const dragData = getPageTreeDragData(event.active.data.current);
-        const rowID = dragData.rowID;
+        const { dragType, rowID } = dragData;
         const activeDoc = typeof rowID === 'string' ? paginatedDocsByID.get(rowID) ?? null : null;
         const overData = event.over?.data.current;
+        const overDragData = getPageTreeDragData(event.over?.data.current);
         setActiveDragRowID(null);
+        setActiveDragType(null);
         setActiveDropTarget(null);
-        if (!rowID || !activeDoc || !overData) {
+        if (dragType === 'order') {
+            if (typeof rowID === 'string' && typeof overDragData.rowID === 'string') {
+                const nextOrderRowIDs = buildOptimisticOrderRowIDs({
+                    activeRowID: rowID,
+                    docs: displayedPaginatedDocs,
+                    targetRowID: overDragData.rowID
+                });
+                const reorderRequestBody = buildReorderRequestBody({
+                    activeRowID: rowID,
+                    docs: displayedPaginatedDocs,
+                    orderableFieldName,
+                    sort: currentSort,
+                    targetRowID: overDragData.rowID
+                });
+                if (!nextOrderRowIDs || !reorderRequestBody) {
+                    return;
+                }
+                const apiRoute = config.routes.api;
+                const params = new URLSearchParams();
+                if (locale?.code) {
+                    params.set('locale', locale.code);
+                }
+                setOptimisticOrderRowIDs(nextOrderRowIDs);
+                setPendingMoveRowID(rowID);
+                try {
+                    const response = await fetch(`${apiRoute}/${props.collectionSlug}/${encodeURIComponent(rowID)}/reorder${params.size > 0 ? `?${params.toString()}` : ''}`, {
+                        body: JSON.stringify(reorderRequestBody),
+                        credentials: 'include',
+                        headers: {
+                            'Accept-Language': i18n.language,
+                            'Content-Type': 'application/json'
+                        },
+                        method: 'POST'
+                    });
+                    const result = await response.json().catch(()=>null);
+                    if (!response.ok) {
+                        setOptimisticOrderRowIDs(null);
+                        toast.error(result?.message ?? 'Could not reorder document.');
+                        return;
+                    }
+                    if (result?.message === 'initial migration') {
+                        setOptimisticOrderRowIDs(null);
+                    }
+                    React.startTransition(()=>{
+                        router.refresh();
+                    });
+                } catch (error) {
+                    const message = error instanceof Error && error.message ? error.message : 'Could not reorder document.';
+                    setOptimisticOrderRowIDs(null);
+                    toast.error(message);
+                } finally{
+                    setPendingMoveRowID(null);
+                }
+            }
             return;
         }
-        const targetDoc = getDropTargetParentDoc({
+        if (dragType !== 'move' || typeof rowID !== 'string' || !activeDoc || !overData) {
+            return;
+        }
+        const dropValidation = getDropTargetValidation({
+            activeDoc,
             docsByID: allDocsByID,
             dropTarget: overData
         });
-        const dropValidation = getDropValidation({
-            activeDoc,
-            targetDoc: targetDoc ?? undefined
-        });
         if (!dropValidation.isValid) {
             if (!shouldSilenceMoveMessage(dropValidation.message)) {
                 toast.error(dropValidation.message ?? 'Could not move document.');
             }
             return;
         }
+        if (overData.dropType === 'insert' && activeDoc.__pageTreeParentID === dropValidation.parentID) {
+            return;
+        }
+        const apiRoute = config.routes.api;
+        const params = new URLSearchParams();
+        if (locale?.code) {
+            params.set('locale', locale.code);
+        }
         setPendingMoveRowID(rowID);
         try {
-            await moveDocument({
-                parentID: dropValidation.parentID,
-                rowID
+            const response = await fetch(`${apiRoute}/${props.collectionSlug}/${encodeURIComponent(rowID)}/move${params.size > 0 ? `?${params.toString()}` : ''}`, {
+                body: JSON.stringify({
+                    parentID: dropValidation.parentID
+                }),
+                credentials: 'include',
+                headers: {
+                    'Accept-Language': i18n.language,
+                    'Content-Type': 'application/json'
+                },
+                method: 'POST'
             });
+            const result = await response.json().catch(()=>null);
+            if (!response.ok) {
+                if (shouldSilenceMoveMessage(result?.message)) {
+                    return;
+                }
+                toast.error(result?.message ?? 'Could not move document.');
+                return;
+            }
             toast.success(`Moved "${getDocDisplayLabel(activeDoc)}".`);
             React.startTransition(()=>{
                 router.refresh();
             });
         } catch (error) {
             const message = error instanceof Error && error.message ? error.message : 'Could not move document.';
-            if (shouldSilenceMoveMessage(message)) {
-                return;
-            }
             toast.error(message);
         } finally{
             setPendingMoveRowID(null);
         }
     }, [
         allDocsByID,
-        moveDocument,
+        config.routes.api,
+        currentSort,
+        displayedPaginatedDocs,
+        i18n.language,
+        locale?.code,
+        orderableFieldName,
         paginatedDocsByID,
+        props.collectionSlug,
         router
     ]);
     const handleDragEndSync = React.useCallback((event)=>{
@@ -632,9 +1145,12 @@ export default function PageTreeListViewClient({ allDocs, badgeConfig, canMoveDo
             children: [
                 /*#__PURE__*/ _jsx(HierarchyTable, {
                     activeDragRowID: activeDragRowID,
+                    activeDragType: activeDragType,
+                    activeDropTarget: activeDropTarget,
                     allDocsByID: allDocsByID,
+                    canReorderRows: canReorderRows,
                     columns: tableColumns,
-                    data: paginatedDocs,
+                    data: displayedPaginatedDocs,
                     isMovePending: isMovePending,
                     titleCellAccessor: useAsTitle
                 }),
@@ -652,33 +1168,57 @@ export default function PageTreeListViewClient({ allDocs, badgeConfig, canMoveDo
         }), [
         activeDragPreviewPath,
         activeDragRowID,
+        activeDragType,
+        activeDropTarget,
+        allDocsByID,
+        canReorderRows,
+        displayedPaginatedDocs,
         handleDragCancel,
         handleDragEndSync,
         handleDragOver,
         handleDragStart,
         isMovePending,
-        allDocsByID,
-        paginatedDocs,
         sensors,
         tableColumns,
         useAsTitle
     ]);
+    const beforeActions = React.useMemo(()=>{
+        const actions = props.beforeActions ? [
+            ...props.beforeActions
+        ] : [];
+        if (canMoveDocs) {
+            actions.unshift(/*#__PURE__*/ _jsx(ParentMoveToggle, {
+                collectionSlug: props.collectionSlug,
+                enabled: parentMoveEnabled,
+                onToggle: handleParentMoveToggle
+            }, "parent-move-toggle"));
+        }
+        return actions.length > 0 ? actions : undefined;
+    }, [
+        canMoveDocs,
+        handleParentMoveToggle,
+        parentMoveEnabled,
+        props.beforeActions,
+        props.collectionSlug
+    ]);
     return /*#__PURE__*/ _jsx("div", {
         className: styles.root,
         children: /*#__PURE__*/ _jsx(PageTreeProvider, {
             value: hierarchyValue,
             children: /*#__PURE__*/ _jsx(ListQueryProvider, {
                 collectionSlug: props.collectionSlug,
-                data: paginatedData,
+                data: displayedPaginatedData,
                 modifySearchParams: true,
+                orderableFieldName: orderableFieldName,
                 query: {
                     ...query,
                     limit: currentLimit,
-                    page: paginatedData.page,
+                    page: displayedPaginatedData.page,
                     sort: currentSort
                 },
                 children: /*#__PURE__*/ _jsx(DefaultListView, {
                     ...props,
+                    beforeActions: beforeActions,
                     columnState: paginatedColumnState,
                     Table: tableNode
                 })