@payloadcms/ui 3.48.0-canary.6 → 3.48.0

package/dist/providers/Folders/index.js

@@ -11,36 +11,39 @@ 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';
+import { groupItemIDsByRelation } from './groupItemIDsByRelation.js';
 const Context = /*#__PURE__*/React.createContext({
   activeCollectionFolderSlugs: [],
   allCollectionFolderSlugs: [],
   allowCreateCollectionSlugs: [],
   breadcrumbs: [],
+  checkIfItemIsDisabled: () => false,
   clearSelections: () => {},
   currentFolder: null,
   documents: [],
+  dragOverlayItem: undefined,
   focusedRowIndex: -1,
   folderCollectionConfig: null,
   folderCollectionSlug: '',
   folderFieldName: 'folder',
   folderID: undefined,
   FolderResultsComponent: null,
+  folderType: undefined,
   getFolderRoute: () => '',
   getSelectedItems: () => [],
   isDragging: false,
   itemKeysToMove: undefined,
-  lastSelectedIndex: null,
   moveToFolder: () => Promise.resolve(undefined),
   onItemClick: () => undefined,
   onItemKeyPress: () => undefined,
   refineFolderData: () => undefined,
   search: '',
+  selectedFolderCollections: undefined,
   selectedItemKeys: new Set(),
   setBreadcrumbs: () => {},
   setFocusedRowIndex: () => -1,
   setIsDragging: () => false,
-  sort: '_folderOrDocumentTitle',
+  sort: 'name',
   subfolders: []
 });
 export function FolderProvider({
@@ -57,7 +60,7 @@ export function FolderProvider({
   FolderResultsComponent: InitialFolderResultsComponent,
   onItemClick: onItemClickFromProps,
   search,
-  sort = '_folderOrDocumentTitle',
+  sort = 'name',
   subfolders
 }) {
   const parentFolderContext = useFolder();
@@ -76,6 +79,8 @@ export function FolderProvider({
   const {
     startRouteTransition
   } = useRouteTransition();
+  const currentlySelectedIndexes = React.useRef(new Set());
+  const [selectedFolderCollections, setSelectedFolderCollections] = React.useState([]);
   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;
@@ -85,14 +90,16 @@ export function FolderProvider({
   const [isDragging, setIsDragging] = React.useState(false);
   const [selectedItemKeys, setSelectedItemKeys] = React.useState(() => new Set());
   const [focusedRowIndex, setFocusedRowIndex] = React.useState(-1);
-  const [lastSelectedIndex, setLastSelectedIndex] = React.useState(null);
+  // This is used to determine what data to display on the drag overlay
+  const [dragOverlayItem, setDragOverlayItem] = React.useState();
   const [breadcrumbs, setBreadcrumbs] = React.useState(_breadcrumbsFromProps);
   const lastClickTime = React.useRef(null);
   const totalCount = subfolders.length + documents.length;
   const clearSelections = React.useCallback(() => {
     setFocusedRowIndex(-1);
     setSelectedItemKeys(new Set());
-    setLastSelectedIndex(undefined);
+    setDragOverlayItem(undefined);
+    currentlySelectedIndexes.current = new Set();
   }, []);
   const mergeQuery = React.useCallback((newQuery = {}) => {
     let page = 'page' in newQuery ? newQuery.page : currentQuery?.page;
@@ -103,6 +110,7 @@ export function FolderProvider({
       ...currentQuery,
       ...newQuery,
       page,
+      relationTo: 'relationTo' in newQuery ? newQuery.relationTo : currentQuery?.relationTo,
       search: 'search' in newQuery ? newQuery.search : currentQuery?.search,
       sort: 'sort' in newQuery ? newQuery.sort : currentQuery?.sort ?? undefined
     };
@@ -114,7 +122,10 @@ export function FolderProvider({
   }) => {
     if (updateURL) {
       const newQuery_0 = mergeQuery(query);
-      startRouteTransition(() => router.replace(`${qs.stringify(newQuery_0, {
+      startRouteTransition(() => router.replace(`${qs.stringify({
+        ...newQuery_0,
+        relationTo: JSON.stringify(newQuery_0.relationTo)
+      }, {
         addQueryPrefix: true
       })}`));
       setCurrentQuery(newQuery_0);
@@ -151,10 +162,12 @@ export function FolderProvider({
   }) => {
     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)));
+        startRouteTransition(() => {
+          router.push(getFolderRoute(docID));
+          clearSelections();
+        });
       } else if (collectionSlug) {
         // clicked on document, take the user to the documet view
         startRouteTransition(() => {
@@ -162,17 +175,97 @@ export function FolderProvider({
             adminRoute: config.routes.admin,
             path: `/collections/${collectionSlug}/${docID}`
           }));
+          clearSelections();
         });
       }
+    } else {
+      clearSelections();
     }
     if (typeof onItemClickFromProps === 'function') {
       onItemClickFromProps(getItem(`${collectionSlug}-${docID}`));
     }
   }, [clearSelections, config.routes.admin, drawerDepth, folderCollectionSlug, getFolderRoute, getItem, onItemClickFromProps, router, startRouteTransition]);
+  const handleShiftSelection = React.useCallback(targetIndex => {
+    const allItems = [...subfolders, ...documents];
+    // Find existing selection boundaries
+    const existingIndexes = allItems.reduce((acc_0, item_0, idx) => {
+      if (selectedItemKeys.has(item_0.itemKey)) {
+        acc_0.push(idx);
+      }
+      return acc_0;
+    }, []);
+    if (existingIndexes.length === 0) {
+      // No existing selection, just select target
+      return [targetIndex];
+    }
+    const firstSelectedIndex = Math.min(...existingIndexes);
+    const lastSelectedIndex = Math.max(...existingIndexes);
+    const isWithinBounds = targetIndex >= firstSelectedIndex && targetIndex <= lastSelectedIndex;
+    // Choose anchor based on whether we're contracting or extending
+    let anchorIndex = targetIndex;
+    if (isWithinBounds) {
+      // Contracting: if target is at a boundary, use target as anchor
+      // Otherwise, use furthest boundary to maintain opposite edge
+      if (targetIndex === firstSelectedIndex || targetIndex === lastSelectedIndex) {
+        anchorIndex = targetIndex;
+      } else {
+        const distanceToFirst = Math.abs(targetIndex - firstSelectedIndex);
+        const distanceToLast = Math.abs(targetIndex - lastSelectedIndex);
+        anchorIndex = distanceToFirst >= distanceToLast ? firstSelectedIndex : lastSelectedIndex;
+      }
+    } else {
+      // Extending: use closest boundary
+      const distanceToFirst_0 = Math.abs(targetIndex - firstSelectedIndex);
+      const distanceToLast_0 = Math.abs(targetIndex - lastSelectedIndex);
+      anchorIndex = distanceToFirst_0 <= distanceToLast_0 ? firstSelectedIndex : lastSelectedIndex;
+    }
+    // Create range from anchor to target
+    const startIndex = Math.min(anchorIndex, targetIndex);
+    const endIndex = Math.max(anchorIndex, targetIndex);
+    const newRangeIndexes = Array.from({
+      length: endIndex - startIndex + 1
+    }, (_, i) => startIndex + i);
+    if (isWithinBounds) {
+      // Contracting: replace with new range
+      return newRangeIndexes;
+    } else {
+      // Extending: union with existing
+      return [...new Set([...existingIndexes, ...newRangeIndexes])];
+    }
+  }, [subfolders, documents, selectedItemKeys]);
+  const updateSelections = React.useCallback(({
+    indexes
+  }) => {
+    const allItems_0 = [...subfolders, ...documents];
+    const {
+      newSelectedFolderCollections,
+      newSelectedItemKeys
+    } = allItems_0.reduce((acc_1, item_1, index) => {
+      if (indexes.includes(index)) {
+        acc_1.newSelectedItemKeys.add(item_1.itemKey);
+        if (item_1.relationTo === folderCollectionSlug) {
+          item_1.value.folderType?.forEach(collectionSlug_0 => {
+            if (!acc_1.newSelectedFolderCollections.includes(collectionSlug_0)) {
+              acc_1.newSelectedFolderCollections.push(collectionSlug_0);
+            }
+          });
+        } else {
+          if (!acc_1.newSelectedFolderCollections.includes(item_1.relationTo)) {
+            acc_1.newSelectedFolderCollections.push(item_1.relationTo);
+          }
+        }
+      }
+      return acc_1;
+    }, {
+      newSelectedFolderCollections: [],
+      newSelectedItemKeys: new Set()
+    });
+    setSelectedFolderCollections(newSelectedFolderCollections);
+    setSelectedItemKeys(newSelectedItemKeys);
+  }, [documents, folderCollectionSlug, subfolders]);
   const onItemKeyPress = React.useCallback(({
     event,
-    index,
-    item: item_0
+    item: currentItem
   }) => {
     const {
       code,
@@ -182,58 +275,58 @@ export function FolderProvider({
     } = event;
     const isShiftPressed = shiftKey;
     const isCtrlPressed = ctrlKey || metaKey;
-    let newSelectedIndexes = undefined;
+    const isCurrentlySelected = selectedItemKeys.has(currentItem.itemKey);
+    const allItems_1 = [...subfolders, ...documents];
+    const currentItemIndex = allItems_1.findIndex(item_2 => item_2.itemKey === currentItem.itemKey);
     switch (code) {
       case 'ArrowDown':
+      case 'ArrowLeft':
+      case 'ArrowRight':
+      case 'ArrowUp':
         {
           event.preventDefault();
-          const nextIndex_0 = Math.min(index + 1, totalCount - 1);
-          setFocusedRowIndex(nextIndex_0);
-          if (isCtrlPressed) {
+          if (currentItemIndex === -1) {
             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]);
+          const isBackward = code === 'ArrowLeft' || code === 'ArrowUp';
+          const newItemIndex = isBackward ? currentItemIndex - 1 : currentItemIndex + 1;
+          if (newItemIndex < 0 || newItemIndex > totalCount - 1) {
+            // out of bounds, keep current selection
+            return;
           }
-          break;
-        }
-      case 'ArrowUp':
-        {
-          event.preventDefault();
-          const prevIndex_0 = Math.max(index - 1, 0);
-          setFocusedRowIndex(prevIndex_0);
+          setFocusedRowIndex(newItemIndex);
           if (isCtrlPressed) {
             break;
           }
-          if (allowMultiSelection && isShiftPressed) {
-            newSelectedIndexes = getShiftSelection({
-              selectFromIndex: lastSelectedIndex,
-              selectToIndex: prevIndex_0
+          if (isShiftPressed && allowMultiSelection) {
+            const selectedIndexes = handleShiftSelection(newItemIndex);
+            updateSelections({
+              indexes: selectedIndexes
             });
-          } else {
-            setLastSelectedIndex(prevIndex_0);
-            newSelectedIndexes = new Set([prevIndex_0]);
+            return;
+          }
+          // Single selection without shift
+          if (!isShiftPressed) {
+            const newItem = allItems_1[newItemIndex];
+            setSelectedItemKeys(new Set([newItem.itemKey]));
           }
           break;
         }
       case 'Enter':
         {
           if (selectedItemKeys.size === 1) {
-            newSelectedIndexes = new Set([]);
             setFocusedRowIndex(undefined);
+            navigateAfterSelection({
+              collectionSlug: currentItem.relationTo,
+              docID: extractID(currentItem.value)
+            });
+            return;
           }
           break;
         }
       case 'Escape':
         {
-          setFocusedRowIndex(undefined);
-          newSelectedIndexes = new Set([]);
+          clearSelections();
           break;
         }
       case 'KeyA':
@@ -241,9 +334,11 @@ export function FolderProvider({
           if (allowMultiSelection && isCtrlPressed) {
             event.preventDefault();
             setFocusedRowIndex(totalCount - 1);
-            newSelectedIndexes = new Set(Array.from({
-              length: totalCount
-            }, (_, i) => i));
+            updateSelections({
+              indexes: Array.from({
+                length: totalCount
+              }, (__0, i_0) => i_0)
+            });
           }
           break;
         }
@@ -251,27 +346,38 @@ export function FolderProvider({
         {
           if (allowMultiSelection && isShiftPressed) {
             event.preventDefault();
-            newSelectedIndexes = getMetaSelection({
-              currentSelection: newSelectedIndexes,
-              toggleIndex: index
+            const allItems_2 = [...subfolders, ...documents];
+            updateSelections({
+              indexes: allItems_2.reduce((acc_2, item_3, idx_0) => {
+                if (item_3.itemKey === currentItem.itemKey) {
+                  if (isCurrentlySelected) {
+                    return acc_2;
+                  } else {
+                    acc_2.push(idx_0);
+                  }
+                } else if (selectedItemKeys.has(item_3.itemKey)) {
+                  acc_2.push(idx_0);
+                }
+                return acc_2;
+              }, [])
             });
-            setLastSelectedIndex(index);
           } else {
             event.preventDefault();
-            newSelectedIndexes = new Set([index]);
-            setLastSelectedIndex(index);
+            updateSelections({
+              indexes: isCurrentlySelected ? [] : [currentItemIndex]
+            });
           }
           break;
         }
       case 'Tab':
         {
           if (allowMultiSelection && isShiftPressed) {
-            const prevIndex = index - 1;
-            if (prevIndex < 0 && newSelectedIndexes?.size > 0) {
+            const prevIndex = currentItemIndex - 1;
+            if (prevIndex < 0 && selectedItemKeys?.size > 0) {
               setFocusedRowIndex(prevIndex);
             }
           } else {
-            const nextIndex = index + 1;
+            const nextIndex = currentItemIndex + 1;
             if (nextIndex === totalCount && selectedItemKeys.size > 0) {
               setFocusedRowIndex(totalCount - 1);
             }
@@ -279,75 +385,78 @@ export function FolderProvider({
           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({
-        collectionSlug: item_0.relationTo,
-        docID: extractID(item_0.value)
-      });
-    }
-  }, [allowMultiSelection, documents, lastSelectedIndex, navigateAfterSelection, subfolders, totalCount, selectedItemKeys]);
+  }, [selectedItemKeys, subfolders, documents, allowMultiSelection, handleShiftSelection, updateSelections, navigateAfterSelection, clearSelections, totalCount]);
   const onItemClick = React.useCallback(({
     event: event_0,
-    index: index_1,
-    item: item_2
+    item: clickedItem
   }) => {
     let doubleClicked = false;
     const isCtrlPressed_0 = event_0.ctrlKey || event_0.metaKey;
     const isShiftPressed_0 = event_0.shiftKey;
-    let newSelectedIndexes_0 = undefined;
+    const isCurrentlySelected_0 = selectedItemKeys.has(clickedItem.itemKey);
+    const allItems_3 = [...subfolders, ...documents];
+    const currentItemIndex_0 = allItems_3.findIndex(item_4 => item_4.itemKey === clickedItem.itemKey);
     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
+      event_0.preventDefault();
+      let overlayItemKey;
+      const indexes_0 = allItems_3.reduce((acc_3, item_5, idx_1) => {
+        if (item_5.itemKey === clickedItem.itemKey) {
+          if (isCurrentlySelected_0 && event_0.type !== 'pointermove') {
+            return acc_3;
+          } else {
+            acc_3.push(idx_1);
+            overlayItemKey = item_5.itemKey;
+          }
+        } else if (selectedItemKeys.has(item_5.itemKey)) {
+          acc_3.push(idx_1);
+        }
+        return acc_3;
+      }, []);
+      updateSelections({
+        indexes: indexes_0
       });
+      if (overlayItemKey) {
+        setDragOverlayItem(getItem(overlayItemKey));
+      }
+    } else if (allowMultiSelection && isShiftPressed_0) {
+      if (currentItemIndex_0 !== -1) {
+        const selectedIndexes_0 = handleShiftSelection(currentItemIndex_0);
+        updateSelections({
+          indexes: selectedIndexes_0
+        });
+      }
     } else if (allowMultiSelection && event_0.type === 'pointermove') {
       // on drag start of an unselected item
-      if (!selectedItemKeys.has(item_2.itemKey)) {
-        newSelectedIndexes_0 = new Set([index_1]);
+      if (!isCurrentlySelected_0) {
+        updateSelections({
+          indexes: allItems_3.reduce((acc_4, item_6, idx_2) => {
+            if (item_6.itemKey === clickedItem.itemKey) {
+              acc_4.push(idx_2);
+            }
+            return acc_4;
+          }, [])
+        });
       }
-      setLastSelectedIndex(index_1);
+      setDragOverlayItem(getItem(clickedItem.itemKey));
     } else {
       // Normal click - select single item
-      newSelectedIndexes_0 = new Set([index_1]);
       const now = Date.now();
-      doubleClicked = now - lastClickTime.current < 400 && lastSelectedIndex === index_1;
+      doubleClicked = now - lastClickTime.current < 400 && dragOverlayItem?.itemKey === clickedItem.itemKey;
       lastClickTime.current = now;
-      setLastSelectedIndex(index_1);
-    }
-    if (!newSelectedIndexes_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);
-        }
-        return acc_1;
-      }, new Set()));
+      if (!doubleClicked) {
+        updateSelections({
+          indexes: isCurrentlySelected_0 && selectedItemKeys.size === 1 ? [] : [currentItemIndex_0]
+        });
+      }
+      setDragOverlayItem(getItem(clickedItem.itemKey));
     }
     if (doubleClicked) {
       navigateAfterSelection({
-        collectionSlug: item_2.relationTo,
-        docID: extractID(item_2.value)
+        collectionSlug: clickedItem.relationTo,
+        docID: extractID(clickedItem.value)
       });
     }
-  }, [selectedItemKeys, allowMultiSelection, lastSelectedIndex, subfolders, documents, navigateAfterSelection]);
+  }, [selectedItemKeys, subfolders, documents, allowMultiSelection, dragOverlayItem, getItem, updateSelections, navigateAfterSelection, handleShiftSelection]);
   /**
   * Makes requests to the server to update the folder field on passed in documents
   *
@@ -377,7 +486,7 @@ export function FolderProvider({
         toast.error(t('general:error'));
       }
     } else {
-      for (const [collectionSlug_0, ids] of Object.entries(groupItemIDsByRelation(items))) {
+      for (const [collectionSlug_1, ids] of Object.entries(groupItemIDsByRelation(items))) {
         const query_0 = qs.stringify({
           depth: 0,
           limit: 0,
@@ -390,7 +499,7 @@ export function FolderProvider({
           addQueryPrefix: true
         });
         try {
-          await fetch(`${serverURL}${routes.api}/${collectionSlug_0}${query_0}`, {
+          await fetch(`${serverURL}${routes.api}/${collectionSlug_1}${query_0}`, {
             body: JSON.stringify({
               [folderFieldName]: toFolderID_0 || null
             }),
@@ -410,6 +519,53 @@ export function FolderProvider({
     }
     clearSelections();
   }, [folderID, clearSelections, folderCollectionSlug, folderFieldName, routes.api, serverURL, t]);
+  const checkIfItemIsDisabled = React.useCallback(item_7 => {
+    function folderAcceptsItem({
+      item: item_8,
+      selectedFolderCollections: selectedFolderCollections_0
+    }) {
+      if (!item_8.value.folderType || Array.isArray(item_8.value.folderType) && item_8.value.folderType.length === 0) {
+        // Enable folder that accept all collections
+        return false;
+      }
+      if (selectedFolderCollections_0.length === 0) {
+        // If no collections are selected, enable folders that accept all collections
+        return Boolean(item_8.value.folderType || item_8.value.folderType.length > 0);
+      }
+      // Disable folders that do not accept all of the selected collections
+      return selectedFolderCollections_0.some(slug => {
+        return !item_8.value.folderType.includes(slug);
+      });
+    }
+    if (isDragging) {
+      const isSelected = selectedItemKeys.has(item_7.itemKey);
+      if (isSelected) {
+        return true;
+      } else if (item_7.relationTo === folderCollectionSlug) {
+        return folderAcceptsItem({
+          item: item_7,
+          selectedFolderCollections
+        });
+      } else {
+        // Non folder items are disabled on drag
+        return true;
+      }
+    } else if (parentFolderContext?.selectedItemKeys?.size) {
+      // Disable selected items from being navigated to in move to drawer
+      if (parentFolderContext.selectedItemKeys.has(item_7.itemKey)) {
+        return true;
+      }
+      // Moving items to folder
+      if (item_7.relationTo === folderCollectionSlug) {
+        return folderAcceptsItem({
+          item: item_7,
+          selectedFolderCollections: parentFolderContext.selectedFolderCollections
+        });
+      }
+      // If the item is not a folder, it is disabled on move
+      return true;
+    }
+  }, [selectedFolderCollections, isDragging, selectedItemKeys, folderCollectionSlug, parentFolderContext?.selectedFolderCollections, parentFolderContext?.selectedItemKeys]);
   // If a new component is provided, update the state so children can re-render with the new component
   React.useEffect(() => {
     if (InitialFolderResultsComponent) {
@@ -422,8 +578,9 @@ export function FolderProvider({
       allCollectionFolderSlugs,
       allowCreateCollectionSlugs,
       breadcrumbs,
+      checkIfItemIsDisabled,
       clearSelections,
-      currentFolder: breadcrumbs?.[0]?.id ? formatFolderOrDocumentItem({
+      currentFolder: breadcrumbs?.[breadcrumbs.length - 1]?.id !== undefined ? formatFolderOrDocumentItem({
         folderFieldName,
         isUpload: false,
         relationTo: folderCollectionSlug,
@@ -431,22 +588,24 @@ export function FolderProvider({
         value: breadcrumbs[breadcrumbs.length - 1]
       }) : null,
       documents,
+      dragOverlayItem,
       focusedRowIndex,
       folderCollectionConfig,
       folderCollectionSlug,
       folderFieldName,
       folderID,
       FolderResultsComponent,
+      folderType: breadcrumbs?.[breadcrumbs.length - 1]?.folderType,
       getFolderRoute,
       getSelectedItems,
       isDragging,
       itemKeysToMove: parentFolderContext.selectedItemKeys,
-      lastSelectedIndex,
       moveToFolder,
       onItemClick,
       onItemKeyPress,
       refineFolderData,
       search,
+      selectedFolderCollections,
       selectedItemKeys,
       setBreadcrumbs,
       setFocusedRowIndex,