[Lens] Refactor drag and drop

examples/unified_field_list_examples/public/example_drop_zone.tsx

@@ -14,8 +14,8 @@
  * Side Public License, v 1.
  */
 
-import React, { useContext, useMemo } from 'react';
-import { DragContext, DragDrop, DropOverlayWrapper, DropType } from '@kbn/dom-drag-drop';
+import React, { useMemo } from 'react';
+import { DragDrop, DropOverlayWrapper, DropType, useDragDropContext } from '@kbn/dom-drag-drop';
 import { EuiEmptyPrompt, EuiPanel } from '@elastic/eui';
 
 const DROP_PROPS = {
@@ -34,8 +34,8 @@ export interface ExampleDropZoneProps {
 }
 
 export const ExampleDropZone: React.FC<ExampleDropZoneProps> = ({ onDropField }) => {
-  const dragDropContext = useContext(DragContext);
-  const draggingFieldName = dragDropContext.dragging?.id;
+  const [{ dragging }] = useDragDropContext();
+  const draggingFieldName = dragging?.id;
 
   const onDroppingField = useMemo(() => {
     if (!draggingFieldName) {

examples/unified_field_list_examples/public/field_list_sidebar.tsx

@@ -14,10 +14,10 @@
  * Side Public License, v 1.
  */
 
-import React, { useCallback, useContext, useMemo, useRef } from 'react';
+import React, { useCallback, useMemo, useRef } from 'react';
 import type { DataView } from '@kbn/data-views-plugin/public';
 import { generateFilters } from '@kbn/data-plugin/public';
-import { ChildDragDropProvider, DragContext } from '@kbn/dom-drag-drop';
+import { ChildDragDropProvider, useDragDropContext } from '@kbn/dom-drag-drop';
 import {
   UnifiedFieldListSidebarContainer,
   type UnifiedFieldListSidebarContainerProps,
@@ -54,7 +54,7 @@ export const FieldListSidebar: React.FC<FieldListSidebarProps> = ({
   onAddFieldToWorkspace,
   onRemoveFieldFromWorkspace,
 }) => {
-  const dragDropContext = useContext(DragContext);
+  const dragDropContext = useDragDropContext();
   const unifiedFieldListContainerRef = useRef<UnifiedFieldListSidebarContainerApi>(null);
   const filterManager = services.data?.query?.filterManager;
 
@@ -80,7 +80,7 @@ export const FieldListSidebar: React.FC<FieldListSidebarProps> = ({
   }, [unifiedFieldListContainerRef]);
 
   return (
-    <ChildDragDropProvider {...dragDropContext}>
+    <ChildDragDropProvider value={dragDropContext}>
       <UnifiedFieldListSidebarContainer
         ref={unifiedFieldListContainerRef}
         variant="responsive"

packages/kbn-dom-drag-drop/README.md

@@ -9,21 +9,21 @@ We aren't using EUI or another library, due to the fact that Lens visualizations
 First, place a RootDragDropProvider at the root of your application.
 
 ```js
-<RootDragDropProvider onTrackUICounterEvent={...}>
+<RootDragDropProvider customMiddleware={...}>
   ... your app here ...
 </RootDragDropProvider>
 ```
 
 If you have a child React application (e.g. a visualization), you will need to pass the drag / drop context down into it. This can be obtained like so:
 
 ```js
-const context = useContext(DragContext);
+const context = useDragDropContext();
 ```
 
-In your child application, place a `ChildDragDropProvider` at the root of that, and spread the context into it:
+In your child application, place a `ChildDragDropProvider` at the root of that, and assign the context into it:
 
 ```js
-<ChildDragDropProvider {...context}>... your child app here ...</ChildDragDropProvider>
+<ChildDragDropProvider value={context}>... your child app here ...</ChildDragDropProvider>
 ```
 
 This enables your child application to share the same drag / drop context as the root application.
@@ -49,7 +49,7 @@ To enable dragging an item, use `DragDrop` with both a `draggable` and a `value`
 To enable dropping, use `DragDrop` with both a `dropTypes` attribute that should be an array with at least one value and an `onDrop` handler attribute. `dropType` should only be truthy if is an item being dragged, and if a drop of the dragged item is supported.
 
 ```js
-const { dragging } = useContext(DragContext);
+const [ dndState ] = useDragDropContext()
 
 return (
   <DragDrop
@@ -69,13 +69,13 @@ return (
 To create a reordering group, surround the elements from the same group with a `ReorderProvider`:
 
 ```js
-<ReorderProvider id="groupId">... elements from one group here ...</ReorderProvider>
+<ReorderProvider>... elements from one group here ...</ReorderProvider>
 ```
 
 The children `DragDrop` components must have props defined as in the example:
 
 ```js
-<ReorderProvider id="groupId">
+<ReorderProvider>
   <div className="field-list">
     {fields.map((f) => (
       <DragDrop

packages/kbn-dom-drag-drop/index.ts

@@ -8,16 +8,18 @@
 
 export {
   type DragDropIdentifier,
+  type DragContextValue,
   type DragContextState,
   type DropType,
   type DraggingIdentifier,
+  type DragDropAction,
+  type DropOverlayWrapperProps,
   DragDrop,
-  DragContext,
+  useDragDropContext,
   RootDragDropProvider,
   ChildDragDropProvider,
   ReorderProvider,
   DropOverlayWrapper,
-  type DropOverlayWrapperProps,
 } from './src';
 
 export { DropTargetSwapDuplicateCombine } from './src/drop_targets';