Change drag cursors to grab and show no-drag cursor if needed

src/components/drag/Draggable.js

@@ -8,7 +8,7 @@ function Draggable({ id, children, data }) {
   });
 
   const style = {
-    cursor: "pointer",
+    cursor: isDragging ? "grabbing" : "grab",
     touchAction: "none",
     opacity: isDragging ? 0.5 : undefined,
   };

src/contexts/TileDragContext.js

@@ -47,7 +47,7 @@ export function TileDragProvider({ onDragAdd, children }) {
 
   const [dragId, setDragId] = useState();
   const [overId, setOverId] = useState();
-  const [dragCursor, setDragCursor] = useState("pointer");
+  const [dragCursor, setDragCursor] = useState("grab");
 
   function handleDragStart({ active, over }) {
     setDragId(active.id);
@@ -63,9 +63,9 @@ export function TileDragProvider({ onDragAdd, children }) {
       if (over.id.startsWith(UNGROUP_ID_PREFIX)) {
         setDragCursor("alias");
       } else if (over.id.startsWith(ADD_TO_MAP_ID_PREFIX)) {
-        setDragCursor("copy");
+        setDragCursor(onDragAdd ? "copy" : "no-drop");
       } else {
-        setDragCursor("pointer");
+        setDragCursor("grabbing");
       }
     }
   }
@@ -73,7 +73,7 @@ export function TileDragProvider({ onDragAdd, children }) {
   function handleDragEnd({ active, over }) {
     setDragId();
     setOverId();
-    setDragCursor("pointer");
+    setDragCursor("grab");
     if (!active || !over || active.id === over.id) {
       return;
     }

src/modals/SelectMapModal.js

@@ -191,6 +191,18 @@ function SelectMapModal({
     onDone();
   }
 
+  const [canAddDraggedMap, setCanAddDraggedMap] = useState(false);
+  function handleGroupsSelect(groupIds) {
+    setSelectedGroupIds(groupIds);
+    if (groupIds.length === 1) {
+      // Only allow adding a map from dragging if there is a single group item selected
+      const group = findGroup(mapGroups, groupIds[0]);
+      setCanAddDraggedMap(group && group.type === "item");
+    } else {
+      setCanAddDraggedMap(false);
+    }
+  }
+
   function handleSelectClick() {
     if (isLoading) {
       return;
@@ -269,10 +281,12 @@ function SelectMapModal({
               <GroupProvider
                 groups={mapGroups}
                 onGroupsChange={updateMapGroups}
-                onGroupsSelect={setSelectedGroupIds}
+                onGroupsSelect={handleGroupsSelect}
                 disabled={!isOpen}
               >
-                <TileDragProvider onDragAdd={handleSelectClick}>
+                <TileDragProvider
+                  onDragAdd={canAddDraggedMap && handleSelectClick}
+                >
                   <TilesAddDroppable containerSize={modalSize} />
                   <TilesContainer>
                     <MapTiles
@@ -282,7 +296,9 @@ function SelectMapModal({
                     />
                   </TilesContainer>
                 </TileDragProvider>
-                <TileDragProvider onDragAdd={handleSelectClick}>
+                <TileDragProvider
+                  onDragAdd={canAddDraggedMap && handleSelectClick}
+                >
                   <TilesAddDroppable containerSize={modalSize} />
                   <TilesOverlay>
                     <MapTiles