@payloadcms/ui 3.43.0-canary.7 → 3.43.0-internal.693bd81

package/dist/providers/Folders/index.js

@@ -1,68 +1,82 @@
 'use client';
 
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useRouter, useSearchParams } from 'next/navigation.js';
+import { useRouter } from 'next/navigation.js';
 import { extractID, formatAdminURL, formatFolderOrDocumentItem } from 'payload/shared';
 import * as qs from 'qs-esm';
 import React from 'react';
 import { toast } from 'sonner';
 import { useDrawerDepth } from '../../elements/Drawer/index.js';
-import { parseSearchParams } from '../../utilities/parseSearchParams.js';
 import { useConfig } from '../Config/index.js';
 import { useRouteTransition } from '../RouteTransition/index.js';
 import { useTranslation } from '../Translation/index.js';
 import { getMetaSelection, getShiftSelection, groupItemIDsByRelation } from './selection.js';
 const Context = /*#__PURE__*/React.createContext({
-  activeCollectionFolderSlugs: [],
-  allCollectionFolderSlugs: [],
-  allowCreateCollectionSlugs: [],
+  addItems: () => {},
   breadcrumbs: [],
   clearSelections: () => {},
   currentFolder: null,
   documents: [],
+  filterItems: () => undefined,
   focusedRowIndex: -1,
   folderCollectionConfig: null,
   folderCollectionSlug: '',
+  folderCollectionSlugs: [],
   folderFieldName: 'folder',
   folderID: undefined,
-  FolderResultsComponent: null,
-  getFolderRoute: () => '',
   getSelectedItems: () => [],
   isDragging: false,
-  itemKeysToMove: undefined,
   lastSelectedIndex: null,
   moveToFolder: () => Promise.resolve(undefined),
   onItemClick: () => undefined,
   onItemKeyPress: () => undefined,
-  refineFolderData: () => undefined,
+  removeItems: () => undefined,
+  renameFolder: () => undefined,
   search: '',
-  selectedItemKeys: new Set(),
+  selectedIndexes: new Set(),
   setBreadcrumbs: () => {},
   setFocusedRowIndex: () => -1,
+  setFolderID: () => null,
   setIsDragging: () => false,
-  sort: '_folderOrDocumentTitle',
-  subfolders: []
+  sortAndUpdateState: () => undefined,
+  sortDirection: 'asc',
+  sortOn: '_folderOrDocumentTitle',
+  subfolders: [],
+  visibleCollectionSlugs: []
 });
+function filterOutItems({
+  items,
+  relationTo,
+  search
+}) {
+  if (typeof search !== 'string' && relationTo === undefined) {
+    return items;
+  }
+  const searchLower = (search || '').toLowerCase();
+  return items.filter(item => {
+    const itemTitle = item.value._folderOrDocumentTitle.toLowerCase();
+    const itemRelationTo = item.relationTo;
+    return (relationTo ? relationTo.includes(itemRelationTo) : true) && (!searchLower || itemTitle.includes(searchLower));
+  });
+}
 export function FolderProvider({
-  activeCollectionFolderSlugs: activeCollectionSlugs,
-  allCollectionFolderSlugs = [],
-  allowCreateCollectionSlugs,
   allowMultiSelection = true,
-  baseFolderPath,
   breadcrumbs: _breadcrumbsFromProps = [],
   children,
-  documents,
+  collectionSlug,
+  documents: allDocumentsFromProps = [],
+  filteredCollectionSlugs,
+  folderCollectionSlugs = [],
   folderFieldName,
-  folderID,
-  FolderResultsComponent: InitialFolderResultsComponent,
-  onItemClick: onItemClickFromProps,
-  search,
-  sort = '_folderOrDocumentTitle',
-  subfolders
+  folderID: _folderIDFromProps = undefined,
+  search: _searchFromProps,
+  sort,
+  subfolders: subfoldersFromProps = []
 }) {
   const parentFolderContext = useFolder();
   const {
-    config
+    config,
+    getEntityConfig
   } = useConfig();
   const {
     routes,
@@ -76,102 +90,154 @@ export function FolderProvider({
   const {
     startRouteTransition
   } = useRouteTransition();
-  const [FolderResultsComponent, setFolderResultsComponent] = React.useState(InitialFolderResultsComponent || (() => null));
   const [folderCollectionConfig] = React.useState(() => config.collections.find(collection => config.folders && collection.slug === config.folders.slug));
   const folderCollectionSlug = folderCollectionConfig.slug;
-  const rawSearchParams = useSearchParams();
-  const searchParams = React.useMemo(() => parseSearchParams(rawSearchParams), [rawSearchParams]);
-  const [currentQuery, setCurrentQuery] = React.useState(searchParams);
   const [isDragging, setIsDragging] = React.useState(false);
-  const [selectedItemKeys, setSelectedItemKeys] = React.useState(() => new Set());
+  const [selectedIndexes, setSelectedIndexes] = React.useState(() => new Set());
   const [focusedRowIndex, setFocusedRowIndex] = React.useState(-1);
   const [lastSelectedIndex, setLastSelectedIndex] = React.useState(null);
+  const [visibleCollectionSlugs, setVisibleCollectionSlugs] = React.useState(filteredCollectionSlugs || [...folderCollectionSlugs, folderCollectionSlug]);
+  const [activeFolderID, setActiveFolderID] = React.useState(_folderIDFromProps);
   const [breadcrumbs, setBreadcrumbs] = React.useState(_breadcrumbsFromProps);
+  const [allSubfolders, setAllSubfolders] = React.useState(subfoldersFromProps);
+  const [subfolders, setSubfolders] = React.useState(() => {
+    return filterOutItems({
+      items: allSubfolders,
+      relationTo: visibleCollectionSlugs.includes(folderCollectionSlug) ? [folderCollectionSlug] : [],
+      search: _searchFromProps
+    });
+  });
+  const [allDocuments, setAllDocuments] = React.useState(allDocumentsFromProps);
+  const [documents, setDocuments] = React.useState(() => filterOutItems({
+    items: allDocuments,
+    relationTo: visibleCollectionSlugs,
+    search: _searchFromProps
+  }));
+  const [search, setSearch] = React.useState(_searchFromProps);
+  const [baseFolderPath] = React.useState(() => {
+    if (collectionSlug) {
+      return `/collections/${collectionSlug}/${folderCollectionSlug}`;
+    } else {
+      return config.admin.routes.browseByFolder;
+    }
+  });
+  const [sortDirection, setSortDirection] = React.useState(() => {
+    if (sort) {
+      return sort.startsWith('-') ? 'desc' : 'asc';
+    }
+    return 'asc';
+  });
+  const [sortOn, setSortOn] = React.useState(() => {
+    if (sort) {
+      return sort.replace(/^-/, '');
+    }
+    return '_folderOrDocumentTitle';
+  });
   const lastClickTime = React.useRef(null);
   const totalCount = subfolders.length + documents.length;
+  const formatFolderURL = React.useCallback(args => {
+    const newFolderID = 'folderID' in args ? args.folderID : activeFolderID;
+    const params = {
+      relationTo: 'relationTo' in args ? args.relationTo : collectionSlug ? undefined : visibleCollectionSlugs,
+      search: 'search' in args ? args.search : search,
+      sortBy: 'sortBy' in args ? args.sortBy : sortOn,
+      sortDirection: 'sortDirection' in args ? args.sortDirection : sortDirection
+    };
+    return formatAdminURL({
+      adminRoute: config.routes.admin,
+      path: `${baseFolderPath}${newFolderID ? `/${newFolderID}` : ''}${qs.stringify(params, {
+        addQueryPrefix: true
+      })}`
+    });
+  }, [activeFolderID, baseFolderPath, collectionSlug, config.routes.admin, search, sortDirection, sortOn, visibleCollectionSlugs]);
   const clearSelections = React.useCallback(() => {
     setFocusedRowIndex(-1);
-    setSelectedItemKeys(new Set());
+    setSelectedIndexes(new Set());
     setLastSelectedIndex(undefined);
   }, []);
-  const mergeQuery = React.useCallback((newQuery = {}) => {
-    let page = 'page' in newQuery ? newQuery.page : currentQuery?.page;
-    if ('search' in newQuery) {
-      page = '1';
-    }
-    const mergedQuery = {
-      ...currentQuery,
-      ...newQuery,
-      page,
-      search: 'search' in newQuery ? newQuery.search : currentQuery?.search,
-      sort: 'sort' in newQuery ? newQuery.sort : currentQuery?.sort ?? undefined
-    };
-    return mergedQuery;
-  }, [currentQuery]);
-  const refineFolderData = React.useCallback(({
-    query,
-    updateURL
+  /**
+  * Used to populate drawer data.
+  *
+  * This is used when the user navigates to a folder.
+  */
+  const getFolderData = React.useCallback(async ({
+    folderID,
+    search: _search = undefined
   }) => {
-    if (updateURL) {
-      const newQuery_0 = mergeQuery(query);
-      startRouteTransition(() => router.replace(`${qs.stringify(newQuery_0, {
-        addQueryPrefix: true
-      })}`));
-      setCurrentQuery(newQuery_0);
-    }
-  }, [mergeQuery, router, startRouteTransition]);
-  const getFolderRoute = React.useCallback(toFolderID => {
-    const newQuery_1 = mergeQuery({
-      page: '1',
-      search: ''
+    // if folderID is not set, we want to search all documents
+    const searchFilter = !folderID ? ((typeof _search === 'string' ? _search : search) || '').trim() : undefined;
+    const query = qs.stringify({
+      collectionSlug,
+      folderID,
+      search: searchFilter
+    }, {
+      addQueryPrefix: true
     });
-    return formatAdminURL({
-      adminRoute: config.routes.admin,
-      path: `${baseFolderPath}${toFolderID ? `/${toFolderID}` : ''}${qs.stringify(newQuery_1, {
-        addQueryPrefix: true
-      })}`,
-      serverURL: config.serverURL
+    const folderDataReq = await fetch(`${serverURL}${routes.api}/${folderCollectionSlug}/populate-folder-data${query}`, {
+      credentials: 'include',
+      headers: {
+        'content-type': 'application/json'
+      }
     });
-  }, [baseFolderPath, config.routes.admin, config.serverURL, mergeQuery]);
-  const getItem = React.useCallback(itemKey => {
-    return [...subfolders, ...documents].find(doc => doc.itemKey === itemKey);
-  }, [documents, subfolders]);
+    if (folderDataReq.status === 200) {
+      const folderDataRes = await folderDataReq.json();
+      setAllSubfolders(folderDataRes.subfolders || []);
+      setAllDocuments(folderDataRes.documents || []);
+      return folderDataRes;
+    } else {
+      return {
+        breadcrumbs: [],
+        documents: [],
+        subfolders: []
+      };
+    }
+  }, [folderCollectionSlug, search, routes.api, serverURL, collectionSlug]);
+  const setNewActiveFolderID = React.useCallback(async ({
+    folderID: toFolderID
+  }) => {
+    clearSelections();
+    if (drawerDepth === 1) {
+      // not in a drawer (default is 1)
+      startRouteTransition(() => router.push(formatFolderURL({
+        folderID: toFolderID
+      })));
+    } else {
+      const folderDataRes_0 = await getFolderData({
+        folderID: toFolderID
+      });
+      setBreadcrumbs(folderDataRes_0?.breadcrumbs || []);
+      setSubfolders(folderDataRes_0?.subfolders || []);
+      setDocuments(folderDataRes_0?.documents || []);
+      setActiveFolderID(toFolderID);
+    }
+  }, [clearSelections, drawerDepth, startRouteTransition, router, formatFolderURL, getFolderData]);
   const getSelectedItems = React.useCallback(() => {
-    return Array.from(selectedItemKeys).reduce((acc, itemKey_0) => {
-      const item = getItem(itemKey_0);
+    return Array.from(selectedIndexes).reduce((acc, index) => {
+      const item = [...subfolders, ...documents][index];
       if (item) {
         acc.push(item);
       }
       return acc;
     }, []);
-  }, [selectedItemKeys, getItem]);
-  const navigateAfterSelection = React.useCallback(({
-    collectionSlug,
+  }, [documents, selectedIndexes, subfolders]);
+  const navigateAfterSelection = React.useCallback(async ({
+    collectionSlug: collectionSlug_0,
     docID
   }) => {
-    if (drawerDepth === 1) {
-      // not in a drawer (default is 1)
-      clearSelections();
-      if (collectionSlug === folderCollectionSlug) {
-        // clicked on folder, take the user to the folder view
-        startRouteTransition(() => router.push(getFolderRoute(docID)));
-      } else if (collectionSlug) {
-        // clicked on document, take the user to the documet view
-        startRouteTransition(() => {
-          router.push(formatAdminURL({
-            adminRoute: config.routes.admin,
-            path: `/collections/${collectionSlug}/${docID}`
-          }));
-        });
-      }
-    }
-    if (typeof onItemClickFromProps === 'function') {
-      onItemClickFromProps(getItem(`${collectionSlug}-${docID}`));
+    if (collectionSlug_0 === folderCollectionSlug) {
+      await setNewActiveFolderID({
+        folderID: docID
+      });
+    } else if (collectionSlug_0) {
+      router.push(formatAdminURL({
+        adminRoute: config.routes.admin,
+        path: `/collections/${collectionSlug_0}/${docID}`
+      }));
     }
-  }, [clearSelections, config.routes.admin, drawerDepth, folderCollectionSlug, getFolderRoute, getItem, onItemClickFromProps, router, startRouteTransition]);
-  const onItemKeyPress = React.useCallback(({
+  }, [setNewActiveFolderID, folderCollectionSlug, router, config.routes.admin]);
+  const onItemKeyPress = React.useCallback(async ({
     event,
-    index,
+    index: index_0,
     item: item_0
   }) => {
     const {
@@ -182,12 +248,12 @@ export function FolderProvider({
     } = event;
     const isShiftPressed = shiftKey;
     const isCtrlPressed = ctrlKey || metaKey;
-    let newSelectedIndexes = undefined;
+    let newSelectedIndexes = selectedIndexes;
     switch (code) {
       case 'ArrowDown':
         {
           event.preventDefault();
-          const nextIndex_0 = Math.min(index + 1, totalCount - 1);
+          const nextIndex_0 = Math.min(index_0 + 1, totalCount - 1);
           setFocusedRowIndex(nextIndex_0);
           if (isCtrlPressed) {
             break;
@@ -206,7 +272,7 @@ export function FolderProvider({
       case 'ArrowUp':
         {
           event.preventDefault();
-          const prevIndex_0 = Math.max(index - 1, 0);
+          const prevIndex_0 = Math.max(index_0 - 1, 0);
           setFocusedRowIndex(prevIndex_0);
           if (isCtrlPressed) {
             break;
@@ -224,7 +290,7 @@ export function FolderProvider({
         }
       case 'Enter':
         {
-          if (selectedItemKeys.size === 1) {
+          if (selectedIndexes.size === 1) {
             newSelectedIndexes = new Set([]);
             setFocusedRowIndex(undefined);
           }
@@ -233,6 +299,7 @@ export function FolderProvider({
       case 'Escape':
         {
           setFocusedRowIndex(undefined);
+          setSelectedIndexes(new Set([]));
           newSelectedIndexes = new Set([]);
           break;
         }
@@ -253,57 +320,49 @@ export function FolderProvider({
             event.preventDefault();
             newSelectedIndexes = getMetaSelection({
               currentSelection: newSelectedIndexes,
-              toggleIndex: index
+              toggleIndex: index_0
             });
-            setLastSelectedIndex(index);
+            setLastSelectedIndex(index_0);
           } else {
             event.preventDefault();
-            newSelectedIndexes = new Set([index]);
-            setLastSelectedIndex(index);
+            newSelectedIndexes = new Set([index_0]);
+            setLastSelectedIndex(index_0);
           }
           break;
         }
       case 'Tab':
         {
           if (allowMultiSelection && isShiftPressed) {
-            const prevIndex = index - 1;
-            if (prevIndex < 0 && newSelectedIndexes?.size > 0) {
+            const prevIndex = index_0 - 1;
+            if (prevIndex < 0 && newSelectedIndexes.size > 0) {
               setFocusedRowIndex(prevIndex);
             }
           } else {
-            const nextIndex = index + 1;
-            if (nextIndex === totalCount && selectedItemKeys.size > 0) {
+            const nextIndex = index_0 + 1;
+            if (nextIndex === totalCount && newSelectedIndexes.size > 0) {
               setFocusedRowIndex(totalCount - 1);
             }
           }
           break;
         }
     }
-    if (!newSelectedIndexes) {
-      return;
-    }
-    setSelectedItemKeys([...subfolders, ...documents].reduce((acc_0, item_1, index_0) => {
-      if (newSelectedIndexes?.size && newSelectedIndexes.has(index_0)) {
-        acc_0.add(item_1.itemKey);
-      }
-      return acc_0;
-    }, new Set()));
-    if (selectedItemKeys.size === 1 && code === 'Enter') {
-      navigateAfterSelection({
+    setSelectedIndexes(newSelectedIndexes);
+    if (selectedIndexes.size === 1 && code === 'Enter') {
+      await navigateAfterSelection({
         collectionSlug: item_0.relationTo,
         docID: extractID(item_0.value)
       });
     }
-  }, [allowMultiSelection, documents, lastSelectedIndex, navigateAfterSelection, subfolders, totalCount, selectedItemKeys]);
-  const onItemClick = React.useCallback(({
+  }, [allowMultiSelection, lastSelectedIndex, navigateAfterSelection, selectedIndexes, totalCount]);
+  const onItemClick = React.useCallback(async ({
     event: event_0,
     index: index_1,
-    item: item_2
+    item: item_1
   }) => {
     let doubleClicked = false;
     const isCtrlPressed_0 = event_0.ctrlKey || event_0.metaKey;
     const isShiftPressed_0 = event_0.shiftKey;
-    let newSelectedIndexes_0 = undefined;
+    let newSelectedIndexes_0 = new Set(selectedIndexes);
     if (allowMultiSelection && isCtrlPressed_0) {
       newSelectedIndexes_0 = getMetaSelection({
         currentSelection: newSelectedIndexes_0,
@@ -316,7 +375,7 @@ export function FolderProvider({
       });
     } else if (allowMultiSelection && event_0.type === 'pointermove') {
       // on drag start of an unselected item
-      if (!selectedItemKeys.has(item_2.itemKey)) {
+      if (!selectedIndexes.has(index_1)) {
         newSelectedIndexes_0 = new Set([index_1]);
       }
       setLastSelectedIndex(index_1);
@@ -328,42 +387,277 @@ export function FolderProvider({
       lastClickTime.current = now;
       setLastSelectedIndex(index_1);
     }
-    if (!newSelectedIndexes_0) {
+    if (newSelectedIndexes_0.size === 0) {
       setFocusedRowIndex(undefined);
     } else {
       setFocusedRowIndex(index_1);
     }
-    if (newSelectedIndexes_0) {
-      setSelectedItemKeys([...subfolders, ...documents].reduce((acc_1, item_3, index_2) => {
-        if (newSelectedIndexes_0.size && newSelectedIndexes_0.has(index_2)) {
-          acc_1.add(item_3.itemKey);
+    setSelectedIndexes(newSelectedIndexes_0);
+    if (doubleClicked) {
+      await navigateAfterSelection({
+        collectionSlug: item_1.relationTo,
+        docID: extractID(item_1.value)
+      });
+    }
+  }, [selectedIndexes, lastSelectedIndex, allowMultiSelection, navigateAfterSelection]);
+  const filterItems = React.useCallback(async ({
+    relationTo: _relationTo,
+    search: _search_0
+  }) => {
+    const relationTo = Array.isArray(_relationTo) ? _relationTo : visibleCollectionSlugs;
+    const searchFilter_0 = ((typeof _search_0 === 'string' ? _search_0 : search) || '').trim();
+    let filteredDocuments = allDocuments;
+    let filteredSubfolders = allSubfolders;
+    if (collectionSlug && !activeFolderID && _search_0 !== search) {
+      // this allows us to search all documents in the collection when we are not in a folder and in the folder-collection view
+      const res = await getFolderData({
+        folderID: activeFolderID,
+        search: searchFilter_0
+      });
+      filteredDocuments = filterOutItems({
+        items: res.documents,
+        relationTo,
+        search: searchFilter_0
+      });
+      filteredSubfolders = filterOutItems({
+        items: res.subfolders,
+        relationTo: [folderCollectionSlug],
+        search: searchFilter_0
+      });
+    } else {
+      filteredDocuments = filterOutItems({
+        items: allDocuments,
+        relationTo,
+        search: searchFilter_0
+      });
+      filteredSubfolders = filterOutItems({
+        items: allSubfolders,
+        relationTo: relationTo.includes(folderCollectionSlug) ? [folderCollectionSlug] : [],
+        search: searchFilter_0
+      });
+    }
+    setDocuments(filteredDocuments);
+    setSubfolders(filteredSubfolders);
+    setSearch(searchFilter_0);
+    setVisibleCollectionSlugs(relationTo);
+    if (drawerDepth === 1) {
+      router.replace(formatFolderURL({
+        relationTo,
+        search: searchFilter_0 || undefined
+      }));
+    }
+  }, [collectionSlug, visibleCollectionSlugs, search, activeFolderID, allDocuments, allSubfolders, folderCollectionSlug, drawerDepth, getFolderData, router, formatFolderURL]);
+  const sortItems = React.useCallback(({
+    documentsToSort,
+    sortDirection: sortDirectionArg,
+    sortOn: sortOnArg,
+    subfoldersToSort
+  }) => {
+    let sortedDocuments;
+    let sortedSubfolders;
+    const sortDirectionToUse = sortDirectionArg || sortDirection;
+    const sortOnToUse = sortOnArg || sortOn;
+    if (sortOnArg) {
+      setSortOn(sortOnArg);
+    }
+    if (sortDirectionArg) {
+      setSortDirection(sortDirectionArg);
+    }
+    const newURL = formatFolderURL({
+      sortBy: sortOnArg || sortOn,
+      sortDirection: sortDirectionArg || sortDirection
+    });
+    if (documentsToSort) {
+      sortedDocuments = [...documentsToSort].sort((a, b) => {
+        const aValue = a.value[sortOnToUse];
+        const bValue = b.value[sortOnToUse];
+        if (aValue == null && bValue == null) {
+          return 0;
+        }
+        if (aValue == null) {
+          return sortDirectionToUse === 'asc' ? 1 : -1;
+        }
+        if (bValue == null) {
+          return sortDirectionToUse === 'asc' ? -1 : 1;
         }
-        return acc_1;
-      }, new Set()));
+        if (typeof aValue === 'string' && typeof bValue === 'string') {
+          return sortDirectionToUse === 'asc' ? aValue.localeCompare(bValue) : bValue.localeCompare(aValue);
+        }
+        return 0;
+      });
     }
-    if (doubleClicked) {
-      navigateAfterSelection({
-        collectionSlug: item_2.relationTo,
-        docID: extractID(item_2.value)
+    if (subfoldersToSort) {
+      sortedSubfolders = [...subfoldersToSort].sort((a_0, b_0) => {
+        const aValue_0 = a_0.value[sortOnToUse];
+        const bValue_0 = b_0.value[sortOnToUse];
+        if (aValue_0 == null && bValue_0 == null) {
+          return 0;
+        }
+        if (aValue_0 == null) {
+          return sortDirectionToUse === 'asc' ? 1 : -1;
+        }
+        if (bValue_0 == null) {
+          return sortDirectionToUse === 'asc' ? -1 : 1;
+        }
+        if (typeof aValue_0 === 'string' && typeof bValue_0 === 'string') {
+          return sortDirectionToUse === 'asc' ? aValue_0.localeCompare(bValue_0) : bValue_0.localeCompare(aValue_0);
+        }
+        return 0;
+      });
+    }
+    return {
+      newURL,
+      sortedDocuments,
+      sortedSubfolders
+    };
+  }, [formatFolderURL, sortDirection, sortOn]);
+  const sortAndUpdateState = React.useCallback(({
+    documentsToSort: documentsToSort_0,
+    sortDirection: sortDirectionArg_0,
+    sortOn: sortOnArg_0,
+    subfoldersToSort: subfoldersToSort_0
+  }) => {
+    const {
+      newURL: newURL_0,
+      sortedDocuments: sortedDocuments_0,
+      sortedSubfolders: sortedSubfolders_0
+    } = sortItems({
+      documentsToSort: documentsToSort_0,
+      sortDirection: sortDirectionArg_0,
+      sortOn: sortOnArg_0,
+      subfoldersToSort: subfoldersToSort_0
+    });
+    if (sortedDocuments_0) {
+      setDocuments(sortedDocuments_0);
+    }
+    if (sortedSubfolders_0) {
+      setSubfolders(sortedSubfolders_0);
+    }
+    if (drawerDepth === 1) {
+      // not in a drawer (default is 1)
+      startRouteTransition(() => {
+        router.replace(newURL_0);
       });
     }
-  }, [selectedItemKeys, allowMultiSelection, lastSelectedIndex, subfolders, documents, navigateAfterSelection]);
+  }, [drawerDepth, router, sortItems, startRouteTransition]);
+  const separateItems = React.useCallback(items => {
+    return items.reduce((acc_0, item_2) => {
+      if (item_2.relationTo === folderCollectionSlug) {
+        acc_0.folders.push(item_2);
+      } else {
+        acc_0.documents.push(item_2);
+      }
+      return acc_0;
+    }, {
+      documents: [],
+      folders: []
+    });
+  }, [folderCollectionSlug]);
+  /**
+  * Used to remove items from the current state.
+  *
+  * Does NOT handle the request to the server.
+  * Useful when a document is deleted and it needs to be removed
+  * from the current state.
+  */
+  const removeItems = React.useCallback(items_0 => {
+    if (!items_0.length) {
+      return;
+    }
+    const separatedItems = separateItems(items_0);
+    if (separatedItems.documents.length) {
+      setDocuments(prevDocs => {
+        return prevDocs.filter(({
+          itemKey
+        }) => !separatedItems.documents.some(item_3 => item_3.itemKey === itemKey));
+      });
+    }
+    if (separatedItems.folders.length) {
+      setSubfolders(prevFolders => {
+        return prevFolders.filter(({
+          itemKey: itemKey_0
+        }) => !separatedItems.folders.some(item_4 => item_4.itemKey === itemKey_0));
+      });
+    }
+    clearSelections();
+  }, [clearSelections, separateItems, setDocuments, setSubfolders]);
+  /**
+  * Used to add items to the current state.
+  *
+  * Does NOT handle the request to the server.
+  * Used when a document needs to be added to the current state.
+  */
+  const addItems = React.useCallback(itemsToAdd => {
+    const {
+      items: items_1,
+      parentItems
+    } = itemsToAdd.reduce((acc_1, item_5) => {
+      const destinationFolderID = item_5.value.folderID || null;
+      if (item_5.value.folderID && item_5.value.folderID === activeFolderID || !activeFolderID && !item_5.value.folderID) {
+        acc_1.items.push(item_5);
+      }
+      if (parentFolderContext && (parentFolderContext.folderID && destinationFolderID === parentFolderContext.folderID || !parentFolderContext.folderID && !item_5.value.folderID)) {
+        acc_1.parentItems.push(item_5);
+      }
+      return acc_1;
+    }, {
+      items: [],
+      parentItems: []
+    });
+    if (parentItems.length) {
+      parentFolderContext.addItems(parentItems);
+    }
+    if (!items_1.length) {
+      return;
+    }
+    const separatedItems_0 = separateItems(items_1);
+    let documentsToSort_1 = undefined;
+    let subfoldersToSort_1 = undefined;
+    if (separatedItems_0.documents.length) {
+      documentsToSort_1 = [...documents, ...separatedItems_0.documents];
+    }
+    if (separatedItems_0.folders.length) {
+      subfoldersToSort_1 = [...subfolders, ...separatedItems_0.folders];
+    }
+    const {
+      sortedDocuments: sortedDocuments_1,
+      sortedSubfolders: sortedSubfolders_1
+    } = sortItems({
+      documentsToSort: documentsToSort_1,
+      subfoldersToSort: subfoldersToSort_1
+    });
+    const {
+      sortedDocuments: sortedAllDocuments,
+      sortedSubfolders: sortedAllSubfolders
+    } = sortItems({
+      documentsToSort: documentsToSort_1,
+      subfoldersToSort: subfoldersToSort_1
+    });
+    if (sortedDocuments_1) {
+      setDocuments(sortedDocuments_1);
+      setAllDocuments(sortedAllDocuments);
+    }
+    if (sortedSubfolders_1) {
+      setSubfolders(sortedSubfolders_1);
+      setAllSubfolders(sortedAllSubfolders);
+    }
+  }, [activeFolderID, documents, separateItems, sortItems, subfolders, parentFolderContext]);
   /**
-  * Makes requests to the server to update the folder field on passed in documents
+  * Used to move items to a different folder.
   *
-  * Might rewrite this in the future to return the promises so errors can be handled contextually
+  * Handles the request to the server and updates the state.
   */
-  const moveToFolder = React.useCallback(async args => {
+  const moveToFolder = React.useCallback(async args_0 => {
     const {
-      itemsToMove: items,
+      itemsToMove: items_2,
       toFolderID: toFolderID_0
-    } = args;
-    if (!items.length) {
+    } = args_0;
+    if (!items_2.length) {
       return;
     }
-    const movingCurrentFolder = items.length === 1 && items[0].relationTo === folderCollectionSlug && items[0].value.id === folderID;
+    const movingCurrentFolder = items_2.length === 1 && items_2[0].relationTo === folderCollectionSlug && items_2[0].value.id === activeFolderID;
     if (movingCurrentFolder) {
-      const req = await fetch(`${serverURL}${routes.api}/${folderCollectionSlug}/${folderID}?depth=0`, {
+      const req = await fetch(`${serverURL}${routes.api}/${folderCollectionSlug}/${activeFolderID}?depth=0`, {
         body: JSON.stringify({
           [folderFieldName]: toFolderID_0 || null
         }),
@@ -375,11 +669,36 @@ export function FolderProvider({
       });
       if (req.status !== 200) {
         toast.error(t('general:error'));
+      } else {
+        const updatedDoc = await req.json();
+        const folderRes = await getFolderData({
+          folderID: updatedDoc.id
+        });
+        setBreadcrumbs(folderRes?.breadcrumbs || []);
+        setSubfolders(folderRes?.subfolders || []);
+        setDocuments(folderRes?.documents || []);
+        setActiveFolderID(updatedDoc.id);
       }
+      setBreadcrumbs(prevBreadcrumbs => {
+        return prevBreadcrumbs.map(breadcrumb => {
+          if (breadcrumb.id === activeFolderID) {
+            return {
+              ...breadcrumb,
+              id: toFolderID_0
+            };
+          }
+          return breadcrumb;
+        });
+      });
     } else {
-      for (const [collectionSlug_0, ids] of Object.entries(groupItemIDsByRelation(items))) {
+      const movingToCurrentFolder = toFolderID_0 === activeFolderID;
+      const successfullyMovedFolderItems = [];
+      const successfullyMovedDocumentItems = [];
+      for (const [collectionSlug_1, ids] of Object.entries(groupItemIDsByRelation(items_2))) {
+        const collectionConfig = getEntityConfig({
+          collectionSlug: collectionSlug_1
+        });
         const query_0 = qs.stringify({
-          depth: 0,
           limit: 0,
           where: {
             id: {
@@ -390,7 +709,7 @@ export function FolderProvider({
           addQueryPrefix: true
         });
         try {
-          await fetch(`${serverURL}${routes.api}/${collectionSlug_0}${query_0}`, {
+          const res_0 = await fetch(`${serverURL}${routes.api}/${collectionSlug_1}${query_0}`, {
             body: JSON.stringify({
               [folderFieldName]: toFolderID_0 || null
             }),
@@ -400,6 +719,24 @@ export function FolderProvider({
             },
             method: 'PATCH'
           });
+          if (res_0.status === 200) {
+            const json = await res_0.json();
+            const {
+              docs
+            } = json;
+            const formattedItems = docs.map(doc => formatFolderOrDocumentItem({
+              folderFieldName,
+              isUpload: Boolean(collectionConfig.upload),
+              relationTo: collectionSlug_1,
+              useAsTitle: collectionConfig.admin.useAsTitle,
+              value: doc
+            }));
+            if (collectionSlug_1 === folderCollectionSlug) {
+              successfullyMovedFolderItems.push(...formattedItems);
+            } else {
+              successfullyMovedDocumentItems.push(...formattedItems);
+            }
+          }
         } catch (error) {
           toast.error(t('general:error'));
           // eslint-disable-next-line no-console
@@ -407,20 +744,88 @@ export function FolderProvider({
           continue;
         }
       }
+      if (movingToCurrentFolder) {
+        // need to sort if we are moving (adding) items to the current folder
+        const {
+          newURL: newURL_1,
+          sortedDocuments: sortedDocuments_2,
+          sortedSubfolders: sortedSubfolders_2
+        } = sortItems({
+          documentsToSort: successfullyMovedDocumentItems.length ? [...documents, ...successfullyMovedDocumentItems] : undefined,
+          subfoldersToSort: successfullyMovedFolderItems.length ? [...subfolders, ...successfullyMovedFolderItems] : undefined
+        });
+        if (sortedDocuments_2) {
+          setDocuments(sortedDocuments_2);
+        }
+        if (sortedSubfolders_2) {
+          setSubfolders(sortedSubfolders_2);
+        }
+        if (drawerDepth === 1 && newURL_1) {
+          // not in a drawer (default is 1)
+          router.replace(newURL_1);
+        }
+      } else {
+        // no need to sort, just remove the items from the current state
+        const filteredDocuments_0 = successfullyMovedDocumentItems.length ? documents.filter(({
+          itemKey: itemKey_1
+        }) => !successfullyMovedDocumentItems.some(item_6 => item_6.itemKey === itemKey_1)) : undefined;
+        const filteredSubfolders_0 = successfullyMovedFolderItems.length ? subfolders.filter(({
+          itemKey: itemKey_2
+        }) => !successfullyMovedFolderItems.some(item_7 => item_7.itemKey === itemKey_2)) : undefined;
+        if (filteredDocuments_0) {
+          setDocuments(filteredDocuments_0);
+        }
+        if (filteredSubfolders_0) {
+          setSubfolders(filteredSubfolders_0);
+        }
+      }
     }
     clearSelections();
-  }, [folderID, clearSelections, folderCollectionSlug, folderFieldName, routes.api, serverURL, t]);
-  // If a new component is provided, update the state so children can re-render with the new component
-  React.useEffect(() => {
-    if (InitialFolderResultsComponent) {
-      setFolderResultsComponent(InitialFolderResultsComponent);
+  }, [folderCollectionSlug, activeFolderID, clearSelections, serverURL, routes.api, folderFieldName, t, getFolderData, getEntityConfig, sortItems, documents, subfolders, drawerDepth, router]);
+  /**
+  * Used to rename a folder in the current state.
+  *
+  * Does NOT handle the request to the server.
+  * Used when the user renames a folder using the drawer
+  * and it needs to be updated in the current state.
+  */
+  const renameFolder = React.useCallback(({
+    folderID: updatedFolderID,
+    newName
+  }) => {
+    if (activeFolderID === updatedFolderID) {
+      // updating the curent folder
+      setBreadcrumbs(prevBreadcrumbs_0 => {
+        return prevBreadcrumbs_0.map(breadcrumb_0 => {
+          if (breadcrumb_0.id === updatedFolderID) {
+            return {
+              ...breadcrumb_0,
+              name: newName
+            };
+          }
+          return breadcrumb_0;
+        });
+      });
+    } else {
+      setSubfolders(prevFolders_0 => {
+        return prevFolders_0.map(folder => {
+          if (folder.value.id === updatedFolderID && folder.relationTo === folderCollectionSlug) {
+            return {
+              ...folder,
+              value: {
+                ...folder.value,
+                _folderOrDocumentTitle: newName
+              }
+            };
+          }
+          return folder;
+        });
+      });
     }
-  }, [InitialFolderResultsComponent]);
+  }, [folderCollectionSlug, setSubfolders, activeFolderID]);
   return /*#__PURE__*/_jsx(Context, {
     value: {
-      activeCollectionFolderSlugs: activeCollectionSlugs || allCollectionFolderSlugs,
-      allCollectionFolderSlugs,
-      allowCreateCollectionSlugs,
+      addItems,
       breadcrumbs,
       clearSelections,
       currentFolder: breadcrumbs?.[0]?.id ? formatFolderOrDocumentItem({
@@ -431,28 +836,32 @@ export function FolderProvider({
         value: breadcrumbs[breadcrumbs.length - 1]
       }) : null,
       documents,
+      filterItems,
       focusedRowIndex,
       folderCollectionConfig,
       folderCollectionSlug,
+      folderCollectionSlugs,
       folderFieldName,
-      folderID,
-      FolderResultsComponent,
-      getFolderRoute,
+      folderID: activeFolderID,
       getSelectedItems,
       isDragging,
-      itemKeysToMove: parentFolderContext.selectedItemKeys,
       lastSelectedIndex,
       moveToFolder,
       onItemClick,
       onItemKeyPress,
-      refineFolderData,
+      removeItems,
+      renameFolder,
       search,
-      selectedItemKeys,
+      selectedIndexes,
       setBreadcrumbs,
       setFocusedRowIndex,
+      setFolderID: setNewActiveFolderID,
       setIsDragging,
-      sort,
-      subfolders
+      sortAndUpdateState,
+      sortDirection,
+      sortOn,
+      subfolders,
+      visibleCollectionSlugs
     },
     children: children
   });