@payloadcms/ui 3.39.0-internal.32c7661 → 3.39.0

package/dist/providers/Folders/index.js

@@ -0,0 +1,856 @@
+'use client';
+
+import { jsx as _jsx } from "react/jsx-runtime";
+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 { 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: () => {},
+  breadcrumbs: [],
+  clearSelections: () => {},
+  currentFolder: null,
+  documents: [],
+  filterItems: () => undefined,
+  focusedRowIndex: -1,
+  folderCollectionConfig: null,
+  folderCollectionSlug: '',
+  folderFieldName: 'folder',
+  folderID: undefined,
+  getSelectedItems: () => [],
+  isDragging: false,
+  lastSelectedIndex: null,
+  moveToFolder: () => Promise.resolve(undefined),
+  onItemClick: () => undefined,
+  onItemKeyPress: () => undefined,
+  removeItems: () => undefined,
+  renameFolder: () => undefined,
+  search: '',
+  selectedIndexes: new Set(),
+  setBreadcrumbs: () => {},
+  setFocusedRowIndex: () => -1,
+  setFolderID: () => null,
+  setIsDragging: () => false,
+  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({
+  allowMultiSelection = true,
+  breadcrumbs: _breadcrumbsFromProps = [],
+  children,
+  collectionSlug,
+  documents: allDocumentsFromProps = [],
+  filteredCollectionSlugs,
+  folderCollectionSlugs = [],
+  folderID: _folderIDFromProps = undefined,
+  search: _searchFromProps,
+  sort,
+  subfolders: subfoldersFromProps = []
+}) {
+  const {
+    config,
+    getEntityConfig
+  } = useConfig();
+  const folderFieldName = config.folders.fieldName;
+  const {
+    routes,
+    serverURL
+  } = config;
+  const drawerDepth = useDrawerDepth();
+  const {
+    t
+  } = useTranslation();
+  const router = useRouter();
+  const {
+    startRouteTransition
+  } = useRouteTransition();
+  const [folderCollectionConfig] = React.useState(() => config.collections.find(collection => collection.slug === config.folders.slug));
+  const folderCollectionSlug = folderCollectionConfig.slug;
+  const [isDragging, setIsDragging] = React.useState(false);
+  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);
+    setSelectedIndexes(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
+  }) => {
+    // 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
+    });
+    const folderDataReq = await fetch(`${serverURL}${routes.api}/${folderCollectionSlug}/populate-folder-data${query}`, {
+      credentials: 'include',
+      headers: {
+        'content-type': 'application/json'
+      }
+    });
+    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(selectedIndexes).reduce((acc, index) => {
+      const item = [...subfolders, ...documents][index];
+      if (item) {
+        acc.push(item);
+      }
+      return acc;
+    }, []);
+  }, [documents, selectedIndexes, subfolders]);
+  const navigateAfterSelection = React.useCallback(async ({
+    collectionSlug: collectionSlug_0,
+    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}`
+      }));
+    }
+  }, [setNewActiveFolderID, folderCollectionSlug, router, config.routes.admin]);
+  const onItemKeyPress = React.useCallback(async ({
+    event,
+    index: index_0,
+    item: item_0
+  }) => {
+    const {
+      code,
+      ctrlKey,
+      metaKey,
+      shiftKey
+    } = event;
+    const isShiftPressed = shiftKey;
+    const isCtrlPressed = ctrlKey || metaKey;
+    let newSelectedIndexes = selectedIndexes;
+    switch (code) {
+      case 'ArrowDown':
+        {
+          event.preventDefault();
+          const nextIndex_0 = Math.min(index_0 + 1, totalCount - 1);
+          setFocusedRowIndex(nextIndex_0);
+          if (isCtrlPressed) {
+            break;
+          }
+          if (allowMultiSelection && isShiftPressed) {
+            newSelectedIndexes = getShiftSelection({
+              selectFromIndex: Math.min(lastSelectedIndex, totalCount),
+              selectToIndex: Math.min(nextIndex_0, totalCount)
+            });
+          } else {
+            setLastSelectedIndex(nextIndex_0);
+            newSelectedIndexes = new Set([nextIndex_0]);
+          }
+          break;
+        }
+      case 'ArrowUp':
+        {
+          event.preventDefault();
+          const prevIndex_0 = Math.max(index_0 - 1, 0);
+          setFocusedRowIndex(prevIndex_0);
+          if (isCtrlPressed) {
+            break;
+          }
+          if (allowMultiSelection && isShiftPressed) {
+            newSelectedIndexes = getShiftSelection({
+              selectFromIndex: lastSelectedIndex,
+              selectToIndex: prevIndex_0
+            });
+          } else {
+            setLastSelectedIndex(prevIndex_0);
+            newSelectedIndexes = new Set([prevIndex_0]);
+          }
+          break;
+        }
+      case 'Enter':
+        {
+          if (selectedIndexes.size === 1) {
+            newSelectedIndexes = new Set([]);
+            setFocusedRowIndex(undefined);
+          }
+          break;
+        }
+      case 'Escape':
+        {
+          setFocusedRowIndex(undefined);
+          setSelectedIndexes(new Set([]));
+          newSelectedIndexes = new Set([]);
+          break;
+        }
+      case 'KeyA':
+        {
+          if (allowMultiSelection && isCtrlPressed) {
+            event.preventDefault();
+            setFocusedRowIndex(totalCount - 1);
+            newSelectedIndexes = new Set(Array.from({
+              length: totalCount
+            }, (_, i) => i));
+          }
+          break;
+        }
+      case 'Space':
+        {
+          if (allowMultiSelection && isShiftPressed) {
+            event.preventDefault();
+            newSelectedIndexes = getMetaSelection({
+              currentSelection: newSelectedIndexes,
+              toggleIndex: index_0
+            });
+            setLastSelectedIndex(index_0);
+          } else {
+            event.preventDefault();
+            newSelectedIndexes = new Set([index_0]);
+            setLastSelectedIndex(index_0);
+          }
+          break;
+        }
+      case 'Tab':
+        {
+          if (allowMultiSelection && isShiftPressed) {
+            const prevIndex = index_0 - 1;
+            if (prevIndex < 0 && newSelectedIndexes.size > 0) {
+              setFocusedRowIndex(prevIndex);
+            }
+          } else {
+            const nextIndex = index_0 + 1;
+            if (nextIndex === totalCount && newSelectedIndexes.size > 0) {
+              setFocusedRowIndex(totalCount - 1);
+            }
+          }
+          break;
+        }
+    }
+    setSelectedIndexes(newSelectedIndexes);
+    if (selectedIndexes.size === 1 && code === 'Enter') {
+      await navigateAfterSelection({
+        collectionSlug: item_0.relationTo,
+        docID: extractID(item_0.value)
+      });
+    }
+  }, [allowMultiSelection, lastSelectedIndex, navigateAfterSelection, selectedIndexes, totalCount]);
+  const onItemClick = React.useCallback(async ({
+    event: event_0,
+    index: index_1,
+    item: item_1
+  }) => {
+    let doubleClicked = false;
+    const isCtrlPressed_0 = event_0.ctrlKey || event_0.metaKey;
+    const isShiftPressed_0 = event_0.shiftKey;
+    let newSelectedIndexes_0 = new Set(selectedIndexes);
+    if (allowMultiSelection && isCtrlPressed_0) {
+      newSelectedIndexes_0 = getMetaSelection({
+        currentSelection: newSelectedIndexes_0,
+        toggleIndex: index_1
+      });
+    } else if (allowMultiSelection && isShiftPressed_0 && lastSelectedIndex !== undefined) {
+      newSelectedIndexes_0 = getShiftSelection({
+        selectFromIndex: lastSelectedIndex,
+        selectToIndex: index_1
+      });
+    } else if (allowMultiSelection && event_0.type === 'pointermove') {
+      // on drag start of an unselected item
+      if (!selectedIndexes.has(index_1)) {
+        newSelectedIndexes_0 = new Set([index_1]);
+      }
+      setLastSelectedIndex(index_1);
+    } else {
+      // Normal click - select single item
+      newSelectedIndexes_0 = new Set([index_1]);
+      const now = Date.now();
+      doubleClicked = now - lastClickTime.current < 400 && lastSelectedIndex === index_1;
+      lastClickTime.current = now;
+      setLastSelectedIndex(index_1);
+    }
+    if (newSelectedIndexes_0.size === 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 (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);
+      });
+    }
+  }, [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(items_1 => {
+    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);
+    }
+  }, [documents, separateItems, sortItems, subfolders]);
+  /**
+  * Used to move items to a different folder.
+  *
+  * Handles the request to the server and updates the state.
+  */
+  const moveToFolder = React.useCallback(async args_0 => {
+    const {
+      itemsToMove: items_2,
+      toFolderID: toFolderID_0
+    } = args_0;
+    if (!items_2.length) {
+      return;
+    }
+    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}/${activeFolderID}`, {
+        body: JSON.stringify({
+          [folderFieldName]: toFolderID_0 || null
+        }),
+        credentials: 'include',
+        headers: {
+          'content-type': 'application/json'
+        },
+        method: 'PATCH'
+      });
+      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
+        });
+        const query_0 = qs.stringify({
+          limit: 0,
+          where: {
+            id: {
+              in: ids
+            }
+          }
+        }, {
+          addQueryPrefix: true
+        });
+        try {
+          const res_0 = await fetch(`${serverURL}${routes.api}/${collectionSlug_1}${query_0}`, {
+            body: JSON.stringify({
+              [folderFieldName]: toFolderID_0 || null
+            }),
+            credentials: 'include',
+            headers: {
+              'content-type': 'application/json'
+            },
+            method: 'PATCH'
+          });
+          if (res_0.status === 200) {
+            const json = await res_0.json();
+            const {
+              docs
+            } = json;
+            const formattedItems = docs.map(doc => formatFolderOrDocumentItem({
+              folderFieldName: config.folders.fieldName,
+              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
+          console.error(error);
+          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_5 => item_5.itemKey === itemKey_1)) : undefined;
+        const filteredSubfolders_0 = successfullyMovedFolderItems.length ? subfolders.filter(({
+          itemKey: itemKey_2
+        }) => !successfullyMovedFolderItems.some(item_6 => item_6.itemKey === itemKey_2)) : undefined;
+        if (filteredDocuments_0) {
+          setDocuments(filteredDocuments_0);
+        }
+        if (filteredSubfolders_0) {
+          setSubfolders(filteredSubfolders_0);
+        }
+      }
+    }
+    clearSelections();
+  }, [folderCollectionSlug, activeFolderID, clearSelections, serverURL, routes.api, 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;
+        });
+      });
+    }
+  }, [folderCollectionSlug, setSubfolders, activeFolderID]);
+  return /*#__PURE__*/_jsx(Context, {
+    value: {
+      addItems,
+      breadcrumbs,
+      clearSelections,
+      currentFolder: breadcrumbs?.[0]?.id ? {
+        itemKey: `${folderCollectionSlug}-${activeFolderID}`,
+        relationTo: folderCollectionSlug,
+        value: {
+          id: activeFolderID,
+          _folderOrDocumentTitle: breadcrumbs[breadcrumbs.length - 1]?.name,
+          folderID: breadcrumbs[breadcrumbs.length - 2]?.id || null
+        }
+      } : null,
+      documents,
+      filterItems,
+      focusedRowIndex,
+      folderCollectionConfig,
+      folderCollectionSlug,
+      folderFieldName,
+      folderID: activeFolderID,
+      getSelectedItems,
+      isDragging,
+      lastSelectedIndex,
+      moveToFolder,
+      onItemClick,
+      onItemKeyPress,
+      removeItems,
+      renameFolder,
+      search,
+      selectedIndexes,
+      setBreadcrumbs,
+      setFocusedRowIndex,
+      setFolderID: setNewActiveFolderID,
+      setIsDragging,
+      sortAndUpdateState,
+      sortDirection,
+      sortOn,
+      subfolders,
+      visibleCollectionSlugs
+    },
+    children: children
+  });
+}
+export function useFolder() {
+  const context = React.use(Context);
+  if (context === undefined) {
+    throw new Error('useFolder must be used within a FolderProvider');
+  }
+  return context;
+}
+//# sourceMappingURL=index.js.map