@payloadcms/ui 3.42.0 → 3.43.0-internal.c5bbc84

package/dist/providers/Folders/index.js

@@ -1,82 +1,68 @@
 'use client';
 
 import { jsx as _jsx } from "react/jsx-runtime";
-import { useRouter } from 'next/navigation.js';
+import { useRouter, useSearchParams } 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({
-  addItems: () => {},
+  activeCollectionFolderSlugs: [],
+  allCollectionFolderSlugs: [],
+  allowCreateCollectionSlugs: [],
   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,
-  removeItems: () => undefined,
-  renameFolder: () => undefined,
+  refineFolderData: () => undefined,
   search: '',
-  selectedIndexes: new Set(),
+  selectedItemKeys: new Set(),
   setBreadcrumbs: () => {},
   setFocusedRowIndex: () => -1,
-  setFolderID: () => null,
   setIsDragging: () => false,
-  sortAndUpdateState: () => undefined,
-  sortDirection: 'asc',
-  sortOn: '_folderOrDocumentTitle',
-  subfolders: [],
-  visibleCollectionSlugs: []
+  sort: '_folderOrDocumentTitle',
+  subfolders: []
 });
-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,
-  collectionSlug,
-  documents: allDocumentsFromProps = [],
-  filteredCollectionSlugs,
-  folderCollectionSlugs = [],
+  documents,
   folderFieldName,
-  folderID: _folderIDFromProps = undefined,
-  search: _searchFromProps,
-  sort,
-  subfolders: subfoldersFromProps = []
+  folderID,
+  FolderResultsComponent: InitialFolderResultsComponent,
+  onItemClick: onItemClickFromProps,
+  search,
+  sort = '_folderOrDocumentTitle',
+  subfolders
 }) {
   const parentFolderContext = useFolder();
   const {
-    config,
-    getEntityConfig
+    config
   } = useConfig();
   const {
     routes,
@@ -90,154 +76,102 @@ 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 [selectedIndexes, setSelectedIndexes] = React.useState(() => new Set());
+  const [selectedItemKeys, setSelectedItemKeys] = 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);
-    setSelectedIndexes(new Set());
+    setSelectedItemKeys(new Set());
     setLastSelectedIndex(undefined);
   }, []);
-  /**
-  * Used to populate drawer data.
-  *
-  * This is used when the user navigates to a folder.
-  */
-  const getFolderData = React.useCallback(async ({
-    folderID,
-    search: _search = 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
   }) => {
-    // 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
+    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: ''
     });
-    const folderDataReq = await fetch(`${serverURL}${routes.api}/${folderCollectionSlug}/populate-folder-data${query}`, {
-      credentials: 'include',
-      headers: {
-        'content-type': 'application/json'
-      }
+    return formatAdminURL({
+      adminRoute: config.routes.admin,
+      path: `${baseFolderPath}${toFolderID ? `/${toFolderID}` : ''}${qs.stringify(newQuery_1, {
+        addQueryPrefix: true
+      })}`,
+      serverURL: config.serverURL
     });
-    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]);
+  }, [baseFolderPath, config.routes.admin, config.serverURL, mergeQuery]);
+  const getItem = React.useCallback(itemKey => {
+    return [...subfolders, ...documents].find(doc => doc.itemKey === itemKey);
+  }, [documents, subfolders]);
   const getSelectedItems = React.useCallback(() => {
-    return Array.from(selectedIndexes).reduce((acc, index) => {
-      const item = [...subfolders, ...documents][index];
+    return Array.from(selectedItemKeys).reduce((acc, itemKey_0) => {
+      const item = getItem(itemKey_0);
       if (item) {
         acc.push(item);
       }
       return acc;
     }, []);
-  }, [documents, selectedIndexes, subfolders]);
-  const navigateAfterSelection = React.useCallback(async ({
-    collectionSlug: collectionSlug_0,
+  }, [selectedItemKeys, getItem]);
+  const navigateAfterSelection = React.useCallback(({
+    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}`
-      }));
+    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}`
+          }));
+        });
+      }
     }
-  }, [setNewActiveFolderID, folderCollectionSlug, router, config.routes.admin]);
-  const onItemKeyPress = React.useCallback(async ({
+    if (typeof onItemClickFromProps === 'function') {
+      onItemClickFromProps(getItem(`${collectionSlug}-${docID}`));
+    }
+  }, [clearSelections, config.routes.admin, drawerDepth, folderCollectionSlug, getFolderRoute, getItem, onItemClickFromProps, router, startRouteTransition]);
+  const onItemKeyPress = React.useCallback(({
     event,
-    index: index_0,
+    index,
     item: item_0
   }) => {
     const {
@@ -248,12 +182,12 @@ export function FolderProvider({
     } = event;
     const isShiftPressed = shiftKey;
     const isCtrlPressed = ctrlKey || metaKey;
-    let newSelectedIndexes = selectedIndexes;
+    let newSelectedIndexes = undefined;
     switch (code) {
       case 'ArrowDown':
         {
           event.preventDefault();
-          const nextIndex_0 = Math.min(index_0 + 1, totalCount - 1);
+          const nextIndex_0 = Math.min(index + 1, totalCount - 1);
           setFocusedRowIndex(nextIndex_0);
           if (isCtrlPressed) {
             break;
@@ -272,7 +206,7 @@ export function FolderProvider({
       case 'ArrowUp':
         {
           event.preventDefault();
-          const prevIndex_0 = Math.max(index_0 - 1, 0);
+          const prevIndex_0 = Math.max(index - 1, 0);
           setFocusedRowIndex(prevIndex_0);
           if (isCtrlPressed) {
             break;
@@ -290,7 +224,7 @@ export function FolderProvider({
         }
       case 'Enter':
         {
-          if (selectedIndexes.size === 1) {
+          if (selectedItemKeys.size === 1) {
             newSelectedIndexes = new Set([]);
             setFocusedRowIndex(undefined);
           }
@@ -299,7 +233,6 @@ export function FolderProvider({
       case 'Escape':
         {
           setFocusedRowIndex(undefined);
-          setSelectedIndexes(new Set([]));
           newSelectedIndexes = new Set([]);
           break;
         }
@@ -320,49 +253,57 @@ export function FolderProvider({
             event.preventDefault();
             newSelectedIndexes = getMetaSelection({
               currentSelection: newSelectedIndexes,
-              toggleIndex: index_0
+              toggleIndex: index
             });
-            setLastSelectedIndex(index_0);
+            setLastSelectedIndex(index);
           } else {
             event.preventDefault();
-            newSelectedIndexes = new Set([index_0]);
-            setLastSelectedIndex(index_0);
+            newSelectedIndexes = new Set([index]);
+            setLastSelectedIndex(index);
           }
           break;
         }
       case 'Tab':
         {
           if (allowMultiSelection && isShiftPressed) {
-            const prevIndex = index_0 - 1;
-            if (prevIndex < 0 && newSelectedIndexes.size > 0) {
+            const prevIndex = index - 1;
+            if (prevIndex < 0 && newSelectedIndexes?.size > 0) {
               setFocusedRowIndex(prevIndex);
             }
           } else {
-            const nextIndex = index_0 + 1;
-            if (nextIndex === totalCount && newSelectedIndexes.size > 0) {
+            const nextIndex = index + 1;
+            if (nextIndex === totalCount && selectedItemKeys.size > 0) {
               setFocusedRowIndex(totalCount - 1);
             }
           }
           break;
         }
     }
-    setSelectedIndexes(newSelectedIndexes);
-    if (selectedIndexes.size === 1 && code === 'Enter') {
-      await navigateAfterSelection({
+    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({
         collectionSlug: item_0.relationTo,
         docID: extractID(item_0.value)
       });
     }
-  }, [allowMultiSelection, lastSelectedIndex, navigateAfterSelection, selectedIndexes, totalCount]);
-  const onItemClick = React.useCallback(async ({
+  }, [allowMultiSelection, documents, lastSelectedIndex, navigateAfterSelection, subfolders, totalCount, selectedItemKeys]);
+  const onItemClick = React.useCallback(({
     event: event_0,
     index: index_1,
-    item: item_1
+    item: item_2
   }) => {
     let doubleClicked = false;
     const isCtrlPressed_0 = event_0.ctrlKey || event_0.metaKey;
     const isShiftPressed_0 = event_0.shiftKey;
-    let newSelectedIndexes_0 = new Set(selectedIndexes);
+    let newSelectedIndexes_0 = undefined;
     if (allowMultiSelection && isCtrlPressed_0) {
       newSelectedIndexes_0 = getMetaSelection({
         currentSelection: newSelectedIndexes_0,
@@ -375,7 +316,7 @@ export function FolderProvider({
       });
     } else if (allowMultiSelection && event_0.type === 'pointermove') {
       // on drag start of an unselected item
-      if (!selectedIndexes.has(index_1)) {
+      if (!selectedItemKeys.has(item_2.itemKey)) {
         newSelectedIndexes_0 = new Set([index_1]);
       }
       setLastSelectedIndex(index_1);
@@ -387,277 +328,42 @@ export function FolderProvider({
       lastClickTime.current = now;
       setLastSelectedIndex(index_1);
     }
-    if (newSelectedIndexes_0.size === 0) {
+    if (!newSelectedIndexes_0) {
       setFocusedRowIndex(undefined);
     } else {
       setFocusedRowIndex(index_1);
     }
-    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;
-        }
-        if (typeof aValue === 'string' && typeof bValue === 'string') {
-          return sortDirectionToUse === 'asc' ? aValue.localeCompare(bValue) : bValue.localeCompare(aValue);
-        }
-        return 0;
-      });
-    }
-    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 (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);
         }
-        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);
+        return acc_1;
+      }, new Set()));
     }
-    if (sortedSubfolders_0) {
-      setSubfolders(sortedSubfolders_0);
-    }
-    if (drawerDepth === 1) {
-      // not in a drawer (default is 1)
-      startRouteTransition(() => {
-        router.replace(newURL_0);
-      });
-    }
-  }, [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));
+    if (doubleClicked) {
+      navigateAfterSelection({
+        collectionSlug: item_2.relationTo,
+        docID: extractID(item_2.value)
       });
     }
-    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]);
+  }, [selectedItemKeys, allowMultiSelection, lastSelectedIndex, subfolders, documents, navigateAfterSelection]);
   /**
-  * Used to move items to a different folder.
+  * Makes requests to the server to update the folder field on passed in documents
   *
-  * Handles the request to the server and updates the state.
+  * Might rewrite this in the future to return the promises so errors can be handled contextually
   */
-  const moveToFolder = React.useCallback(async args_0 => {
+  const moveToFolder = React.useCallback(async args => {
     const {
-      itemsToMove: items_2,
+      itemsToMove: items,
       toFolderID: toFolderID_0
-    } = args_0;
-    if (!items_2.length) {
+    } = args;
+    if (!items.length) {
       return;
     }
-    const movingCurrentFolder = items_2.length === 1 && items_2[0].relationTo === folderCollectionSlug && items_2[0].value.id === activeFolderID;
+    const movingCurrentFolder = items.length === 1 && items[0].relationTo === folderCollectionSlug && items[0].value.id === folderID;
     if (movingCurrentFolder) {
-      const req = await fetch(`${serverURL}${routes.api}/${folderCollectionSlug}/${activeFolderID}?depth=0`, {
+      const req = await fetch(`${serverURL}${routes.api}/${folderCollectionSlug}/${folderID}?depth=0`, {
         body: JSON.stringify({
           [folderFieldName]: toFolderID_0 || null
         }),
@@ -669,36 +375,11 @@ 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 {
-      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
-        });
+      for (const [collectionSlug_0, ids] of Object.entries(groupItemIDsByRelation(items))) {
         const query_0 = qs.stringify({
+          depth: 0,
           limit: 0,
           where: {
             id: {
@@ -709,7 +390,7 @@ export function FolderProvider({
           addQueryPrefix: true
         });
         try {
-          const res_0 = await fetch(`${serverURL}${routes.api}/${collectionSlug_1}${query_0}`, {
+          await fetch(`${serverURL}${routes.api}/${collectionSlug_0}${query_0}`, {
             body: JSON.stringify({
               [folderFieldName]: toFolderID_0 || null
             }),
@@ -719,24 +400,6 @@ 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
@@ -744,88 +407,20 @@ 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();
-  }, [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;
-        });
-      });
+  }, [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, setSubfolders, activeFolderID]);
+  }, [InitialFolderResultsComponent]);
   return /*#__PURE__*/_jsx(Context, {
     value: {
-      addItems,
+      activeCollectionFolderSlugs: activeCollectionSlugs || allCollectionFolderSlugs,
+      allCollectionFolderSlugs,
+      allowCreateCollectionSlugs,
       breadcrumbs,
       clearSelections,
       currentFolder: breadcrumbs?.[0]?.id ? formatFolderOrDocumentItem({
@@ -836,32 +431,28 @@ export function FolderProvider({
         value: breadcrumbs[breadcrumbs.length - 1]
       }) : null,
       documents,
-      filterItems,
       focusedRowIndex,
       folderCollectionConfig,
       folderCollectionSlug,
-      folderCollectionSlugs,
       folderFieldName,
-      folderID: activeFolderID,
+      folderID,
+      FolderResultsComponent,
+      getFolderRoute,
       getSelectedItems,
       isDragging,
+      itemKeysToMove: parentFolderContext.selectedItemKeys,
       lastSelectedIndex,
       moveToFolder,
       onItemClick,
       onItemKeyPress,
-      removeItems,
-      renameFolder,
+      refineFolderData,
       search,
-      selectedIndexes,
+      selectedItemKeys,
       setBreadcrumbs,
       setFocusedRowIndex,
-      setFolderID: setNewActiveFolderID,
       setIsDragging,
-      sortAndUpdateState,
-      sortDirection,
-      sortOn,
-      subfolders,
-      visibleCollectionSlugs
+      sort,
+      subfolders
     },
     children: children
   });