Merge branch 'master' into master

Author: alexreardon

.size-snapshot.json

@@ -1,25 +1,25 @@
 {
   "dist/react-beautiful-dnd.js": {
-    "bundled": 363505,
-    "minified": 133056,
-    "gzipped": 39410
+    "bundled": 364318,
+    "minified": 133393,
+    "gzipped": 39449
   },
   "dist/react-beautiful-dnd.min.js": {
-    "bundled": 306984,
-    "minified": 108949,
-    "gzipped": 31683
+    "bundled": 307797,
+    "minified": 109292,
+    "gzipped": 31782
   },
   "dist/react-beautiful-dnd.esm.js": {
-    "bundled": 239949,
-    "minified": 124825,
-    "gzipped": 32469,
+    "bundled": 240708,
+    "minified": 125264,
+    "gzipped": 32618,
     "treeshaked": {
       "rollup": {
-        "code": 21007,
+        "code": 21121,
         "import_statements": 503
       },
       "webpack": {
-        "code": 23898
+        "code": 24005
       }
     }
   }

docs/api/drag-drop-context.md

@@ -22,7 +22,7 @@ type Props = {|
   // We do not technically need any children for this component
   children: Node | null,
   // Read out by screen readers when focusing on a drag handle
-  liftInstruction?: string,
+  dragHandleUsageInstructions?: string,
   // Used for strict content security policies
   nonce?: string,
   // Used for custom sensors
@@ -31,7 +31,7 @@ type Props = {|
 |};
 ```
 
-- `liftInstruction`: What is read out to screen reader users when a _drag handle_ is given browser focus. See our [screen reader guide](/docs/guides/screen-reader.md)
+- `dragHandleUsageInstructions`: What is read out to screen reader users when a _drag handle_ is given browser focus. See our [screen reader guide](/docs/guides/screen-reader.md)
 - `nonce`: Used for strict content security policy setups. See our [content security policy guide](/docs/guides/content-security-policy.md)
 - `sensors`: Used to pass in your own `sensor`s for a `<DragDropContext />`. See our [sensor api documentation](/docs/sensors/sensor-api.md)
 - `enableDefaultSensors`: Whether or not the default sensors ([mouse](/docs/sensors/mouse.md), [keyboard](/docs/sensors/keyboard.md), and [touch](/docs/sensors/touch.md)) are enabled. See our [sensor api documentation](/docs/sensors/sensor-api.md)
@@ -127,8 +127,4 @@ Responders are top level application events that you can use to perform your own
 
 [Please see our Responders guide](/docs/guides/responders.md) for detailed information about responders ❤️
 
-## `liftInstruction`
-
-This is text used as the screen reader lift instruction for *drag-handle*s. We will use our default english message if no liftInstruction is provided. See our [screen reader guide](/docs/guides/screen-reader.md)
-
 [← Back to documentation](/README.md#documentation-)

docs/guides/preset-styles.md

@@ -8,7 +8,7 @@ Here are the styles that are applied at various points in the drag lifecycle:
 
 ### Always: drag handle
 
-Styles applied to: **drag handle element** using the `data-react-beautiful-dnd-drag-handle` attribute.
+Styles applied to: **drag handle element** using the `data-rbd-drag-handle-context-id` attribute.
 
 A long press on anchors usually pops a content menu that has options for the link such as 'Open in new tab'. Because long press is used to start a drag we need to opt out of this behavior
 
@@ -30,7 +30,7 @@ touch-action: manipulation;
 
 ### Always: Droppable
 
-Styles applied to: **droppable element** using the `data-react-beautiful-dnd-droppable` attribute.
+Styles applied to: **droppable element** using the `data-rbd-droppable-context-id` attribute.
 
 Opting out of the browser feature which tries to maintain the scroll position when the DOM changes above the fold. We already correctly maintain the scroll position. The automatic `overflow-anchor` behavior leads to incorrect scroll positioning post drop.
 
@@ -42,7 +42,7 @@ overflow-anchor: none;
 
 ### (Phase: resting): drag handle
 
-Styles applied to: **drag handle element** using the `data-react-beautiful-dnd-drag-handle` attribute.
+Styles applied to: **drag handle element** using the `data-rbd-drag-handle-context-id` attribute.
 
 Adding a cursor style to let the user know this element is draggable. You are welcome to override this.
 
@@ -54,7 +54,7 @@ cursor: grab;
 
 ### (Phase: dragging): drag handle element
 
-**Styles applied using the `data-react-beautiful-dnd-drag-handle` attribute**
+**Styles applied using the `data-rbd-drag-handle-context-id` attribute**
 
 An optimisation to avoid processing `pointer-events` while dragging. Also used to allow scrolling through a drag handle with a track pad or mouse wheel.
 
@@ -64,7 +64,7 @@ pointer-events: none;
 
 ### (Phase: dragging): Draggable element
 
-**Styles applied using the `data-react-beautiful-dnd-draggable` attribute**
+**Styles applied using the `data-rbd-draggable-context-id` attribute**
 
 This is what we use to control `<Draggable />`s that need to move out of the way of a dragging `<Draggable />`.
 
@@ -74,7 +74,7 @@ transition: ${string};
 
 ### (Phase: dragging): Droppable element
 
-**Styles applied using the `data-react-beautiful-dnd-droppable` attribute**
+**Styles applied using the `data-rbd-droppable-context-id` attribute**
 
 We apply `pointer-events: none` to a `<Droppable />` during a drag. This is technically not required as an optimisation. However, it gets around a common issue where hover styles are triggered during a drag. You are welcome to opt out of this one as it is it not required for functinality.
 
@@ -113,7 +113,7 @@ user-select: none;
 
 ### (Phase: dropping): drag handle element
 
-**Styles applied using the `data-react-beautiful-dnd-drag-handle` attribute**
+**Styles applied using the `data-rbd-drag-handle-context-id` attribute**
 
 We apply the grab cursor to all drag handles except the drag handle for the dropping `<Draggable />`. At this point the user is able to drag other `<Draggable />`'s if they like.