scroll containers on drag

Author: ahwelgemoed

apps/web-widgets/drag-and-drop-widget/Example_1.md

@@ -3,11 +3,11 @@
 ### [Live Demo](https://dnd-lts-sandbox.mxapps.io/p/example_1?profile=Responsive)
 
 To show how to use the widget I will be using the examples in the test project. You can find the Example Project
-[here](https://github.com/mendixlabs/app-services-components/releases/download/draganddropwidget%403.0.0/dnd_lts.mpk) or
+[here](https://github.com/mendixlabs/app-services-components/releases/download/draganddropwidget%403.0.2/dnd_lts.mpk) or
 if you only want the Helpers
-[here](https://github.com/mendixlabs/app-services-components/releases/download/draganddropwidget%403.0.0/DnD_HelpersModule.mpk)
+[here](https://github.com/mendixlabs/app-services-components/releases/download/draganddropwidget%403.0.2/DnD_HelpersModule.mpk)
 and the Examples
-[here](https://github.com/mendixlabs/app-services-components/releases/download/draganddropwidget%403.0.0/DnD_Examples.mpk)
+[here](https://github.com/mendixlabs/app-services-components/releases/download/draganddropwidget%403.0.2/DnD_Examples.mpk)
 
 Get a ☕️ and lets go...
 

apps/web-widgets/drag-and-drop-widget/Example_2.md

@@ -3,11 +3,11 @@
 ### [Live Demo](https://dnd-lts-sandbox.mxapps.io/p/example_2?profile=Responsive)
 
 To show how to use the widget I will be using the examples in the test project. You can find the Example Project
-[here](https://github.com/mendixlabs/app-services-components/releases/download/draganddropwidget%403.0.0/dnd_lts.mpk) or
+[here](https://github.com/mendixlabs/app-services-components/releases/download/draganddropwidget%403.0.2/dnd_lts.mpk) or
 if you only want the Helpers
-[here](https://github.com/mendixlabs/app-services-components/releases/download/draganddropwidget%403.0.0/DnD_HelpersModule.mpk)
+[here](https://github.com/mendixlabs/app-services-components/releases/download/draganddropwidget%403.0.2/DnD_HelpersModule.mpk)
 and the Examples
-[here](https://github.com/mendixlabs/app-services-components/releases/download/draganddropwidget%403.0.0/DnD_Examples.mpk)
+[here](https://github.com/mendixlabs/app-services-components/releases/download/draganddropwidget%403.0.2/DnD_Examples.mpk)
 
 Get a ☕️ and lets go...
 

apps/web-widgets/drag-and-drop-widget/Example_3.md

@@ -3,11 +3,11 @@
 ### [Live Demo](https://dnd-lts-sandbox.mxapps.io/p/example_3?profile=Responsive)
 
 To show how to use the widget I will be using the examples in the test project. You can find the Example Project
-[here](https://github.com/mendixlabs/app-services-components/releases/download/draganddropwidget%403.0.0/dnd_lts.mpk) or
+[here](https://github.com/mendixlabs/app-services-components/releases/download/draganddropwidget%403.0.2/dnd_lts.mpk) or
 if you only want the Helpers
-[here](https://github.com/mendixlabs/app-services-components/releases/download/draganddropwidget%403.0.0/DnD_HelpersModule.mpk)
+[here](https://github.com/mendixlabs/app-services-components/releases/download/draganddropwidget%403.0.2/DnD_HelpersModule.mpk)
 and the Examples
-[here](https://github.com/mendixlabs/app-services-components/releases/download/draganddropwidget%403.0.0/DnD_Examples.mpk)
+[here](https://github.com/mendixlabs/app-services-components/releases/download/draganddropwidget%403.0.2/DnD_Examples.mpk)
 
 Get a ☕️ and lets go...
 

apps/web-widgets/drag-and-drop-widget/README.md

@@ -22,9 +22,9 @@ We have a playable Demo [here](https://dnd-lts-sandbox.mxapps.io/index.html?prof
 ## How to use the Widget via examples
 
 To show how to use the widget I will be using the examples in the test project. You can find the Example Project
-[here](https://github.com/mendixlabs/app-services-components/releases/download/draganddropwidget%403.0.0/dnd_lts.mpk) or
+[here](https://github.com/mendixlabs/app-services-components/releases/download/draganddropwidget%403.0.2/dnd_lts.mpk) or
 if you only want the Helpers
-[here](https://github.com/mendixlabs/app-services-components/releases/download/draganddropwidget%403.0.0/DnD_HelpersModule.mpk)
+[here](https://github.com/mendixlabs/app-services-components/releases/download/draganddropwidget%403.0.2/DnD_HelpersModule.mpk)
 and the Examples [here](https://dnd-lts-sandbox.mxapps.io/p/example_1?profile=Responsive)
 
 ## Examples

apps/web-widgets/drag-and-drop-widget/package.json

@@ -1,7 +1,7 @@
 {
     "name": "draganddropwidget",
     "widgetName": "Draganddropwidget",
-    "version": "3.0.1",
+    "version": "3.0.2",
     "description": "My widget description",
     "copyright": "2022 Mendix Technology BV",
     "author": "ahwelgemoed",

apps/web-widgets/drag-and-drop-widget/src/Draganddropwidget.tsx

@@ -38,15 +38,17 @@ const DndWidget: FunctionComponent<DraganddropwidgetContainerProps> = props => {
     const [isOverIndex, setIsOverIndex] = useState<null | number>(null);
 
     /**
-     * We give a Child comp a way to get its parents parent. NOTE: This will only ever work 2n
+     * We give a Child comp a way to get its parents parent. NOTE: This will only ever work 2n and does not recalculate on Window resize
      */
     useEffect(() => {
         if (uuidParent) {
             const myParent = document.querySelectorAll(`[data-uuid="${uuidParent}"]`);
-            // @ts-ignore
-            const containerName = myParent[0] && myParent[0].attributes["data-containing-uuid"].value;
-            if (containerName) {
-                parentContainerName.current = document.getElementById(containerName) as HTMLDivElement;
+            if (myParent.length) {
+                // @ts-ignore
+                const containerName = myParent[0]?.attributes["data-containing-uuid"].value;
+                if (containerName) {
+                    parentContainerName.current = document.getElementById(containerName) as HTMLDivElement;
+                }
             }
         }
     }, [uuidParent]);

apps/web-widgets/drag-and-drop-widget/src/package.xml

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="utf-8" ?>
 <package xmlns="http://www.mendix.com/package/1.0/">
-    <clientModule name="Draganddropwidget" version="3.0.1" xmlns="http://www.mendix.com/clientModule/1.0/">
+    <clientModule name="Draganddropwidget" version="3.0.2" xmlns="http://www.mendix.com/clientModule/1.0/">
         <widgetFiles>
             <widgetFile path="Draganddropwidget.xml"/>
         </widgetFiles>