chore: docs

Author: mathuo

packages/docs/docs/advanced/nested.mdx

@@ -8,6 +8,6 @@ import { CodeRunner } from '@site/src/components/ui/codeRunner';
 # Nested Dockviews
 
 You can safely create multiple dockview instances within one page and nest dockviews within other dockviews.
-If you wish to interact with the drop event from one dockview instance in another dockview instance you can implement the `showDndOverlay` and `onDidDrop` props on `DockviewReact`.
+If you wish to interact with the drop event from one dockview instance in another dockview instance you can implement the `api.onUnhandledDragOverEvent` and `onDidDrop` props on `DockviewReact`.
 
 <CodeRunner id="dockview/nested" />

packages/docs/docs/core/dnd/dragAndDrop.mdx

@@ -43,7 +43,7 @@ For interaction with the Drag events directly the component exposes some method
 ```tsx
 /**
  * called when an ondrop event which does not originate from the dockview libray and
- * passes the showDndOverlay condition occurs
+ * passes the onUnhandledDragOverEvent condition
  **/
 const onDidDrop = (event: DockviewDropEvent) => {
     const { group } = event;
@@ -58,22 +58,24 @@ const onDidDrop = (event: DockviewDropEvent) => {
     });
 };
 
-/**
- * called for drag over events which do not originate from the dockview library
- * allowing the developer to decide where the overlay should be shown for a
- * particular drag event
- **/
-const showDndOverlay = (event: DockviewDndOverlayEvent) => {
-    return true;
-};
+const onReady = (event: DockviewReadyEvent) => {
+
+  /**
+   * called for drag over events which do not originate from the dockview library
+   * allowing the developer to decide where the overlay should be shown for a
+   * particular drag event
+   **/
+  api.onUnhandledDragOverEvent(event => {
+    event.accept();
+  });
+}
 
 return (
     <DockviewReact
         components={components}
         onReady={onReady}
         className="dockview-theme-abyss"
         onDidDrop={onDidDrop}
-        showDndOverlay={showDndOverlay}
     />
 );
 ```

packages/docs/old_docs_DELETE_SOON/components/paneview/paneview.mdx

@@ -221,7 +221,7 @@ If you provide the `PaneviewReact` component with the prop `onDidDrop` you will
 
 You can safely create multiple paneview instances within one page. They will not interact with each other by default.
 
-If you wish to interact with the drop event from one paneview instance in another paneview instance you can implement the `showDndOverlay` and `onDidDrop` props on `PaneviewReact`.
+If you wish to interact with the drop event from one paneview instance in another paneview instance you can implement the `api.onUnhandledDragOverEvent` and `onDidDrop` props on `PaneviewReact`.
 
 As an example see how dragging a header from one control to another will only trigger an interactable event for the developer if the checkbox is enabled.
 

packages/docs/sandboxes/react/dockview/dnd-external/src/app.tsx

@@ -113,7 +113,12 @@ const DndDockview = (props: { renderVisibleOnly: boolean; theme?: string }) => {
             }
         });
 
+        const disposable = api.onUnhandledDragOverEvent((event) => {
+            event.accept();
+        });
+
         return () => {
+            disposable.dispose();
             panelDragDisposable.dispose();
             groupDragDisposable.dispose();
         };
@@ -134,10 +139,6 @@ const DndDockview = (props: { renderVisibleOnly: boolean; theme?: string }) => {
         });
     };
 
-    const showDndOverlay = (event: DockviewDndOverlayEvent) => {
-        return true;
-    };
-
     const onDrop = (event: React.DragEvent) => {
         const dataTransfer = event.dataTransfer;
 
@@ -179,7 +180,6 @@ const DndDockview = (props: { renderVisibleOnly: boolean; theme?: string }) => {
                 onReady={onReady}
                 className={`${props.theme || 'dockview-theme-abyss'}`}
                 onDidDrop={onDidDrop}
-                showDndOverlay={showDndOverlay}
                 rootOverlayModel={{
                     size: { value: 100, type: 'pixels' },
                     activationSize: { value: 5, type: 'percentage' },

packages/docs/templates/dockview/dnd-external/react/src/app.tsx

@@ -113,6 +113,10 @@ const DndDockview = (props: { renderVisibleOnly: boolean; theme?: string }) => {
             }
         });
 
+        const disposable = api.onUnhandledDragOverEvent((event) => {
+            event.accept();
+        });
+
         return () => {
             panelDragDisposable.dispose();
             groupDragDisposable.dispose();
@@ -134,10 +138,6 @@ const DndDockview = (props: { renderVisibleOnly: boolean; theme?: string }) => {
         });
     };
 
-    const showDndOverlay = (event: DockviewDndOverlayEvent) => {
-        return true;
-    };
-
     const onDrop = (event: React.DragEvent) => {
         const dataTransfer = event.dataTransfer;
 
@@ -179,7 +179,6 @@ const DndDockview = (props: { renderVisibleOnly: boolean; theme?: string }) => {
                 onReady={onReady}
                 className={`${props.theme || 'dockview-theme-abyss'}`}
                 onDidDrop={onDidDrop}
-                showDndOverlay={showDndOverlay}
                 rootOverlayModel={{
                     size: { value: 100, type: 'pixels' },
                     activationSize: { value: 5, type: 'percentage' },

packages/docs/templates/dockview/nested/react/src/app.tsx

@@ -70,23 +70,11 @@ const NestedDockview = (props: { theme?: string }) => {
         });
     };
 
-    const showDndOverlay = (event: DockviewDndOverlayEvent) => {
-        // console.log(event.getData());
-
-        return false;
-    };
-
-    const onDidDrop = (event: DockviewDidDropEvent) => {
-        // event.getData();
-    };
-
     return (
         <DockviewReact
             onReady={onReady}
             components={components}
             className={`${props.theme || 'dockview-theme-abyss'}`}
-            showDndOverlay={showDndOverlay}
-            onDidDrop={onDidDrop}
         />
     );
 };