From e1add24162ae974479f1e4becb93a3a90266cd2c Mon Sep 17 00:00:00 2001
From: Declan Warn <dwarn@atlassian.com>
Date: Thu, 1 Dec 2022 18:01:55 +1100
Subject: [PATCH 01/14] fix types

---
 types/react-beautiful-dnd/index.d.ts     | 112 +++++++++++-----------
 types/react-beautiful-dnd/v12/index.d.ts | 116 +++++++++++------------
 2 files changed, 113 insertions(+), 115 deletions(-)

diff --git a/types/react-beautiful-dnd/index.d.ts b/types/react-beautiful-dnd/index.d.ts
index fbbf91bef5bf78..660f145bfe76ce 100644
--- a/types/react-beautiful-dnd/index.d.ts
+++ b/types/react-beautiful-dnd/index.d.ts
@@ -180,24 +180,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 +212,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;
 }
@@ -223,18 +223,18 @@ export interface DraggableLocation {
 }
 
 export interface DraggableIdMap {
-    [id: string]: true;
+    [id: DraggableId]: true;
 }
 
 export interface DroppableIdMap {
-    [id: string]: true;
+    [id: DroppableId]: true;
 }
 
 export interface DraggableDimensionMap {
-    [key: string]: DraggableDimension;
+    [key: DraggableId]: DraggableDimension;
 }
 export interface DroppableDimensionMap {
-    [key: string]: DroppableDimension;
+    [key: DroppableId]: DroppableDimension;
 }
 
 export interface Displacement {
@@ -243,7 +243,7 @@ export interface Displacement {
 }
 
 export interface DisplacementMap {
-    [key: string]: Displacement;
+    [key: DraggableId]: Displacement;
 }
 
 export interface DisplacedBy {
@@ -283,7 +283,7 @@ export interface Displaced {
 export interface DragImpact {
     displaced: DisplacementGroups;
     displacedBy: DisplacedBy;
-    at?: ImpactLocation | undefined;
+    at: ImpactLocation | null | undefined;
 }
 
 export interface ClientPositions {
@@ -316,11 +316,6 @@ export interface DragPositions {
 
 export interface DraggableRubric {
     draggableId: DraggableId;
-    mode: MovementMode;
-    source: DraggableLocation;
-}
-
-export interface DragStart extends BeforeCapture {
     type: TypeId;
     source: DraggableLocation;
 }
@@ -340,9 +335,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 +387,7 @@ export interface DroppablePublish {
     droppableId: DroppableId;
     scroll: Position;
 }
+
 export interface Published {
     additions: DraggableDimension[];
     removals: DraggableId[];
@@ -407,7 +403,7 @@ export interface CompletedDrag {
 
 export interface IdleState {
     phase: 'IDLE';
-    completed?: CompletedDrag | undefined;
+    completed: CompletedDrag | null | undefined;
     shouldFlush: boolean;
 }
 
@@ -426,9 +422,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
@@ -533,15 +529,15 @@ export type TryGetLock = (
     draggableId: DraggableId,
     forceStop?: () => void,
     options?: TryGetLockOptions,
-) => PreDragActions | null;
+) => PreDragActions | null | undefined;
 
 export interface SensorAPI {
     tryGetLock: TryGetLock;
     canGetLock: (id: DraggableId) => boolean;
     isLockClaimed: () => boolean;
     tryReleaseLock: () => void;
-    findClosestDraggableId: (event: Event) => DraggableId | null;
-    findOptionsForDraggable: (id: DraggableId) => DraggableOptions | null;
+    findClosestDraggableId: (event: Event) => DraggableId | null | undefined;
+    findOptionsForDraggable: (id: DraggableId) => DraggableOptions | null | undefined;
 }
 
 export type Sensor = (api: SensorAPI) => void;
@@ -550,12 +546,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 +556,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;
-    droppableProps: DroppableProvidedProps;
+    innerRef: (element?: HTMLElement | null | undefined) => void;
+    placeholder: React.ReactNode | null | undefined;
+    droppableProps: DroppableProps;
 }
 
 export interface DroppableStateSnapshot {
     isDraggingOver: boolean;
-    draggingOverWith?: DraggableId | undefined;
-    draggingFromThisWith?: DraggableId | undefined;
+    draggingOverWith: DraggableId | null | undefined;
+    draggingFromThisWith: DraggableId | null | undefined;
     isUsingPlaceholder: boolean;
 }
 
@@ -597,28 +592,30 @@ export interface DroppableProps {
     isCombineEnabled?: boolean | undefined;
     direction?: Direction | undefined;
     ignoreContainerClipping?: boolean | undefined;
-    renderClone?: DraggableChildrenFn | undefined;
-    getContainerForClone?: (() => React.ReactElement<HTMLElement>) | undefined;
-    children(provided: DroppableProvided, snapshot: DroppableStateSnapshot): React.ReactElement<HTMLElement>;
+    renderClone?: DraggableChildrenFn | null | undefined;
+    getContainerForClone?: (() => HTMLElement) | undefined;
+    children(provided: DroppableProvided, snapshot: DroppableStateSnapshot): React.ReactNode;
 }
 
-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;
+    opacity: number | null | undefined;
+    scale: number | null | undefined;
 }
 
 export interface NotDraggingStyle {
-    transform?: string | undefined;
-    transition?: 'none' | undefined;
+    transform: string | null | undefined;
+    transition: null | 'none';
 }
 
 export interface DraggingStyle {
@@ -628,10 +625,10 @@ export interface DraggingStyle {
     boxSizing: 'border-box';
     width: number;
     height: number;
-    transition: 'none';
-    transform?: string | undefined;
+    transition: string;
+    transform: string | null | undefined;
     zIndex: number;
-    opacity?: number | undefined;
+    opacity: number | null | undefined;
     pointerEvents: 'none';
 }
 
@@ -657,29 +654,30 @@ 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 = (
     provided: DraggableProvided,
     snapshot: DraggableStateSnapshot,
     rubric: DraggableRubric,
-) => React.ReactElement<HTMLElement>;
+) => React.ReactNode | null;
 
 export interface DraggableProps {
     draggableId: DraggableId;
@@ -690,7 +688,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/v12/index.d.ts b/types/react-beautiful-dnd/v12/index.d.ts
index 9519a5fb288bdc..9498b18dfe8e3f 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>
@@ -178,24 +178,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 +210,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;
 }
@@ -221,18 +221,18 @@ export interface DraggableLocation {
 }
 
 export interface DraggableIdMap {
-    [id: string]: true;
+    [id: DraggableId]: true;
 }
 
 export interface DroppableIdMap {
-    [id: string]: true;
+    [id: DroppableId]: true;
 }
 
 export interface DraggableDimensionMap {
-    [key: string]: DraggableDimension;
+    [key: DraggableId]: DraggableDimension;
 }
 export interface DroppableDimensionMap {
-    [key: string]: DroppableDimension;
+    [key: DroppableId]: DroppableDimension;
 }
 
 export interface Displacement {
@@ -241,7 +241,7 @@ export interface Displacement {
 }
 
 export interface DisplacementMap {
-    [key: string]: Displacement;
+    [key: DraggableId]: Displacement;
 }
 
 export interface DisplacedBy {
@@ -276,7 +276,6 @@ export interface ReorderImpact {
 
 export interface CombineImpact {
     type: 'COMBINE';
-    whenEntered: UserDirection;
     combine: Combine;
 }
 
@@ -290,7 +289,7 @@ export interface Displaced {
 export interface DragImpact {
     displaced: DisplacementGroups;
     displacedBy: DisplacedBy;
-    at?: ImpactLocation | undefined;
+    at: ImpactLocation | null | undefined;
 }
 
 export interface ClientPositions {
@@ -307,6 +306,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 +321,6 @@ export interface DragPositions {
 
 export interface DraggableRubric {
     draggableId: DraggableId;
-    mode: MovementMode;
-    source: DraggableLocation;
-}
-
-export interface DragStart extends BeforeCapture {
     type: TypeId;
     source: DraggableLocation;
 }
@@ -345,9 +340,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 +392,7 @@ export interface DroppablePublish {
     droppableId: DroppableId;
     scroll: Position;
 }
+
 export interface Published {
     additions: DraggableDimension[];
     removals: DraggableId[];
@@ -412,7 +408,7 @@ export interface CompletedDrag {
 
 export interface IdleState {
     phase: 'IDLE';
-    completed?: CompletedDrag | undefined;
+    completed: CompletedDrag | null | undefined;
     shouldFlush: boolean;
 }
 
@@ -424,7 +420,6 @@ export interface DraggingState {
     dimensions: DimensionMap;
     initial: DragPositions;
     current: DragPositions;
-    userDirection: UserDirection;
     impact: DragImpact;
     viewport: Viewport;
     afterCritical: LiftEffect;
@@ -432,9 +427,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
@@ -539,15 +534,15 @@ export type TryGetLock = (
     draggableId: DraggableId,
     forceStop?: () => void,
     options?: TryGetLockOptions,
-) => PreDragActions | null;
+) => PreDragActions | null | undefined;
 
 export interface SensorAPI {
     tryGetLock: TryGetLock;
     canGetLock: (id: DraggableId) => boolean;
     isLockClaimed: () => boolean;
     tryReleaseLock: () => void;
-    findClosestDraggableId: (event: Event) => DraggableId | null;
-    findOptionsForDraggable: (id: DraggableId) => DraggableOptions | null;
+    findClosestDraggableId: (event: Event) => DraggableId | null | undefined;
+    findOptionsForDraggable: (id: DraggableId) => DraggableOptions | null | undefined;
 }
 
 export type Sensor = (api: SensorAPI) => void;
@@ -556,14 +551,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 | null | undefined;
 }
 
 export class DragDropContext extends React.Component<DragDropContextProps> {}
@@ -572,23 +567,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;
-    droppableProps: DroppableProvidedProps;
+    innerRef(element: HTMLElement | null | undefined): void;
+    placeholder: React.ReactNode | null | undefined;
+    droppableProps: DroppableProps;
 }
 
 export interface DroppableStateSnapshot {
     isDraggingOver: boolean;
-    draggingOverWith?: DraggableId | undefined;
-    draggingFromThisWith?: DraggableId | undefined;
+    draggingOverWith: DraggableId | null | undefined;
+    draggingFromThisWith: DraggableId | null | undefined;
     isUsingPlaceholder: boolean;
 }
 
@@ -600,9 +597,9 @@ export interface DroppableProps {
     isCombineEnabled?: boolean | undefined;
     direction?: Direction | undefined;
     ignoreContainerClipping?: boolean | undefined;
-    renderClone?: DraggableChildrenFn | undefined;
-    getContainerForClone?: (() => React.ReactElement<HTMLElement>) | undefined;
-    children(provided: DroppableProvided, snapshot: DroppableStateSnapshot): React.ReactElement<HTMLElement>;
+    renderClone?: DraggableChildrenFn | null | undefined;
+    getContainerForClone?: (() => HTMLElement) | undefined;
+    children(provided: DroppableProvided, snapshot: DroppableStateSnapshot): React.ReactNode;
 }
 
 export class Droppable extends React.Component<DroppableProps> {}
@@ -611,17 +608,19 @@ 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;
+    opacity: number | null | undefined;
+    scale: number | null | undefined;
 }
 
 export interface NotDraggingStyle {
-    transform?: string | undefined;
-    transition?: 'none' | undefined;
+    transform: string | null | undefined;
+    transition: null | 'none';
 }
 
 export interface DraggingStyle {
@@ -631,10 +630,10 @@ export interface DraggingStyle {
     boxSizing: 'border-box';
     width: number;
     height: number;
-    transition: 'none';
-    transform?: string | undefined;
+    transition: string;
+    transform: string | null | undefined;
     zIndex: number;
-    opacity?: number | undefined;
+    opacity: number | null | undefined;
     pointerEvents: 'none';
 }
 
@@ -659,29 +658,30 @@ 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 = (
     provided: DraggableProvided,
     snapshot: DraggableStateSnapshot,
     rubric: DraggableRubric,
-) => React.ReactElement<HTMLElement>;
+) => React.ReactNode | null;
 
 export interface DraggableProps {
     draggableId: DraggableId;

From 6a18350c10aea44271abaf4b6dac2e6e67466188 Mon Sep 17 00:00:00 2001
From: Declan Warn <dwarn@atlassian.com>
Date: Mon, 5 Dec 2022 11:08:29 +1100
Subject: [PATCH 02/14] fix key type

---
 types/react-beautiful-dnd/v12/index.d.ts | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/types/react-beautiful-dnd/v12/index.d.ts b/types/react-beautiful-dnd/v12/index.d.ts
index 9498b18dfe8e3f..ffacf134aa81ac 100644
--- a/types/react-beautiful-dnd/v12/index.d.ts
+++ b/types/react-beautiful-dnd/v12/index.d.ts
@@ -221,18 +221,18 @@ export interface DraggableLocation {
 }
 
 export interface DraggableIdMap {
-    [id: DraggableId]: true;
+    [id: string]: true;
 }
 
 export interface DroppableIdMap {
-    [id: DroppableId]: true;
+    [id: string]: true;
 }
 
 export interface DraggableDimensionMap {
-    [key: DraggableId]: DraggableDimension;
+    [key: string]: DraggableDimension;
 }
 export interface DroppableDimensionMap {
-    [key: DroppableId]: DroppableDimension;
+    [key: string]: DroppableDimension;
 }
 
 export interface Displacement {
@@ -241,7 +241,7 @@ export interface Displacement {
 }
 
 export interface DisplacementMap {
-    [key: DraggableId]: Displacement;
+    [key: string]: Displacement;
 }
 
 export interface DisplacedBy {

From 1c84000da1c5b8c744887e023b0556ea5470170f Mon Sep 17 00:00:00 2001
From: Declan Warn <dwarn@atlassian.com>
Date: Mon, 5 Dec 2022 11:12:05 +1100
Subject: [PATCH 03/14] adjustments

---
 types/react-beautiful-dnd/index.d.ts     | 12 ++++++------
 types/react-beautiful-dnd/v12/index.d.ts |  2 +-
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/types/react-beautiful-dnd/index.d.ts b/types/react-beautiful-dnd/index.d.ts
index 660f145bfe76ce..77b88ad39ddd39 100644
--- a/types/react-beautiful-dnd/index.d.ts
+++ b/types/react-beautiful-dnd/index.d.ts
@@ -223,18 +223,18 @@ export interface DraggableLocation {
 }
 
 export interface DraggableIdMap {
-    [id: DraggableId]: true;
+    [id: string]: true;
 }
 
 export interface DroppableIdMap {
-    [id: DroppableId]: true;
+    [id: string]: true;
 }
 
 export interface DraggableDimensionMap {
-    [key: DraggableId]: DraggableDimension;
+    [key: string]: DraggableDimension;
 }
 export interface DroppableDimensionMap {
-    [key: DroppableId]: DroppableDimension;
+    [key: string]: DroppableDimension;
 }
 
 export interface Displacement {
@@ -243,7 +243,7 @@ export interface Displacement {
 }
 
 export interface DisplacementMap {
-    [key: DraggableId]: Displacement;
+    [key: string]: Displacement;
 }
 
 export interface DisplacedBy {
@@ -572,7 +572,7 @@ export interface DroppableProvidedProps {
 }
 
 export interface DroppableProvided {
-    innerRef: (element?: HTMLElement | null | undefined) => void;
+    innerRef: (element?: HTMLElement | null) => void;
     placeholder: React.ReactNode | null | undefined;
     droppableProps: DroppableProps;
 }
diff --git a/types/react-beautiful-dnd/v12/index.d.ts b/types/react-beautiful-dnd/v12/index.d.ts
index ffacf134aa81ac..00f66aeb7f4c64 100644
--- a/types/react-beautiful-dnd/v12/index.d.ts
+++ b/types/react-beautiful-dnd/v12/index.d.ts
@@ -577,7 +577,7 @@ export interface DroppableProvidedProps {
 }
 
 export interface DroppableProvided {
-    innerRef(element: HTMLElement | null | undefined): void;
+    innerRef(element: HTMLElement | null): void;
     placeholder: React.ReactNode | null | undefined;
     droppableProps: DroppableProps;
 }

From aad4c2cf18621c9c7ed8805583b30125b48a93a9 Mon Sep 17 00:00:00 2001
From: Declan Warn <dwarn@atlassian.com>
Date: Mon, 5 Dec 2022 11:18:20 +1100
Subject: [PATCH 04/14] add tests

---
 .../react-beautiful-dnd-tests.tsx             | 57 ++++++++++++------
 .../v12/react-beautiful-dnd-tests.tsx         | 58 ++++++++++++++-----
 2 files changed, 81 insertions(+), 34 deletions(-)

diff --git a/types/react-beautiful-dnd/react-beautiful-dnd-tests.tsx b/types/react-beautiful-dnd/react-beautiful-dnd-tests.tsx
index 34a77a9da6fda5..8efb9ee0a8a083 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,9 +38,10 @@ const reorder = (list: any[], startIndex: number, endIndex: number) => {
     return result;
 };
 
-const getItemStyle = (isDragging: boolean, draggableStyle: any) => ({
+const getItemStyle = ({ isDragging, isClone }: DraggableStateSnapshot, draggableStyle: any) => ({
     userSelect: 'none',
     background: isDragging ? 'lightgreen' : 'grey',
+    boxShadow: isClone ? 'inset 0px 0px 0px 2px blue' : 'none',
     ...draggableStyle,
 });
 
@@ -57,6 +61,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 +94,23 @@ 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={getItemStyle(snapshot, draggableProps.style)}
+                >
+                    {item.content}
+                </div>
+            </div>
+        );
+    }
+
     render() {
         return (
             <DragDropContext
@@ -99,30 +121,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/react-beautiful-dnd-tests.tsx b/types/react-beautiful-dnd/v12/react-beautiful-dnd-tests.tsx
index 53a8a60dad9a70..419be98346adc3 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,9 +35,10 @@ const reorder = (list: any[], startIndex: number, endIndex: number) => {
     return result;
 };
 
-const getItemStyle = (isDragging: boolean, draggableStyle: any) => ({
+const getItemStyle = ({ isDragging, isClone }: DraggableStateSnapshot, draggableStyle: any) => ({
     userSelect: 'none',
     background: isDragging ? 'lightgreen' : 'grey',
+    boxShadow: isClone ? 'inset 0px 0px 0px 2px blue' : 'none',
     ...draggableStyle,
 });
 
@@ -44,6 +58,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 +91,23 @@ 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={getItemStyle(snapshot, draggableProps.style)}
+                >
+                    {item.content}
+                </div>
+            </div>
+        );
+    }
+
     render() {
         return (
             <DragDropContext
@@ -83,24 +115,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}

From 5b77afea5445eb5be13a3c2fbf4c35e909bab7bc Mon Sep 17 00:00:00 2001
From: Declan Warn <dwarn@atlassian.com>
Date: Mon, 5 Dec 2022 12:26:01 +1100
Subject: [PATCH 05/14] adjust child fn types

---
 types/react-beautiful-dnd/index.d.ts     | 4 ++--
 types/react-beautiful-dnd/v12/index.d.ts | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/types/react-beautiful-dnd/index.d.ts b/types/react-beautiful-dnd/index.d.ts
index 77b88ad39ddd39..1edd86b2363b77 100644
--- a/types/react-beautiful-dnd/index.d.ts
+++ b/types/react-beautiful-dnd/index.d.ts
@@ -594,7 +594,7 @@ export interface DroppableProps {
     ignoreContainerClipping?: boolean | undefined;
     renderClone?: DraggableChildrenFn | null | undefined;
     getContainerForClone?: (() => HTMLElement) | undefined;
-    children(provided: DroppableProvided, snapshot: DroppableStateSnapshot): React.ReactNode;
+    children(provided: DroppableProvided, snapshot: DroppableStateSnapshot): React.ReactElement<HTMLElement> | null;
 }
 
 export class Droppable extends React.Component<DroppableProps> {}
@@ -677,7 +677,7 @@ export type DraggableChildrenFn = (
     provided: DraggableProvided,
     snapshot: DraggableStateSnapshot,
     rubric: DraggableRubric,
-) => React.ReactNode | null;
+) => React.ReactElement<HTMLElement> | null;
 
 export interface DraggableProps {
     draggableId: DraggableId;
diff --git a/types/react-beautiful-dnd/v12/index.d.ts b/types/react-beautiful-dnd/v12/index.d.ts
index 00f66aeb7f4c64..6cbca99a2a1687 100644
--- a/types/react-beautiful-dnd/v12/index.d.ts
+++ b/types/react-beautiful-dnd/v12/index.d.ts
@@ -599,7 +599,7 @@ export interface DroppableProps {
     ignoreContainerClipping?: boolean | undefined;
     renderClone?: DraggableChildrenFn | null | undefined;
     getContainerForClone?: (() => HTMLElement) | undefined;
-    children(provided: DroppableProvided, snapshot: DroppableStateSnapshot): React.ReactNode;
+    children(provided: DroppableProvided, snapshot: DroppableStateSnapshot): React.ReactElement<HTMLElement> | null;
 }
 
 export class Droppable extends React.Component<DroppableProps> {}
@@ -681,7 +681,7 @@ export type DraggableChildrenFn = (
     provided: DraggableProvided,
     snapshot: DraggableStateSnapshot,
     rubric: DraggableRubric,
-) => React.ReactNode | null;
+) => React.ReactElement<HTMLElement> | null | null;
 
 export interface DraggableProps {
     draggableId: DraggableId;

From addf81759997dcc888881092f8b0cf88ba44b722 Mon Sep 17 00:00:00 2001
From: Declan Warn <dwarn@atlassian.com>
Date: Mon, 5 Dec 2022 13:04:56 +1100
Subject: [PATCH 06/14] fix child function types

---
 types/react-beautiful-dnd/index.d.ts     | 4 ++--
 types/react-beautiful-dnd/v12/index.d.ts | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/types/react-beautiful-dnd/index.d.ts b/types/react-beautiful-dnd/index.d.ts
index 1edd86b2363b77..559974c4c559d5 100644
--- a/types/react-beautiful-dnd/index.d.ts
+++ b/types/react-beautiful-dnd/index.d.ts
@@ -594,7 +594,7 @@ export interface DroppableProps {
     ignoreContainerClipping?: boolean | undefined;
     renderClone?: DraggableChildrenFn | null | undefined;
     getContainerForClone?: (() => HTMLElement) | undefined;
-    children(provided: DroppableProvided, snapshot: DroppableStateSnapshot): React.ReactElement<HTMLElement> | null;
+    children(provided: DroppableProvided, snapshot: DroppableStateSnapshot): Exclude<React.ReactNode, undefined>;
 }
 
 export class Droppable extends React.Component<DroppableProps> {}
@@ -677,7 +677,7 @@ export type DraggableChildrenFn = (
     provided: DraggableProvided,
     snapshot: DraggableStateSnapshot,
     rubric: DraggableRubric,
-) => React.ReactElement<HTMLElement> | null;
+) => Exclude<React.ReactNode, undefined>;
 
 export interface DraggableProps {
     draggableId: DraggableId;
diff --git a/types/react-beautiful-dnd/v12/index.d.ts b/types/react-beautiful-dnd/v12/index.d.ts
index 6cbca99a2a1687..8ddf5fe4e1ca70 100644
--- a/types/react-beautiful-dnd/v12/index.d.ts
+++ b/types/react-beautiful-dnd/v12/index.d.ts
@@ -599,7 +599,7 @@ export interface DroppableProps {
     ignoreContainerClipping?: boolean | undefined;
     renderClone?: DraggableChildrenFn | null | undefined;
     getContainerForClone?: (() => HTMLElement) | undefined;
-    children(provided: DroppableProvided, snapshot: DroppableStateSnapshot): React.ReactElement<HTMLElement> | null;
+    children(provided: DroppableProvided, snapshot: DroppableStateSnapshot): Exclude<React.ReactNode, undefined>;
 }
 
 export class Droppable extends React.Component<DroppableProps> {}
@@ -681,7 +681,7 @@ export type DraggableChildrenFn = (
     provided: DraggableProvided,
     snapshot: DraggableStateSnapshot,
     rubric: DraggableRubric,
-) => React.ReactElement<HTMLElement> | null | null;
+) => Exclude<React.ReactNode, undefined>;
 
 export interface DraggableProps {
     draggableId: DraggableId;

From 4bc67f93044c71a28b49fc2ea83ed06794e6496d Mon Sep 17 00:00:00 2001
From: Declan Warn <dwarn@atlassian.com>
Date: Mon, 5 Dec 2022 13:18:52 +1100
Subject: [PATCH 07/14] child function types

---
 types/react-beautiful-dnd/index.d.ts     | 4 ++--
 types/react-beautiful-dnd/v12/index.d.ts | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/types/react-beautiful-dnd/index.d.ts b/types/react-beautiful-dnd/index.d.ts
index 559974c4c559d5..4c0bdf72585281 100644
--- a/types/react-beautiful-dnd/index.d.ts
+++ b/types/react-beautiful-dnd/index.d.ts
@@ -594,7 +594,7 @@ export interface DroppableProps {
     ignoreContainerClipping?: boolean | undefined;
     renderClone?: DraggableChildrenFn | null | undefined;
     getContainerForClone?: (() => HTMLElement) | undefined;
-    children(provided: DroppableProvided, snapshot: DroppableStateSnapshot): Exclude<React.ReactNode, undefined>;
+    children(provided: DroppableProvided, snapshot: DroppableStateSnapshot): React.ReactNode;
 }
 
 export class Droppable extends React.Component<DroppableProps> {}
@@ -677,7 +677,7 @@ export type DraggableChildrenFn = (
     provided: DraggableProvided,
     snapshot: DraggableStateSnapshot,
     rubric: DraggableRubric,
-) => Exclude<React.ReactNode, undefined>;
+) => React.ReactNode;
 
 export interface DraggableProps {
     draggableId: DraggableId;
diff --git a/types/react-beautiful-dnd/v12/index.d.ts b/types/react-beautiful-dnd/v12/index.d.ts
index 8ddf5fe4e1ca70..a3ac9332b5d60d 100644
--- a/types/react-beautiful-dnd/v12/index.d.ts
+++ b/types/react-beautiful-dnd/v12/index.d.ts
@@ -599,7 +599,7 @@ export interface DroppableProps {
     ignoreContainerClipping?: boolean | undefined;
     renderClone?: DraggableChildrenFn | null | undefined;
     getContainerForClone?: (() => HTMLElement) | undefined;
-    children(provided: DroppableProvided, snapshot: DroppableStateSnapshot): Exclude<React.ReactNode, undefined>;
+    children(provided: DroppableProvided, snapshot: DroppableStateSnapshot): React.ReactNode;
 }
 
 export class Droppable extends React.Component<DroppableProps> {}
@@ -681,7 +681,7 @@ export type DraggableChildrenFn = (
     provided: DraggableProvided,
     snapshot: DraggableStateSnapshot,
     rubric: DraggableRubric,
-) => Exclude<React.ReactNode, undefined>;
+) => React.ReactNode;
 
 export interface DraggableProps {
     draggableId: DraggableId;

From ecf62a67e38663f69ab27286094d16789c5bbdff Mon Sep 17 00:00:00 2001
From: Declan Warn <dwarn@atlassian.com>
Date: Mon, 5 Dec 2022 14:48:18 +1100
Subject: [PATCH 08/14] fix droppable provided

---
 types/react-beautiful-dnd/index.d.ts     | 2 +-
 types/react-beautiful-dnd/v12/index.d.ts | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/types/react-beautiful-dnd/index.d.ts b/types/react-beautiful-dnd/index.d.ts
index 4c0bdf72585281..ec8fd59fad5a61 100644
--- a/types/react-beautiful-dnd/index.d.ts
+++ b/types/react-beautiful-dnd/index.d.ts
@@ -574,7 +574,7 @@ export interface DroppableProvidedProps {
 export interface DroppableProvided {
     innerRef: (element?: HTMLElement | null) => void;
     placeholder: React.ReactNode | null | undefined;
-    droppableProps: DroppableProps;
+    droppableProps: DroppableProvidedProps;
 }
 
 export interface DroppableStateSnapshot {
diff --git a/types/react-beautiful-dnd/v12/index.d.ts b/types/react-beautiful-dnd/v12/index.d.ts
index a3ac9332b5d60d..76c8dac2fbc1f9 100644
--- a/types/react-beautiful-dnd/v12/index.d.ts
+++ b/types/react-beautiful-dnd/v12/index.d.ts
@@ -579,7 +579,7 @@ export interface DroppableProvidedProps {
 export interface DroppableProvided {
     innerRef(element: HTMLElement | null): void;
     placeholder: React.ReactNode | null | undefined;
-    droppableProps: DroppableProps;
+    droppableProps: DroppableProvidedProps;
 }
 
 export interface DroppableStateSnapshot {

From 873d95a5ecbcc36dac48385eb154a334cff14d5d Mon Sep 17 00:00:00 2001
From: Declan Warn <dwarn@atlassian.com>
Date: Mon, 5 Dec 2022 16:15:45 +1100
Subject: [PATCH 09/14] fudge style types

---
 types/react-beautiful-dnd/index.d.ts          | 60 +++++++++++++++++--
 .../react-beautiful-dnd-tests.tsx             | 14 ++---
 types/react-beautiful-dnd/v12/index.d.ts      | 60 +++++++++++++++++--
 .../v12/react-beautiful-dnd-tests.tsx         | 14 ++---
 4 files changed, 120 insertions(+), 28 deletions(-)

diff --git a/types/react-beautiful-dnd/index.d.ts b/types/react-beautiful-dnd/index.d.ts
index ec8fd59fad5a61..93b304ff313d02 100644
--- a/types/react-beautiful-dnd/index.d.ts
+++ b/types/react-beautiful-dnd/index.d.ts
@@ -609,13 +609,45 @@ export interface DropAnimation {
     duration: number;
     curve: string;
     moveTo: Position;
-    opacity: number | null | undefined;
-    scale: number | null | 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 | null | undefined;
-    transition: null | 'none';
+    /**
+     * 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 {
@@ -626,9 +658,25 @@ export interface DraggingStyle {
     width: number;
     height: number;
     transition: string;
-    transform: string | null | 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;
     zIndex: number;
-    opacity: number | null | 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';
 }
 
diff --git a/types/react-beautiful-dnd/react-beautiful-dnd-tests.tsx b/types/react-beautiful-dnd/react-beautiful-dnd-tests.tsx
index 8efb9ee0a8a083..754a98a826d50f 100644
--- a/types/react-beautiful-dnd/react-beautiful-dnd-tests.tsx
+++ b/types/react-beautiful-dnd/react-beautiful-dnd-tests.tsx
@@ -38,13 +38,6 @@ const reorder = (list: any[], startIndex: number, endIndex: number) => {
     return result;
 };
 
-const getItemStyle = ({ isDragging, isClone }: DraggableStateSnapshot, draggableStyle: any) => ({
-    userSelect: 'none',
-    background: isDragging ? 'lightgreen' : 'grey',
-    boxShadow: isClone ? 'inset 0px 0px 0px 2px blue' : 'none',
-    ...draggableStyle,
-});
-
 const getListStyle = (snapshot: DroppableStateSnapshot) => ({
     background: snapshot.draggingFromThisWith ? 'lightpink' : snapshot.isDraggingOver ? 'lightblue' : 'lightgrey',
     width: 250,
@@ -103,7 +96,12 @@ class App extends React.Component<{}, AppState> {
                     ref={innerRef}
                     {...draggableProps}
                     {...dragHandleProps}
-                    style={getItemStyle(snapshot, draggableProps.style)}
+                    style={{
+                        ...draggableProps.style,
+                        userSelect: 'none',
+                        background: snapshot.isDragging ? 'lightgreen' : 'grey',
+                        boxShadow: snapshot.isClone ? 'inset 0px 0px 0px 2px blue' : 'none',
+                    }}
                 >
                     {item.content}
                 </div>
diff --git a/types/react-beautiful-dnd/v12/index.d.ts b/types/react-beautiful-dnd/v12/index.d.ts
index 76c8dac2fbc1f9..60c19070216f39 100644
--- a/types/react-beautiful-dnd/v12/index.d.ts
+++ b/types/react-beautiful-dnd/v12/index.d.ts
@@ -614,13 +614,45 @@ export interface DropAnimation {
     duration: number;
     curve: string;
     moveTo: Position;
-    opacity: number | null | undefined;
-    scale: number | null | 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 | null | undefined;
-    transition: null | 'none';
+    /**
+     * 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,9 +663,25 @@ export interface DraggingStyle {
     width: number;
     height: number;
     transition: string;
-    transform: string | null | 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;
     zIndex: number;
-    opacity: number | null | 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';
 }
 
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 419be98346adc3..2367b71d239b92 100644
--- a/types/react-beautiful-dnd/v12/react-beautiful-dnd-tests.tsx
+++ b/types/react-beautiful-dnd/v12/react-beautiful-dnd-tests.tsx
@@ -35,13 +35,6 @@ const reorder = (list: any[], startIndex: number, endIndex: number) => {
     return result;
 };
 
-const getItemStyle = ({ isDragging, isClone }: DraggableStateSnapshot, draggableStyle: any) => ({
-    userSelect: 'none',
-    background: isDragging ? 'lightgreen' : 'grey',
-    boxShadow: isClone ? 'inset 0px 0px 0px 2px blue' : 'none',
-    ...draggableStyle,
-});
-
 const getListStyle = (snapshot: DroppableStateSnapshot) => ({
     background: snapshot.draggingFromThisWith ? 'lightpink' : snapshot.isDraggingOver ? 'lightblue' : 'lightgrey',
     width: 250,
@@ -100,7 +93,12 @@ class App extends React.Component<{}, AppState> {
                     ref={innerRef}
                     {...draggableProps}
                     {...dragHandleProps}
-                    style={getItemStyle(snapshot, draggableProps.style)}
+                    style={{
+                        ...draggableProps.style,
+                        userSelect: 'none',
+                        background: snapshot.isDragging ? 'lightgreen' : 'grey',
+                        boxShadow: snapshot.isClone ? 'inset 0px 0px 0px 2px blue' : 'none',
+                    }}
                 >
                     {item.content}
                 </div>

From 64181faed34d945b82616fb45454cd9c83bc7b48 Mon Sep 17 00:00:00 2001
From: Declan Warn <dwarn@atlassian.com>
Date: Mon, 5 Dec 2022 17:20:55 +1100
Subject: [PATCH 10/14] ReactElement instead of ReactNode for children fns

---
 types/react-beautiful-dnd/index.d.ts     | 4 ++--
 types/react-beautiful-dnd/v12/index.d.ts | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/types/react-beautiful-dnd/index.d.ts b/types/react-beautiful-dnd/index.d.ts
index 93b304ff313d02..0b6245ba3ea659 100644
--- a/types/react-beautiful-dnd/index.d.ts
+++ b/types/react-beautiful-dnd/index.d.ts
@@ -594,7 +594,7 @@ export interface DroppableProps {
     ignoreContainerClipping?: boolean | undefined;
     renderClone?: DraggableChildrenFn | null | undefined;
     getContainerForClone?: (() => HTMLElement) | undefined;
-    children(provided: DroppableProvided, snapshot: DroppableStateSnapshot): React.ReactNode;
+    children(provided: DroppableProvided, snapshot: DroppableStateSnapshot): React.ReactElement<HTMLElement>;
 }
 
 export class Droppable extends React.Component<DroppableProps> {}
@@ -725,7 +725,7 @@ export type DraggableChildrenFn = (
     provided: DraggableProvided,
     snapshot: DraggableStateSnapshot,
     rubric: DraggableRubric,
-) => React.ReactNode;
+) => React.ReactElement<HTMLElement>;
 
 export interface DraggableProps {
     draggableId: DraggableId;
diff --git a/types/react-beautiful-dnd/v12/index.d.ts b/types/react-beautiful-dnd/v12/index.d.ts
index 60c19070216f39..128a84717f26ab 100644
--- a/types/react-beautiful-dnd/v12/index.d.ts
+++ b/types/react-beautiful-dnd/v12/index.d.ts
@@ -599,7 +599,7 @@ export interface DroppableProps {
     ignoreContainerClipping?: boolean | undefined;
     renderClone?: DraggableChildrenFn | null | undefined;
     getContainerForClone?: (() => HTMLElement) | undefined;
-    children(provided: DroppableProvided, snapshot: DroppableStateSnapshot): React.ReactNode;
+    children(provided: DroppableProvided, snapshot: DroppableStateSnapshot): React.ReactElement<HTMLElement>;
 }
 
 export class Droppable extends React.Component<DroppableProps> {}
@@ -729,7 +729,7 @@ export type DraggableChildrenFn = (
     provided: DraggableProvided,
     snapshot: DraggableStateSnapshot,
     rubric: DraggableRubric,
-) => React.ReactNode;
+) => React.ReactElement<HTMLElement>;
 
 export interface DraggableProps {
     draggableId: DraggableId;

From c44e0711dddcf728eadad85257257bd8a3f2f205 Mon Sep 17 00:00:00 2001
From: Declan Warn <dwarn@atlassian.com>
Date: Tue, 6 Dec 2022 11:15:56 +1100
Subject: [PATCH 11/14] make changes more conservative

---
 types/react-beautiful-dnd/index.d.ts     | 12 ++++++------
 types/react-beautiful-dnd/v12/index.d.ts | 10 +++++-----
 2 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/types/react-beautiful-dnd/index.d.ts b/types/react-beautiful-dnd/index.d.ts
index 0b6245ba3ea659..b718091ea5071e 100644
--- a/types/react-beautiful-dnd/index.d.ts
+++ b/types/react-beautiful-dnd/index.d.ts
@@ -529,15 +529,15 @@ export type TryGetLock = (
     draggableId: DraggableId,
     forceStop?: () => void,
     options?: TryGetLockOptions,
-) => PreDragActions | null | undefined;
+) => PreDragActions | null;
 
 export interface SensorAPI {
     tryGetLock: TryGetLock;
     canGetLock: (id: DraggableId) => boolean;
     isLockClaimed: () => boolean;
     tryReleaseLock: () => void;
-    findClosestDraggableId: (event: Event) => DraggableId | null | undefined;
-    findOptionsForDraggable: (id: DraggableId) => DraggableOptions | null | undefined;
+    findClosestDraggableId: (event: Event) => DraggableId | null;
+    findOptionsForDraggable: (id: DraggableId) => DraggableOptions | null;
 }
 
 export type Sensor = (api: SensorAPI) => void;
@@ -572,7 +572,7 @@ export interface DroppableProvidedProps {
 }
 
 export interface DroppableProvided {
-    innerRef: (element?: HTMLElement | null) => void;
+    innerRef: (element: HTMLElement | null) => void;
     placeholder: React.ReactNode | null | undefined;
     droppableProps: DroppableProvidedProps;
 }
@@ -592,7 +592,7 @@ export interface DroppableProps {
     isCombineEnabled?: boolean | undefined;
     direction?: Direction | undefined;
     ignoreContainerClipping?: boolean | undefined;
-    renderClone?: DraggableChildrenFn | null | undefined;
+    renderClone?: DraggableChildrenFn | undefined;
     getContainerForClone?: (() => HTMLElement) | undefined;
     children(provided: DroppableProvided, snapshot: DroppableStateSnapshot): React.ReactElement<HTMLElement>;
 }
@@ -702,7 +702,7 @@ export interface DraggableProvidedDragHandleProps {
 
 export interface DraggableProvided {
     // will be removed after move to react 16
-    innerRef: (element?: HTMLElement | null) => void;
+    innerRef: (element: HTMLElement | null) => void;
     draggableProps: DraggableProvidedDraggableProps;
     dragHandleProps: DraggableProvidedDragHandleProps | null | undefined;
 }
diff --git a/types/react-beautiful-dnd/v12/index.d.ts b/types/react-beautiful-dnd/v12/index.d.ts
index 128a84717f26ab..3f3a74ebd3575e 100644
--- a/types/react-beautiful-dnd/v12/index.d.ts
+++ b/types/react-beautiful-dnd/v12/index.d.ts
@@ -541,8 +541,8 @@ export interface SensorAPI {
     canGetLock: (id: DraggableId) => boolean;
     isLockClaimed: () => boolean;
     tryReleaseLock: () => void;
-    findClosestDraggableId: (event: Event) => DraggableId | null | undefined;
-    findOptionsForDraggable: (id: DraggableId) => DraggableOptions | null | undefined;
+    findClosestDraggableId: (event: Event) => DraggableId | null;
+    findOptionsForDraggable: (id: DraggableId) => DraggableOptions | null;
 }
 
 export type Sensor = (api: SensorAPI) => void;
@@ -558,7 +558,7 @@ export interface DragDropContextProps extends Responders {
     liftInstruction?: string | undefined;
     nonce?: string | undefined;
     sensors?: Sensor[] | undefined;
-    enableDefaultSensors?: boolean | null | undefined;
+    enableDefaultSensors?: boolean | undefined;
 }
 
 export class DragDropContext extends React.Component<DragDropContextProps> {}
@@ -597,7 +597,7 @@ export interface DroppableProps {
     isCombineEnabled?: boolean | undefined;
     direction?: Direction | undefined;
     ignoreContainerClipping?: boolean | undefined;
-    renderClone?: DraggableChildrenFn | null | undefined;
+    renderClone?: DraggableChildrenFn | undefined;
     getContainerForClone?: (() => HTMLElement) | undefined;
     children(provided: DroppableProvided, snapshot: DroppableStateSnapshot): React.ReactElement<HTMLElement>;
 }
@@ -706,7 +706,7 @@ export interface DraggableProvidedDragHandleProps {
 
 export interface DraggableProvided {
     // will be removed after move to react 16
-    innerRef(element?: HTMLElement | null): void;
+    innerRef(element: HTMLElement | null): void;
     draggableProps: DraggableProvidedDraggableProps;
     dragHandleProps: DraggableProvidedDragHandleProps | null | undefined;
 }

From ee58cf14672b9134355eb30c8a78a0b7ba983137 Mon Sep 17 00:00:00 2001
From: Declan Warn <dwarn@atlassian.com>
Date: Tue, 6 Dec 2022 11:26:16 +1100
Subject: [PATCH 12/14] remove extra undefined

---
 types/react-beautiful-dnd/v12/index.d.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/types/react-beautiful-dnd/v12/index.d.ts b/types/react-beautiful-dnd/v12/index.d.ts
index 3f3a74ebd3575e..352e60470fe1a4 100644
--- a/types/react-beautiful-dnd/v12/index.d.ts
+++ b/types/react-beautiful-dnd/v12/index.d.ts
@@ -534,7 +534,7 @@ export type TryGetLock = (
     draggableId: DraggableId,
     forceStop?: () => void,
     options?: TryGetLockOptions,
-) => PreDragActions | null | undefined;
+) => PreDragActions | null;
 
 export interface SensorAPI {
     tryGetLock: TryGetLock;

From e870fbe0584de8cac832e15c0572fd1e85f5bbf3 Mon Sep 17 00:00:00 2001
From: Declan Warn <dwarn@atlassian.com>
Date: Tue, 6 Dec 2022 15:09:48 +1100
Subject: [PATCH 13/14] remove redundancy from placeholder type

---
 types/react-beautiful-dnd/index.d.ts     | 2 +-
 types/react-beautiful-dnd/v12/index.d.ts | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/types/react-beautiful-dnd/index.d.ts b/types/react-beautiful-dnd/index.d.ts
index b718091ea5071e..02041e3476f979 100644
--- a/types/react-beautiful-dnd/index.d.ts
+++ b/types/react-beautiful-dnd/index.d.ts
@@ -573,7 +573,7 @@ export interface DroppableProvidedProps {
 
 export interface DroppableProvided {
     innerRef: (element: HTMLElement | null) => void;
-    placeholder: React.ReactNode | null | undefined;
+    placeholder: React.ReactNode;
     droppableProps: DroppableProvidedProps;
 }
 
diff --git a/types/react-beautiful-dnd/v12/index.d.ts b/types/react-beautiful-dnd/v12/index.d.ts
index 352e60470fe1a4..c60a91f03a1de6 100644
--- a/types/react-beautiful-dnd/v12/index.d.ts
+++ b/types/react-beautiful-dnd/v12/index.d.ts
@@ -578,7 +578,7 @@ export interface DroppableProvidedProps {
 
 export interface DroppableProvided {
     innerRef(element: HTMLElement | null): void;
-    placeholder: React.ReactNode | null | undefined;
+    placeholder: React.ReactNode;
     droppableProps: DroppableProvidedProps;
 }
 

From 19288d3f5ec358eb1a29c7061c58b4a43f1ba229 Mon Sep 17 00:00:00 2001
From: Declan Warn <dwarn@atlassian.com>
Date: Thu, 8 Dec 2022 11:14:02 +1100
Subject: [PATCH 14/14] add name to maintainers

---
 types/react-beautiful-dnd/index.d.ts     | 1 +
 types/react-beautiful-dnd/v12/index.d.ts | 1 +
 2 files changed, 2 insertions(+)

diff --git a/types/react-beautiful-dnd/index.d.ts b/types/react-beautiful-dnd/index.d.ts
index 02041e3476f979..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
diff --git a/types/react-beautiful-dnd/v12/index.d.ts b/types/react-beautiful-dnd/v12/index.d.ts
index c60a91f03a1de6..62fb00b2b8536a 100644
--- a/types/react-beautiful-dnd/v12/index.d.ts
+++ b/types/react-beautiful-dnd/v12/index.d.ts
@@ -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