From e5f09c775c3e2e9f8a68cb3e7c6ee902e6afc027 Mon Sep 17 00:00:00 2001
From: Michael Aubry <michaelaubry1991@gmail.com>
Date: Sat, 5 Jun 2021 12:13:42 -0700
Subject: [PATCH 1/3] Allow onDrag to return controlled boolean

This is useful when you need to manage setState from refs
---
 lib/Draggable.js | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/lib/Draggable.js b/lib/Draggable.js
index e42b47bb..c7b3a788 100644
--- a/lib/Draggable.js
+++ b/lib/Draggable.js
@@ -296,6 +296,8 @@ class Draggable extends React.Component<DraggableProps, DraggableState> {
 
     // Short-circuit if user's callback killed it.
     const shouldUpdate = this.props.onDrag(e, uiData);
+    
+    if (shouldUpdate?.controlled) return;
     if (shouldUpdate === false) return false;
 
     this.setState(newState);

From bef70500f55a735b77b6f133c06007d997282d87 Mon Sep 17 00:00:00 2001
From: Michael Aubry <michaelaubry1991@gmail.com>
Date: Sat, 5 Jun 2021 12:16:59 -0700
Subject: [PATCH 2/3] Enable onDrag to return controlled boolean

When controlling state from refs return before state gets set inside handleDrag
---
 lib/DraggableCore.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/lib/DraggableCore.js b/lib/DraggableCore.js
index c5a3da8f..e9d8dd60 100644
--- a/lib/DraggableCore.js
+++ b/lib/DraggableCore.js
@@ -357,6 +357,9 @@ export default class DraggableCore extends React.Component<DraggableCoreProps, D
 
     // Call event handler. If it returns explicit false, trigger end.
     const shouldUpdate = this.props.onDrag(e, coreEvent);
+          
+    if (shouldUpdate?.controlled) return;
+
     if (shouldUpdate === false || this.mounted === false) {
       try {
         // $FlowIgnore

From ba2d0d2d10c050bee71b7a51bfc19ec3e706b390 Mon Sep 17 00:00:00 2001
From: bokuweb <bokuweb12@gmail.com>
Date: Sun, 6 Jun 2021 15:23:59 -0700
Subject: [PATCH 3/3] update typings module name

---
 package.json       |  2 +-
 typings/index.d.ts | 91 ++++++++++++++++++++++++++--------------------
 2 files changed, 53 insertions(+), 40 deletions(-)

diff --git a/package.json b/package.json
index 79ac1d0e..64dfba98 100644
--- a/package.json
+++ b/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "react-draggable",
+  "name": "react-draggable-motionbox",
   "version": "4.4.3",
   "description": "React draggable component",
   "main": "build/cjs/cjs.js",
diff --git a/typings/index.d.ts b/typings/index.d.ts
index ad7f22ba..04e82a1e 100644
--- a/typings/index.d.ts
+++ b/typings/index.d.ts
@@ -1,28 +1,29 @@
-declare module 'react-draggable' {
-  import * as React from 'react';
+declare module "react-draggable-motionbox" {
+  import * as React from "react";
 
   export interface DraggableBounds {
-    left?: number
-    right?: number
-    top?: number
-    bottom?: number
+    left?: number;
+    right?: number;
+    top?: number;
+    bottom?: number;
   }
 
   export interface DraggableProps extends DraggableCoreProps {
-    axis: 'both' | 'x' | 'y' | 'none',
-    bounds: DraggableBounds | string | false ,
-    defaultClassName: string,
-    defaultClassNameDragging: string,
-    defaultClassNameDragged: string,
-    defaultPosition: ControlPosition,
-    positionOffset: PositionOffsetControlPosition,
-    position: ControlPosition
+    axis: "both" | "x" | "y" | "none";
+    bounds: DraggableBounds | string | false;
+    defaultClassName: string;
+    defaultClassNameDragging: string;
+    defaultClassNameDragged: string;
+    defaultPosition: ControlPosition;
+    positionOffset: PositionOffsetControlPosition;
+    position: ControlPosition;
   }
 
-  export type DraggableEvent = React.MouseEvent<HTMLElement | SVGElement>
+  export type DraggableEvent =
+    | React.MouseEvent<HTMLElement | SVGElement>
     | React.TouchEvent<HTMLElement | SVGElement>
     | MouseEvent
-    | TouchEvent
+    | TouchEvent;
 
   export type DraggableEventHandler = (
     e: DraggableEvent,
@@ -30,37 +31,49 @@ declare module 'react-draggable' {
   ) => void | false;
 
   export interface DraggableData {
-    node: HTMLElement,
-    x: number, y: number,
-    deltaX: number, deltaY: number,
-    lastX: number, lastY: number
+    node: HTMLElement;
+    x: number;
+    y: number;
+    deltaX: number;
+    deltaY: number;
+    lastX: number;
+    lastY: number;
   }
 
-  export type ControlPosition = {x: number, y: number};
+  export type ControlPosition = { x: number; y: number };
 
-  export type PositionOffsetControlPosition = {x: number|string, y: number|string};
+  export type PositionOffsetControlPosition = {
+    x: number | string;
+    y: number | string;
+  };
 
   export interface DraggableCoreProps {
-    allowAnyClick: boolean,
-    cancel: string,
-    disabled: boolean,
-    enableUserSelectHack: boolean,
-    offsetParent: HTMLElement,
-    grid: [number, number],
-    handle: string,
-    nodeRef?: React.RefObject<HTMLElement>,
-    onStart: DraggableEventHandler,
-    onDrag: DraggableEventHandler,
-    onStop: DraggableEventHandler,
-    onMouseDown: (e: MouseEvent) => void,
-    scale: number
+    allowAnyClick: boolean;
+    cancel: string;
+    disabled: boolean;
+    enableUserSelectHack: boolean;
+    offsetParent: HTMLElement;
+    grid: [number, number];
+    handle: string;
+    nodeRef?: React.RefObject<HTMLElement>;
+    onStart: DraggableEventHandler;
+    onDrag: DraggableEventHandler;
+    onStop: DraggableEventHandler;
+    onMouseDown: (e: MouseEvent) => void;
+    scale: number;
   }
 
-  export default class Draggable extends React.Component<Partial<DraggableProps>, {}> {
-    static defaultProps : DraggableProps;
+  export default class Draggable extends React.Component<
+    Partial<DraggableProps>,
+    {}
+  > {
+    static defaultProps: DraggableProps;
   }
 
-  export class DraggableCore extends React.Component<Partial<DraggableCoreProps>, {}> {
-    static defaultProps : DraggableCoreProps;
+  export class DraggableCore extends React.Component<
+    Partial<DraggableCoreProps>,
+    {}
+  > {
+    static defaultProps: DraggableCoreProps;
   }
 }