diff --git a/types/react-beautiful-dnd/index.d.ts b/types/react-beautiful-dnd/index.d.ts
index fbbf91bef5bf78..753c10fd069d43 100644
--- a/types/react-beautiful-dnd/index.d.ts
+++ b/types/react-beautiful-dnd/index.d.ts
@@ -10,6 +10,7 @@
 //                 Arun George <https://github.com/aruniverse>
 //                 Nick Garlis <https://github.com/nickgarlis>
 //                 Brian Powers <https://github.com/brianspowers>
+//                 Declan Warn <https://github.com/declan-warn>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
 // TypeScript Version: 2.8
 // Refer to https://github.com/atlassian/react-beautiful-dnd/blob/master/src/types.js
@@ -180,24 +181,24 @@ export interface Scrollable {
 export interface PlaceholderInSubject {
     // might not actually be increased by
     // placeholder if there is no required space
-    increasedBy?: Position | undefined;
+    increasedBy: Position | null | undefined;
     placeholderSize: Position;
     // max scroll before placeholder added
     // will be null if there was no frame
-    oldFrameMaxScroll?: Position | undefined;
+    oldFrameMaxScroll: Position | null | undefined;
 }
 
 export interface DroppableSubject {
     // raw, unchanging
     page: BoxModel;
-    withPlaceholder?: PlaceholderInSubject | undefined;
+    withPlaceholder: PlaceholderInSubject | null | undefined;
     // The hitbox for a droppable
     // - page margin box
     // - with scroll changes
     // - with any additional droppable placeholder
     // - clipped by frame
     // The subject will be null if the hit area is completely empty
-    active?: Rect | undefined;
+    active: Rect | null | undefined;
 }
 
 export interface DroppableDimension {
@@ -212,7 +213,7 @@ export interface DroppableDimension {
     // relative to the page
     page: BoxModel;
     // The container of the droppable
-    frame?: Scrollable | undefined;
+    frame: Scrollable | null | undefined;
     // what is visible through the frame
     subject: DroppableSubject;
 }
@@ -283,7 +284,7 @@ export interface Displaced {
 export interface DragImpact {
     displaced: DisplacementGroups;
     displacedBy: DisplacedBy;
-    at?: ImpactLocation | undefined;
+    at: ImpactLocation | null | undefined;
 }
 
 export interface ClientPositions {
@@ -316,11 +317,6 @@ export interface DragPositions {
 
 export interface DraggableRubric {
     draggableId: DraggableId;
-    mode: MovementMode;
-    source: DraggableLocation;
-}
-
-export interface DragStart extends BeforeCapture {
     type: TypeId;
     source: DraggableLocation;
 }
@@ -340,9 +336,9 @@ export interface DragStart extends DraggableRubric {
 
 export interface DragUpdate extends DragStart {
     // may not have any destination (drag to nowhere)
-    destination?: DraggableLocation | undefined;
+    destination: DraggableLocation | null | undefined;
     // populated when a draggable is dragging over another in combine mode
-    combine?: Combine | undefined;
+    combine: Combine | null | undefined;
 }
 
 export type DropReason = 'DROP' | 'CANCEL';
@@ -392,6 +388,7 @@ export interface DroppablePublish {
     droppableId: DroppableId;
     scroll: Position;
 }
+
 export interface Published {
     additions: DraggableDimension[];
     removals: DraggableId[];
@@ -407,7 +404,7 @@ export interface CompletedDrag {
 
 export interface IdleState {
     phase: 'IDLE';
-    completed?: CompletedDrag | undefined;
+    completed: CompletedDrag | null | undefined;
     shouldFlush: boolean;
 }
 
@@ -426,9 +423,9 @@ export interface DraggingState {
     // when there is a fixed list we want to opt out of this behaviour
     isWindowScrollAllowed: boolean;
     // if we need to jump the scroll (keyboard dragging)
-    scrollJumpRequest?: Position | undefined;
+    scrollJumpRequest: Position | null | undefined;
     // whether or not draggable movements should be animated
-    forceShouldAnimate?: boolean | undefined;
+    forceShouldAnimate: boolean | null | undefined;
 }
 
 // While dragging we can enter into a bulk collection phase
@@ -550,12 +547,9 @@ export type Sensor = (api: SensorAPI) => void;
  *  DragDropContext
  */
 
-export interface DragDropContextProps {
-    onBeforeCapture?(before: BeforeCapture): void;
-    onBeforeDragStart?(initial: DragStart): void;
-    onDragStart?(initial: DragStart, provided: ResponderProvided): void;
-    onDragUpdate?(initial: DragUpdate, provided: ResponderProvided): void;
-    onDragEnd(result: DropResult, provided: ResponderProvided): void;
+// Refer to https://github.com/atlassian/react-beautiful-dnd/blob/master/src/view/drag-drop-context/drag-drop-context.jsx
+
+export interface DragDropContextProps extends Responders {
     children: React.ReactNode | null;
     dragHandleUsageInstructions?: string | undefined;
     nonce?: string | undefined;
@@ -563,29 +557,31 @@ export interface DragDropContextProps {
     sensors?: Sensor[] | undefined;
 }
 
-export class DragDropContext extends React.Component<DragDropContextProps> { }
+export class DragDropContext extends React.Component<DragDropContextProps> {}
 
 /**
  *  Droppable
  */
 
+// Refer to https://github.com/atlassian/react-beautiful-dnd/blob/master/src/view/droppable/droppable-types.js
+
 export interface DroppableProvidedProps {
     // used for shared global styles
-    'data-rbd-droppable-context-id': string;
+    'data-rbd-droppable-context-id': ContextId;
     // Used to lookup. Currently not used for drag and drop lifecycle
     'data-rbd-droppable-id': DroppableId;
 }
 
 export interface DroppableProvided {
-    innerRef: (element: HTMLElement | null) => any;
-    placeholder?: React.ReactElement<HTMLElement> | null | undefined;
+    innerRef: (element: HTMLElement | null) => void;
+    placeholder: React.ReactNode;
     droppableProps: DroppableProvidedProps;
 }
 
 export interface DroppableStateSnapshot {
     isDraggingOver: boolean;
-    draggingOverWith?: DraggableId | undefined;
-    draggingFromThisWith?: DraggableId | undefined;
+    draggingOverWith: DraggableId | null | undefined;
+    draggingFromThisWith: DraggableId | null | undefined;
     isUsingPlaceholder: boolean;
 }
 
@@ -598,27 +594,61 @@ export interface DroppableProps {
     direction?: Direction | undefined;
     ignoreContainerClipping?: boolean | undefined;
     renderClone?: DraggableChildrenFn | undefined;
-    getContainerForClone?: (() => React.ReactElement<HTMLElement>) | undefined;
+    getContainerForClone?: (() => HTMLElement) | undefined;
     children(provided: DroppableProvided, snapshot: DroppableStateSnapshot): React.ReactElement<HTMLElement>;
 }
 
-export class Droppable extends React.Component<DroppableProps> { }
+export class Droppable extends React.Component<DroppableProps> {}
 
 /**
  *  Draggable
  */
 
+// Refer to https://github.com/atlassian/react-beautiful-dnd/blob/master/src/view/draggable/draggable-types.js
+
 export interface DropAnimation {
     duration: number;
     curve: string;
     moveTo: Position;
-    opacity?: number | undefined;
-    scale?: number | undefined;
+    /**
+     * This value will actually be `null` instead of `undefined`.
+     *
+     * The type is fudged because `null` is not compatible with the
+     * `React.CSSProperties` type.
+     *
+     * The `style` prop should interpret `null` and `undefined` the same way.
+     */
+    opacity: number | undefined;
+    /**
+     * This value will actually be `null` instead of `undefined`.
+     *
+     * The type is fudged because `null` is not compatible with the
+     * `React.CSSProperties` type.
+     *
+     * The `style` prop should interpret `null` and `undefined` the same way.
+     */
+    scale: number | undefined;
 }
 
 export interface NotDraggingStyle {
-    transform?: string | undefined;
-    transition?: 'none' | undefined;
+    /**
+     * This value will actually be `null` instead of `undefined`.
+     *
+     * The type is fudged because `null` is not compatible with the
+     * `React.CSSProperties` type.
+     *
+     * The `style` prop should interpret `null` and `undefined` the same way.
+     */
+    transform: string | undefined;
+    /**
+     * This value will actually be `null` instead of `undefined`.
+     *
+     * The type is fudged because `null` is not compatible with the
+     * `React.CSSProperties` type.
+     *
+     * The `style` prop should interpret `null` and `undefined` the same way.
+     */
+    transition: 'none' | undefined;
 }
 
 export interface DraggingStyle {
@@ -628,10 +658,26 @@ export interface DraggingStyle {
     boxSizing: 'border-box';
     width: number;
     height: number;
-    transition: 'none';
-    transform?: string | undefined;
+    transition: string;
+    /**
+     * This value will actually be `null` instead of `undefined`.
+     *
+     * The type is fudged because `null` is not compatible with the
+     * `React.CSSProperties` type.
+     *
+     * The `style` prop should interpret `null` and `undefined` the same way.
+     */
+    transform: string | undefined;
     zIndex: number;
-    opacity?: number | undefined;
+    /**
+     * This value will actually be `null` instead of `undefined`.
+     *
+     * The type is fudged because `null` is not compatible with the
+     * `React.CSSProperties` type.
+     *
+     * The `style` prop should interpret `null` and `undefined` the same way.
+     */
+    opacity: number | undefined;
     pointerEvents: 'none';
 }
 
@@ -657,22 +703,23 @@ export interface DraggableProvidedDragHandleProps {
 
 export interface DraggableProvided {
     // will be removed after move to react 16
-    innerRef: (element?: HTMLElement | null) => any;
+    innerRef: (element: HTMLElement | null) => void;
     draggableProps: DraggableProvidedDraggableProps;
-    dragHandleProps?: DraggableProvidedDragHandleProps | undefined;
+    dragHandleProps: DraggableProvidedDragHandleProps | null | undefined;
 }
 
 export interface DraggableStateSnapshot {
     isDragging: boolean;
     isDropAnimating: boolean;
-    dropAnimation?: DropAnimation | undefined;
-    draggingOver?: DroppableId | undefined;
+    isClone: boolean;
+    dropAnimation: DropAnimation | null | undefined;
+    draggingOver: DroppableId | null | undefined;
     // the id of a draggable that you are combining with
-    combineWith?: DraggableId | undefined;
+    combineWith: DraggableId | null | undefined;
     // a combine target is being dragged over by
-    combineTargetFor?: DraggableId | undefined;
+    combineTargetFor: DraggableId | null | undefined;
     // What type of movement is being done: 'FLUID' or 'SNAP'
-    mode?: MovementMode | undefined;
+    mode: MovementMode | null | undefined;
 }
 
 export type DraggableChildrenFn = (
@@ -690,7 +737,7 @@ export interface DraggableProps {
     shouldRespectForcePress?: boolean | undefined;
 }
 
-export class Draggable extends React.Component<DraggableProps> { }
+export class Draggable extends React.Component<DraggableProps> {}
 
 export function resetServerContext(): void;
 
diff --git a/types/react-beautiful-dnd/react-beautiful-dnd-tests.tsx b/types/react-beautiful-dnd/react-beautiful-dnd-tests.tsx
index 34a77a9da6fda5..754a98a826d50f 100644
--- a/types/react-beautiful-dnd/react-beautiful-dnd-tests.tsx
+++ b/types/react-beautiful-dnd/react-beautiful-dnd-tests.tsx
@@ -2,6 +2,9 @@ import * as React from 'react';
 import {
     DragDropContext,
     Draggable,
+    DraggableProvided,
+    DraggableRubric,
+    DraggableStateSnapshot,
     DragStart,
     DragUpdate,
     Droppable,
@@ -35,12 +38,6 @@ const reorder = (list: any[], startIndex: number, endIndex: number) => {
     return result;
 };
 
-const getItemStyle = (isDragging: boolean, draggableStyle: any) => ({
-    userSelect: 'none',
-    background: isDragging ? 'lightgreen' : 'grey',
-    ...draggableStyle,
-});
-
 const getListStyle = (snapshot: DroppableStateSnapshot) => ({
     background: snapshot.draggingFromThisWith ? 'lightpink' : snapshot.isDraggingOver ? 'lightblue' : 'lightgrey',
     width: 250,
@@ -57,6 +54,7 @@ class App extends React.Component<{}, AppState> {
     constructor(props: any) {
         super(props);
         this.onDragEnd = this.onDragEnd.bind(this);
+        this.renderItem = this.renderItem.bind(this);
     }
 
     onBeforeDragStart(dragStart: DragStart) {
@@ -89,6 +87,28 @@ class App extends React.Component<{}, AppState> {
         this.setState({ items });
     }
 
+    renderItem(provided: DraggableProvided, snapshot: DraggableStateSnapshot, rubric: DraggableRubric) {
+        const { innerRef, draggableProps, dragHandleProps } = provided;
+        const item = this.state.items[rubric.source.index];
+        return (
+            <div>
+                <div
+                    ref={innerRef}
+                    {...draggableProps}
+                    {...dragHandleProps}
+                    style={{
+                        ...draggableProps.style,
+                        userSelect: 'none',
+                        background: snapshot.isDragging ? 'lightgreen' : 'grey',
+                        boxShadow: snapshot.isClone ? 'inset 0px 0px 0px 2px blue' : 'none',
+                    }}
+                >
+                    {item.content}
+                </div>
+            </div>
+        );
+    }
+
     render() {
         return (
             <DragDropContext
@@ -99,30 +119,27 @@ class App extends React.Component<{}, AppState> {
                 dragHandleUsageInstructions="Some instruction"
                 enableDefaultSensors={false}
                 sensors={[useMouseSensor, useKeyboardSensor, useTouchSensor]}
+                nonce="1234"
             >
-                <Droppable droppableId='droppable' ignoreContainerClipping={false} isCombineEnabled={true}>
+                <Droppable
+                    droppableId="droppable"
+                    ignoreContainerClipping={false}
+                    isCombineEnabled={true}
+                    renderClone={this.renderItem}
+                    getContainerForClone={() => document.body}
+                >
                     {(droppableProvided, snapshot) => {
                         const { innerRef, droppableProps, placeholder } = droppableProvided;
                         return (
                             <div ref={innerRef} style={getListStyle(snapshot)} {...droppableProps}>
                                 {this.state.items.map((item, index) => (
-                                    <Draggable key={item.id} draggableId={item.id} index={index}
-                                               shouldRespectForcePress>
-                                        {(draggableProvided, snapshot) => {
-                                            const { innerRef, draggableProps, dragHandleProps } = draggableProvided;
-                                            return (
-                                                <div>
-                                                    <div
-                                                        ref={innerRef}
-                                                        {...draggableProps}
-                                                        {...dragHandleProps}
-                                                        style={getItemStyle(snapshot.isDragging, draggableProps.style)}
-                                                    >
-                                                        {item.content}
-                                                    </div>
-                                                </div>
-                                            );
-                                        }}
+                                    <Draggable
+                                        key={item.id}
+                                        draggableId={item.id}
+                                        index={index}
+                                        shouldRespectForcePress
+                                    >
+                                        {this.renderItem}
                                     </Draggable>
                                 ))}
                                 {placeholder}
diff --git a/types/react-beautiful-dnd/v12/index.d.ts b/types/react-beautiful-dnd/v12/index.d.ts
index 9519a5fb288bdc..62fb00b2b8536a 100644
--- a/types/react-beautiful-dnd/v12/index.d.ts
+++ b/types/react-beautiful-dnd/v12/index.d.ts
@@ -1,4 +1,4 @@
-// Type definitions for react-beautiful-dnd 12.1
+// Type definitions for react-beautiful-dnd 12.2
 // Project: https://github.com/atlassian/react-beautiful-dnd
 // Definitions by: varHarrie <https://github.com/varHarrie>
 //                 Bradley Ayers <https://github.com/bradleyayers>
@@ -8,6 +8,7 @@
 //                 Taeheon Kim <https://github.com/lonyele>
 //                 Kanitkorn Sujautra <https://github.com/lukyth>
 //                 Arun George <https://github.com/aruniverse>
+//                 Declan Warn <https://github.com/declan-warn>
 // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
 // TypeScript Version: 2.8
 // Refer to https://github.com/atlassian/react-beautiful-dnd/blob/master/src/types.js
@@ -178,24 +179,24 @@ export interface Scrollable {
 export interface PlaceholderInSubject {
     // might not actually be increased by
     // placeholder if there is no required space
-    increasedBy?: Position | undefined;
+    increasedBy: Position | null | undefined;
     placeholderSize: Position;
     // max scroll before placeholder added
     // will be null if there was no frame
-    oldFrameMaxScroll?: Position | undefined;
+    oldFrameMaxScroll: Position | null | undefined;
 }
 
 export interface DroppableSubject {
     // raw, unchanging
     page: BoxModel;
-    withPlaceholder?: PlaceholderInSubject | undefined;
+    withPlaceholder: PlaceholderInSubject | null | undefined;
     // The hitbox for a droppable
     // - page margin box
     // - with scroll changes
     // - with any additional droppable placeholder
     // - clipped by frame
     // The subject will be null if the hit area is completely empty
-    active?: Rect | undefined;
+    active: Rect | null | undefined;
 }
 
 export interface DroppableDimension {
@@ -210,7 +211,7 @@ export interface DroppableDimension {
     // relative to the page
     page: BoxModel;
     // The container of the droppable
-    frame?: Scrollable | undefined;
+    frame: Scrollable | null | undefined;
     // what is visible through the frame
     subject: DroppableSubject;
 }
@@ -276,7 +277,6 @@ export interface ReorderImpact {
 
 export interface CombineImpact {
     type: 'COMBINE';
-    whenEntered: UserDirection;
     combine: Combine;
 }
 
@@ -290,7 +290,7 @@ export interface Displaced {
 export interface DragImpact {
     displaced: DisplacementGroups;
     displacedBy: DisplacedBy;
-    at?: ImpactLocation | undefined;
+    at: ImpactLocation | null | undefined;
 }
 
 export interface ClientPositions {
@@ -307,6 +307,7 @@ export interface ClientPositions {
 export interface PagePositions {
     selection: Position;
     borderBoxCenter: Position;
+    offset: Position;
 }
 
 // There are two seperate modes that a drag can be in
@@ -321,11 +322,6 @@ export interface DragPositions {
 
 export interface DraggableRubric {
     draggableId: DraggableId;
-    mode: MovementMode;
-    source: DraggableLocation;
-}
-
-export interface DragStart extends BeforeCapture {
     type: TypeId;
     source: DraggableLocation;
 }
@@ -345,9 +341,9 @@ export interface DragStart extends DraggableRubric {
 
 export interface DragUpdate extends DragStart {
     // may not have any destination (drag to nowhere)
-    destination?: DraggableLocation | undefined;
+    destination: DraggableLocation | null | undefined;
     // populated when a draggable is dragging over another in combine mode
-    combine?: Combine | undefined;
+    combine: Combine | null | undefined;
 }
 
 export type DropReason = 'DROP' | 'CANCEL';
@@ -397,6 +393,7 @@ export interface DroppablePublish {
     droppableId: DroppableId;
     scroll: Position;
 }
+
 export interface Published {
     additions: DraggableDimension[];
     removals: DraggableId[];
@@ -412,7 +409,7 @@ export interface CompletedDrag {
 
 export interface IdleState {
     phase: 'IDLE';
-    completed?: CompletedDrag | undefined;
+    completed: CompletedDrag | null | undefined;
     shouldFlush: boolean;
 }
 
@@ -424,7 +421,6 @@ export interface DraggingState {
     dimensions: DimensionMap;
     initial: DragPositions;
     current: DragPositions;
-    userDirection: UserDirection;
     impact: DragImpact;
     viewport: Viewport;
     afterCritical: LiftEffect;
@@ -432,9 +428,9 @@ export interface DraggingState {
     // when there is a fixed list we want to opt out of this behaviour
     isWindowScrollAllowed: boolean;
     // if we need to jump the scroll (keyboard dragging)
-    scrollJumpRequest?: Position | undefined;
+    scrollJumpRequest: Position | null | undefined;
     // whether or not draggable movements should be animated
-    forceShouldAnimate?: boolean | undefined;
+    forceShouldAnimate: boolean | null | undefined;
 }
 
 // While dragging we can enter into a bulk collection phase
@@ -556,14 +552,14 @@ export type Sensor = (api: SensorAPI) => void;
  *  DragDropContext
  */
 
-export interface DragDropContextProps {
-    children?: React.ReactNode;
-    onBeforeCapture?(before: BeforeCapture): void;
-    onBeforeDragStart?(initial: DragStart): void;
-    onDragStart?(initial: DragStart, provided: ResponderProvided): void;
-    onDragUpdate?(initial: DragUpdate, provided: ResponderProvided): void;
-    onDragEnd(result: DropResult, provided: ResponderProvided): void;
+// Refer to https://github.com/atlassian/react-beautiful-dnd/blob/v12.2.0/src/view/drag-drop-context/drag-drop-context.jsx
+
+export interface DragDropContextProps extends Responders {
+    children: React.ReactNode | null;
+    liftInstruction?: string | undefined;
+    nonce?: string | undefined;
     sensors?: Sensor[] | undefined;
+    enableDefaultSensors?: boolean | undefined;
 }
 
 export class DragDropContext extends React.Component<DragDropContextProps> {}
@@ -572,23 +568,25 @@ export class DragDropContext extends React.Component<DragDropContextProps> {}
  *  Droppable
  */
 
+// Refer to https://github.com/atlassian/react-beautiful-dnd/blob/v12.2.0/src/view/droppable/droppable-types.js
+
 export interface DroppableProvidedProps {
     // used for shared global styles
-    'data-rbd-droppable-context-id': string;
+    'data-rbd-droppable-context-id': ContextId;
     // Used to lookup. Currently not used for drag and drop lifecycle
     'data-rbd-droppable-id': DroppableId;
 }
 
 export interface DroppableProvided {
-    innerRef(element: HTMLElement | null): any;
-    placeholder?: React.ReactElement<HTMLElement> | null | undefined;
+    innerRef(element: HTMLElement | null): void;
+    placeholder: React.ReactNode;
     droppableProps: DroppableProvidedProps;
 }
 
 export interface DroppableStateSnapshot {
     isDraggingOver: boolean;
-    draggingOverWith?: DraggableId | undefined;
-    draggingFromThisWith?: DraggableId | undefined;
+    draggingOverWith: DraggableId | null | undefined;
+    draggingFromThisWith: DraggableId | null | undefined;
     isUsingPlaceholder: boolean;
 }
 
@@ -601,7 +599,7 @@ export interface DroppableProps {
     direction?: Direction | undefined;
     ignoreContainerClipping?: boolean | undefined;
     renderClone?: DraggableChildrenFn | undefined;
-    getContainerForClone?: (() => React.ReactElement<HTMLElement>) | undefined;
+    getContainerForClone?: (() => HTMLElement) | undefined;
     children(provided: DroppableProvided, snapshot: DroppableStateSnapshot): React.ReactElement<HTMLElement>;
 }
 
@@ -611,17 +609,51 @@ export class Droppable extends React.Component<DroppableProps> {}
  *  Draggable
  */
 
+// Refer to https://github.com/atlassian/react-beautiful-dnd/blob/v12.2.0/src/view/draggable/draggable-types.js
+
 export interface DropAnimation {
     duration: number;
     curve: string;
     moveTo: Position;
-    opacity?: number | undefined;
-    scale?: number | undefined;
+    /**
+     * This value will actually be `null` instead of `undefined`.
+     *
+     * The type is fudged because `null` is not compatible with the
+     * `React.CSSProperties` type.
+     *
+     * The `style` prop should interpret `null` and `undefined` the same way.
+     */
+    opacity: number | undefined;
+    /**
+     * This value will actually be `null` instead of `undefined`.
+     *
+     * The type is fudged because `null` is not compatible with the
+     * `React.CSSProperties` type.
+     *
+     * The `style` prop should interpret `null` and `undefined` the same way.
+     */
+    scale: number | undefined;
 }
 
 export interface NotDraggingStyle {
-    transform?: string | undefined;
-    transition?: 'none' | undefined;
+    /**
+     * This value will actually be `null` instead of `undefined`.
+     *
+     * The type is fudged because `null` is not compatible with the
+     * `React.CSSProperties` type.
+     *
+     * The `style` prop should interpret `null` and `undefined` the same way.
+     */
+    transform: string | undefined;
+    /**
+     * This value will actually be `null` instead of `undefined`.
+     *
+     * The type is fudged because `null` is not compatible with the
+     * `React.CSSProperties` type.
+     *
+     * The `style` prop should interpret `null` and `undefined` the same way.
+     */
+    transition: 'none' | undefined;
 }
 
 export interface DraggingStyle {
@@ -631,10 +663,26 @@ export interface DraggingStyle {
     boxSizing: 'border-box';
     width: number;
     height: number;
-    transition: 'none';
-    transform?: string | undefined;
+    transition: string;
+    /**
+     * This value will actually be `null` instead of `undefined`.
+     *
+     * The type is fudged because `null` is not compatible with the
+     * `React.CSSProperties` type.
+     *
+     * The `style` prop should interpret `null` and `undefined` the same way.
+     */
+    transform: string | undefined;
     zIndex: number;
-    opacity?: number | undefined;
+    /**
+     * This value will actually be `null` instead of `undefined`.
+     *
+     * The type is fudged because `null` is not compatible with the
+     * `React.CSSProperties` type.
+     *
+     * The `style` prop should interpret `null` and `undefined` the same way.
+     */
+    opacity: number | undefined;
     pointerEvents: 'none';
 }
 
@@ -659,22 +707,23 @@ export interface DraggableProvidedDragHandleProps {
 
 export interface DraggableProvided {
     // will be removed after move to react 16
-    innerRef(element?: HTMLElement | null): any;
+    innerRef(element: HTMLElement | null): void;
     draggableProps: DraggableProvidedDraggableProps;
-    dragHandleProps?: DraggableProvidedDragHandleProps | undefined;
+    dragHandleProps: DraggableProvidedDragHandleProps | null | undefined;
 }
 
 export interface DraggableStateSnapshot {
     isDragging: boolean;
     isDropAnimating: boolean;
-    dropAnimation?: DropAnimation | undefined;
-    draggingOver?: DroppableId | undefined;
+    isClone: boolean;
+    dropAnimation: DropAnimation | null | undefined;
+    draggingOver: DroppableId | null | undefined;
     // the id of a draggable that you are combining with
-    combineWith?: DraggableId | undefined;
+    combineWith: DraggableId | null | undefined;
     // a combine target is being dragged over by
-    combineTargetFor?: DraggableId | undefined;
+    combineTargetFor: DraggableId | null | undefined;
     // What type of movement is being done: 'FLUID' or 'SNAP'
-    mode?: MovementMode | undefined;
+    mode: MovementMode | null | undefined;
 }
 
 export type DraggableChildrenFn = (
diff --git a/types/react-beautiful-dnd/v12/react-beautiful-dnd-tests.tsx b/types/react-beautiful-dnd/v12/react-beautiful-dnd-tests.tsx
index 53a8a60dad9a70..2367b71d239b92 100644
--- a/types/react-beautiful-dnd/v12/react-beautiful-dnd-tests.tsx
+++ b/types/react-beautiful-dnd/v12/react-beautiful-dnd-tests.tsx
@@ -1,5 +1,18 @@
 import * as React from 'react';
-import { DragDropContext, Draggable, DragStart, DragUpdate, Droppable, DroppableStateSnapshot, DropResult, resetServerContext, ResponderProvided } from 'react-beautiful-dnd';
+import {
+    DragDropContext,
+    Draggable,
+    DraggableProvided,
+    DraggableRubric,
+    DraggableStateSnapshot,
+    DragStart,
+    DragUpdate,
+    Droppable,
+    DroppableStateSnapshot,
+    DropResult,
+    resetServerContext,
+    ResponderProvided,
+} from 'react-beautiful-dnd';
 import * as ReactDOM from 'react-dom';
 
 interface Item {
@@ -22,12 +35,6 @@ const reorder = (list: any[], startIndex: number, endIndex: number) => {
     return result;
 };
 
-const getItemStyle = (isDragging: boolean, draggableStyle: any) => ({
-    userSelect: 'none',
-    background: isDragging ? 'lightgreen' : 'grey',
-    ...draggableStyle,
-});
-
 const getListStyle = (snapshot: DroppableStateSnapshot) => ({
     background: snapshot.draggingFromThisWith ? 'lightpink' : snapshot.isDraggingOver ? 'lightblue' : 'lightgrey',
     width: 250,
@@ -44,6 +51,7 @@ class App extends React.Component<{}, AppState> {
     constructor(props: any) {
         super(props);
         this.onDragEnd = this.onDragEnd.bind(this);
+        this.renderItem = this.renderItem.bind(this);
     }
 
     onBeforeDragStart(dragStart: DragStart) {
@@ -76,6 +84,28 @@ class App extends React.Component<{}, AppState> {
         this.setState({ items });
     }
 
+    renderItem(provided: DraggableProvided, snapshot: DraggableStateSnapshot, rubric: DraggableRubric) {
+        const { innerRef, draggableProps, dragHandleProps } = provided;
+        const item = this.state.items[rubric.source.index];
+        return (
+            <div>
+                <div
+                    ref={innerRef}
+                    {...draggableProps}
+                    {...dragHandleProps}
+                    style={{
+                        ...draggableProps.style,
+                        userSelect: 'none',
+                        background: snapshot.isDragging ? 'lightgreen' : 'grey',
+                        boxShadow: snapshot.isClone ? 'inset 0px 0px 0px 2px blue' : 'none',
+                    }}
+                >
+                    {item.content}
+                </div>
+            </div>
+        );
+    }
+
     render() {
         return (
             <DragDropContext
@@ -83,24 +113,20 @@ class App extends React.Component<{}, AppState> {
                 onDragStart={this.onDragStart}
                 onDragUpdate={this.onDragUpdate}
                 onDragEnd={this.onDragEnd}
+                liftInstruction="Some instruction"
             >
-                <Droppable droppableId="droppable" ignoreContainerClipping={false} isCombineEnabled={true}>
+                <Droppable
+                    droppableId="droppable"
+                    ignoreContainerClipping={false}
+                    isCombineEnabled={true}
+                    renderClone={this.renderItem}
+                    getContainerForClone={() => document.body}
+                >
                     {(provided, snapshot) => (
                         <div ref={provided.innerRef} style={getListStyle(snapshot)} {...provided.droppableProps}>
                             {this.state.items.map((item, index) => (
                                 <Draggable key={item.id} draggableId={item.id} index={index} shouldRespectForcePress>
-                                    {(provided, snapshot) => (
-                                        <div>
-                                            <div
-                                                ref={provided.innerRef}
-                                                {...provided.draggableProps}
-                                                {...provided.dragHandleProps}
-                                                style={getItemStyle(snapshot.isDragging, provided.draggableProps.style)}
-                                            >
-                                                {item.content}
-                                            </div>
-                                        </div>
-                                    )}
+                                    {this.renderItem}
                                 </Draggable>
                             ))}
                             {provided.placeholder}