@planningcenter/react-beautiful-dnd 13.4.0 → 13.4.1

package/dist/react-beautiful-dnd.cjs.js

@@ -1,31 +1,26 @@
 'use strict';
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
-
 var React = require('react');
-var React__default = _interopDefault(React);
-var _inheritsLoose = _interopDefault(require('@babel/runtime/helpers/inheritsLoose'));
-var _extends = _interopDefault(require('@babel/runtime/helpers/extends'));
+var _inheritsLoose = require('@babel/runtime/helpers/inheritsLoose');
+var _extends = require('@babel/runtime/helpers/extends');
 var redux = require('redux');
 var reactRedux = require('react-redux');
 var useMemoOne = require('use-memo-one');
 var cssBoxModel = require('css-box-model');
-var memoizeOne = _interopDefault(require('memoize-one'));
-var rafSchd = _interopDefault(require('raf-schd'));
-var ReactDOM = _interopDefault(require('react-dom'));
+var memoizeOne = require('memoize-one');
+var rafSchd = require('raf-schd');
+var ReactDOM = require('react-dom');
 
-var isProduction = process.env.NODE_ENV === 'production';
+var isProduction$1 = process.env.NODE_ENV === 'production';
 var spacesAndTabs = /[ \t]{2,}/g;
 var lineStartWithSpaces = /^[ \t]*/gm;
 
-var clean = function clean(value) {
+var clean$2 = function clean(value) {
   return value.replace(spacesAndTabs, ' ').replace(lineStartWithSpaces, '').trim();
 };
 
 var getDevMessage = function getDevMessage(message) {
-  return clean("\n  %creact-beautiful-dnd\n\n  %c" + clean(message) + "\n\n  %c\uD83D\uDC77\u200D This is a development only message. It will be removed in production builds.\n");
+  return clean$2("\n  %creact-beautiful-dnd\n\n  %c" + clean$2(message) + "\n\n  %c\uD83D\uDC77\u200D This is a development only message. It will be removed in production builds.\n");
 };
 
 var getFormattedMessage = function getFormattedMessage(message) {
@@ -35,7 +30,7 @@ var isDisabledFlag = '__react-beautiful-dnd-disable-dev-warnings';
 function log(type, message) {
   var _console;
 
-  if (isProduction) {
+  if (isProduction$1) {
     return;
   }
 
@@ -48,7 +43,7 @@ function log(type, message) {
 var warning = log.bind(null, 'warn');
 var error = log.bind(null, 'error');
 
-function noop() {}
+function noop$2() {}
 
 function getOptions(shared, fromBinding) {
   return _extends({}, shared, {}, fromBinding);
@@ -69,8 +64,8 @@ function bindEvents(el, bindings, sharedOptions) {
   };
 }
 
-var isProduction$1 = process.env.NODE_ENV === 'production';
-var prefix = 'Invariant failed';
+var isProduction = process.env.NODE_ENV === 'production';
+var prefix$1 = 'Invariant failed';
 function RbdInvariant(message) {
   this.message = message;
 }
@@ -84,10 +79,10 @@ function invariant(condition, message) {
     return;
   }
 
-  if (isProduction$1) {
-    throw new RbdInvariant(prefix);
+  if (isProduction) {
+    throw new RbdInvariant(prefix$1);
   } else {
-    throw new RbdInvariant(prefix + ": " + (message || ''));
+    throw new RbdInvariant(prefix$1 + ": " + (message || ''));
   }
 }
 
@@ -103,7 +98,7 @@ var ErrorBoundary = function (_React$Component) {
 
     _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
     _this.callbacks = null;
-    _this.unbind = noop;
+    _this.unbind = noop$2;
 
     _this.onWindowError = function (event) {
       var callbacks = _this.getCallbacks();
@@ -170,7 +165,7 @@ var ErrorBoundary = function (_React$Component) {
   };
 
   return ErrorBoundary;
-}(React__default.Component);
+}(React.Component);
 
 var dragHandleUsageInstructions = "\n  Press space bar to start a drag.\n  When dragging you can use the arrow keys to move the item around and escape to cancel.\n  Some screen readers may require you to be in focus mode or to use your pass through key\n";
 
@@ -249,6 +244,7 @@ var preset = {
   onDragUpdate: onDragUpdate,
   onDragEnd: onDragEnd
 };
+var preset$1 = preset;
 
 var origin = {
   x: 0,
@@ -266,7 +262,7 @@ var subtract = function subtract(point1, point2) {
     y: point1.y - point2.y
   };
 };
-var isEqual = function isEqual(point1, point2) {
+var isEqual$1 = function isEqual(point1, point2) {
   return point1.x === point2.x && point1.y === point2.y;
 };
 var negate = function negate(point) {
@@ -287,7 +283,7 @@ var patch = function patch(line, value, otherValue) {
 var distance = function distance(point1, point2) {
   return Math.sqrt(Math.pow(point2.x - point1.x, 2) + Math.pow(point2.y - point1.y, 2));
 };
-var closest = function closest(target, points) {
+var closest$1 = function closest(target, points) {
   return Math.min.apply(Math, points.map(function (point) {
     return distance(target, point);
   }));
@@ -346,7 +342,7 @@ var noSpacing = {
   left: 0
 };
 
-var scroll = function scroll(target, frame) {
+var scroll$1 = function scroll(target, frame) {
   if (!frame) {
     return target;
   }
@@ -377,7 +373,7 @@ var getSubject = (function (_ref) {
       withPlaceholder = _ref.withPlaceholder,
       axis = _ref.axis,
       frame = _ref.frame;
-  var scrolled = scroll(page.marginBox, frame);
+  var scrolled = scroll$1(page.marginBox, frame);
   var increased = increase(scrolled, axis, withPlaceholder);
   var clipped = clip(increased, frame);
   return {
@@ -595,6 +591,7 @@ var noImpact = {
   displacedBy: noDisplacedBy,
   at: null
 };
+var noImpact$1 = noImpact;
 
 var isWithin = (function (lowerBound, upperBound) {
   return function (value) {
@@ -696,7 +693,7 @@ var isVisibleInViewport = function isVisibleInViewport(target, viewport, isVisib
   return isVisibleThroughFrameFn(viewport)(target);
 };
 
-var isVisible = function isVisible(_ref) {
+var isVisible$1 = function isVisible(_ref) {
   var toBeDisplaced = _ref.target,
       destination = _ref.destination,
       viewport = _ref.viewport,
@@ -707,17 +704,17 @@ var isVisible = function isVisible(_ref) {
 };
 
 var isPartiallyVisible = function isPartiallyVisible(args) {
-  return isVisible(_extends({}, args, {
+  return isVisible$1(_extends({}, args, {
     isVisibleThroughFrameFn: isPartiallyVisibleThroughFrame
   }));
 };
 var isTotallyVisible = function isTotallyVisible(args) {
-  return isVisible(_extends({}, args, {
+  return isVisible$1(_extends({}, args, {
     isVisibleThroughFrameFn: isTotallyVisibleThroughFrame
   }));
 };
 var isTotallyVisibleOnAxis = function isTotallyVisibleOnAxis(args) {
-  return isVisible(_extends({}, args, {
+  return isVisible$1(_extends({}, args, {
     isVisibleThroughFrameFn: isTotallyVisibleThroughFrameOnAxis(args.destination.axis)
   }));
 };
@@ -1199,7 +1196,7 @@ var scrollViewport = (function (viewport, newScroll) {
   return updated;
 });
 
-function getDraggables(ids, draggables) {
+function getDraggables$1(ids, draggables) {
   return ids.map(function (id) {
     return draggables[id];
   });
@@ -1227,7 +1224,7 @@ var speculativelyIncrease = (function (_ref) {
   var scrolledDroppable = destination.frame ? scrollDroppable(destination, add(destination.frame.scroll.current, maxScrollChange)) : destination;
   var last = impact.displaced;
   var withViewportScroll = getDisplacementGroups({
-    afterDragging: getDraggables(last.all, draggables),
+    afterDragging: getDraggables$1(last.all, draggables),
     destination: destination,
     displacedBy: impact.displacedBy,
     viewport: scrolledViewport.frame,
@@ -1235,7 +1232,7 @@ var speculativelyIncrease = (function (_ref) {
     forceShouldAnimate: false
   });
   var withDroppableScroll = getDisplacementGroups({
-    afterDragging: getDraggables(last.all, draggables),
+    afterDragging: getDraggables$1(last.all, draggables),
     destination: scrolledDroppable,
     displacedBy: impact.displacedBy,
     viewport: viewport.frame,
@@ -1459,8 +1456,8 @@ var getBestCrossAxisDroppable = (function (_ref) {
   }
 
   return candidates.sort(function (a, b) {
-    var first = closest(pageBorderBoxCenter, getCorners(getKnownActive(a)));
-    var second = closest(pageBorderBoxCenter, getCorners(getKnownActive(b)));
+    var first = closest$1(pageBorderBoxCenter, getCorners(getKnownActive(a)));
+    var second = closest$1(pageBorderBoxCenter, getCorners(getKnownActive(b)));
 
     if (first !== second) {
       return first - second;
@@ -1768,7 +1765,7 @@ var whatIsDraggedOver = (function (impact) {
   return at.combine.droppableId;
 });
 
-var getDroppableOver = function getDroppableOver(impact, droppables) {
+var getDroppableOver$1 = function getDroppableOver(impact, droppables) {
   var id = whatIsDraggedOver(impact);
   return id ? droppables[id] : null;
 };
@@ -1776,7 +1773,7 @@ var getDroppableOver = function getDroppableOver(impact, droppables) {
 var moveInDirection = (function (_ref) {
   var state = _ref.state,
       type = _ref.type;
-  var isActuallyOver = getDroppableOver(state.impact, state.dimensions.droppables);
+  var isActuallyOver = getDroppableOver$1(state.impact, state.dimensions.droppables);
   var isMainAxisMovementAllowed = Boolean(isActuallyOver);
   var home = state.dimensions.droppables[state.critical.droppable.id];
   var isOver = isActuallyOver || home;
@@ -1849,7 +1846,7 @@ function getFurthestAway(_ref) {
   return sorted[0] ? sorted[0].id : null;
 }
 
-function getDroppableOver$1(_ref2) {
+function getDroppableOver(_ref2) {
   var pageBorderBox = _ref2.pageBorderBox,
       draggable = _ref2.draggable,
       droppables = _ref2.droppables;
@@ -2071,14 +2068,14 @@ var getDragImpact = (function (_ref) {
       viewport = _ref.viewport,
       afterCritical = _ref.afterCritical;
   var pageBorderBox = offsetRectByPosition(draggable.page.borderBox, pageOffset);
-  var destinationId = getDroppableOver$1({
+  var destinationId = getDroppableOver({
     pageBorderBox: pageBorderBox,
     draggable: draggable,
     droppables: droppables
   });
 
   if (!destinationId) {
-    return noImpact;
+    return noImpact$1;
   }
 
   var destination = droppables[destinationId];
@@ -2233,7 +2230,7 @@ var update = (function (_ref) {
   return result;
 });
 
-function getDraggables$1(ids, draggables) {
+function getDraggables(ids, draggables) {
   return ids.map(function (id) {
     return draggables[id];
   });
@@ -2246,7 +2243,7 @@ var recompute = (function (_ref) {
       destination = _ref.destination,
       forceShouldAnimate = _ref.forceShouldAnimate;
   var last = impact.displaced;
-  var afterDragging = getDraggables$1(last.all, draggables);
+  var afterDragging = getDraggables(last.all, draggables);
   var displaced = getDisplacementGroups({
     afterDragging: afterDragging,
     destination: destination,
@@ -2543,18 +2540,18 @@ function removeScrollJumpRequest(state) {
   return state;
 }
 
-var idle = {
+var idle$2 = {
   phase: 'IDLE',
   completed: null,
   shouldFlush: false
 };
 var reducer = (function (state, action) {
   if (state === void 0) {
-    state = idle;
+    state = idle$2;
   }
 
   if (action.type === 'FLUSH') {
-    return _extends({}, idle, {
+    return _extends({}, idle$2, {
       shouldFlush: true
     });
   }
@@ -2646,7 +2643,7 @@ var reducer = (function (state, action) {
     !isMovementAllowed(state) ? process.env.NODE_ENV !== "production" ? invariant(false, action.type + " not permitted in phase " + state.phase) : invariant(false) : void 0;
     var _clientSelection = action.payload.client;
 
-    if (isEqual(_clientSelection, state.current.client.selection)) {
+    if (isEqual$1(_clientSelection, state.current.client.selection)) {
       return state;
     }
 
@@ -2729,7 +2726,7 @@ var reducer = (function (state, action) {
     !state.isWindowScrollAllowed ? process.env.NODE_ENV !== "production" ? invariant(false, 'Window scrolling is currently not supported for fixed lists') : invariant(false) : void 0;
     var _newScroll = action.payload.newScroll;
 
-    if (isEqual(state.viewport.scroll.current, _newScroll)) {
+    if (isEqual$1(state.viewport.scroll.current, _newScroll)) {
       return removeScrollJumpRequest(state);
     }
 
@@ -2755,7 +2752,7 @@ var reducer = (function (state, action) {
 
     var maxScroll = action.payload.maxScroll;
 
-    if (isEqual(maxScroll, state.viewport.scroll.max)) {
+    if (isEqual$1(maxScroll, state.viewport.scroll.max)) {
       return state;
     }
 
@@ -2845,7 +2842,7 @@ var beforeInitialCapture = function beforeInitialCapture(args) {
     payload: args
   };
 };
-var lift = function lift(args) {
+var lift$1 = function lift(args) {
   return {
     type: 'LIFT',
     payload: args
@@ -2947,7 +2944,7 @@ var completeDrop = function completeDrop(args) {
     payload: args
   };
 };
-var drop = function drop(args) {
+var drop$1 = function drop(args) {
   return {
     type: 'DROP',
     payload: args
@@ -3003,7 +3000,7 @@ function validateDimensions(critical, dimensions) {
   }
 }
 
-var lift$1 = (function (marshal) {
+var lift = (function (marshal) {
   return function (_ref) {
     var getState = _ref.getState,
         dispatch = _ref.dispatch;
@@ -3111,7 +3108,7 @@ var transitions = {
 };
 
 var moveTo = function moveTo(offset) {
-  return isEqual(offset, origin) ? null : "translate(" + offset.x + "px, " + offset.y + "px)";
+  return isEqual$1(offset, origin) ? null : "translate(" + offset.x + "px, " + offset.y + "px)";
 };
 
 var transforms = {
@@ -3218,7 +3215,7 @@ var getDropImpact = (function (_ref) {
   };
 });
 
-var drop$1 = (function (_ref) {
+var drop = (function (_ref) {
   var getState = _ref.getState,
       dispatch = _ref.dispatch;
   return function (next) {
@@ -3289,7 +3286,7 @@ var drop$1 = (function (_ref) {
         result: result,
         impact: impact
       };
-      var isAnimationRequired = !isEqual(state.current.client.offset, newHomeClientOffset) || Boolean(result.combine);
+      var isAnimationRequired = !isEqual$1(state.current.client.offset, newHomeClientOffset) || Boolean(result.combine);
 
       if (!isAnimationRequired) {
         dispatch(completeDrop({
@@ -3346,10 +3343,10 @@ function getScrollListener(_ref) {
 
   var scheduled = rafSchd(updateScroll);
   var binding = getWindowScrollBinding(scheduled);
-  var unbind = noop;
+  var unbind = noop$2;
 
   function isActive() {
-    return unbind !== noop;
+    return unbind !== noop$2;
   }
 
   function start() {
@@ -3361,7 +3358,7 @@ function getScrollListener(_ref) {
     !isActive() ? process.env.NODE_ENV !== "production" ? invariant(false, 'Cannot stop scroll listener when not active') : invariant(false) : void 0;
     scheduled.cancel();
     unbind();
-    unbind = noop;
+    unbind = noop$2;
   }
 
   return {
@@ -3581,7 +3578,7 @@ var getPublisher = (function (getResponders, announce) {
     };
     asyncMarshal.add(function () {
       withTimings('onDragStart', function () {
-        return execute(getResponders().onDragStart, data, announce, preset.onDragStart);
+        return execute(getResponders().onDragStart, data, announce, preset$1.onDragStart);
       });
     });
   };
@@ -3619,7 +3616,7 @@ var getPublisher = (function (getResponders, announce) {
 
     asyncMarshal.add(function () {
       withTimings('onDragUpdate', function () {
-        return execute(getResponders().onDragUpdate, data, announce, preset.onDragUpdate);
+        return execute(getResponders().onDragUpdate, data, announce, preset$1.onDragUpdate);
       });
     });
   };
@@ -3633,7 +3630,7 @@ var getPublisher = (function (getResponders, announce) {
     !dragging ? process.env.NODE_ENV !== "production" ? invariant(false, 'Cannot fire onDragEnd when there is no matching onDragStart') : invariant(false) : void 0;
     dragging = null;
     withTimings('onDragEnd', function () {
-      return execute(getResponders().onDragEnd, result, announce, preset.onDragEnd);
+      return execute(getResponders().onDragEnd, result, announce, preset$1.onDragEnd);
     });
   };
 
@@ -3875,7 +3872,7 @@ var pendingDrop = (function (store) {
         return;
       }
 
-      store.dispatch(drop({
+      store.dispatch(drop$1({
         reason: postActionState.reason
       }));
     };
@@ -3892,7 +3889,7 @@ var createStore = (function (_ref) {
       getResponders = _ref.getResponders,
       announce = _ref.announce,
       autoScroller = _ref.autoScroller;
-  return redux.createStore(reducer, composeEnhancers(redux.applyMiddleware(style(styleMarshal), dimensionMarshalStopper(dimensionMarshal), lift$1(dimensionMarshal), drop$1, dropAnimationFinish, dropAnimationFlushOnScroll, pendingDrop, autoScroll(autoScroller), scrollListener, focus(focusMarshal), responders(getResponders, announce))));
+  return redux.createStore(reducer, composeEnhancers(redux.applyMiddleware(style(styleMarshal), dimensionMarshalStopper(dimensionMarshal), lift(dimensionMarshal), drop, dropAnimationFinish, dropAnimationFlushOnScroll, pendingDrop, autoScroll(autoScroller), scrollListener, focus(focusMarshal), responders(getResponders, announce))));
 });
 
 var clean$1 = function clean() {
@@ -4305,6 +4302,7 @@ var config = {
     accelerateAt: 360
   }
 };
+var config$1 = config;
 
 var minScroll = 1;
 
@@ -4313,7 +4311,7 @@ var getValueFromDistance = (function (distanceToEdge, thresholds, configOverride
     return 0;
   }
 
-  var maxSpeed = (configOverride == null ? void 0 : configOverride.maxPixelScroll) || config.maxPixelScroll;
+  var maxSpeed = (configOverride == null ? void 0 : configOverride.maxPixelScroll) || config$1.maxPixelScroll;
 
   if (distanceToEdge <= thresholds.maxScrollValueAt) {
     return maxSpeed;
@@ -4329,18 +4327,18 @@ var getValueFromDistance = (function (distanceToEdge, thresholds, configOverride
     current: distanceToEdge
   });
   var percentageFromStartScrollingFrom = 1 - percentageFromMaxScrollValueAt;
-  var scroll = maxSpeed * config.ease(percentageFromStartScrollingFrom);
+  var scroll = maxSpeed * config$1.ease(percentageFromStartScrollingFrom);
   return Math.ceil(scroll);
 });
 
-var defaultAccelerateAt = config.durationDampening.accelerateAt;
-var defaultStopAt = config.durationDampening.stopDampeningAt;
+var defaultAccelerateAt = config$1.durationDampening.accelerateAt;
+var defaultStopAt = config$1.durationDampening.stopDampeningAt;
 var dampenValueByTime = (function (proposedScroll, dragStartTime, configOverride) {
   var _configOverride$durat, _configOverride$durat2;
 
   var accelerateAt = (configOverride == null ? void 0 : (_configOverride$durat = configOverride.durationDampening) == null ? void 0 : _configOverride$durat.accelerateAt) || defaultAccelerateAt;
   var stopAt = (configOverride == null ? void 0 : (_configOverride$durat2 = configOverride.durationDampening) == null ? void 0 : _configOverride$durat2.stopDampeningAt) || defaultStopAt;
-  var ease = (configOverride == null ? void 0 : configOverride.ease) || config.ease;
+  var ease = (configOverride == null ? void 0 : configOverride.ease) || config$1.ease;
   var startOfRange = dragStartTime;
   var endOfRange = stopAt;
   var now = Date.now();
@@ -4547,8 +4545,8 @@ var bufferThresholds = (function (_ref) {
 });
 
 var getDistanceThresholds = (function (container, axis, configOverride) {
-  var startFromPercentage = (configOverride == null ? void 0 : configOverride.startFromPercentage) || config.startFromPercentage;
-  var maxScrollAtPercentage = (configOverride == null ? void 0 : configOverride.maxScrollAtPercentage) || config.maxScrollAtPercentage;
+  var startFromPercentage = (configOverride == null ? void 0 : configOverride.startFromPercentage) || config$1.startFromPercentage;
+  var maxScrollAtPercentage = (configOverride == null ? void 0 : configOverride.maxScrollAtPercentage) || config$1.maxScrollAtPercentage;
   var startScrollingFrom = container[axis.size] * startFromPercentage;
   var maxScrollValueAt = container[axis.size] * maxScrollAtPercentage;
   var thresholds = {
@@ -4558,10 +4556,10 @@ var getDistanceThresholds = (function (container, axis, configOverride) {
   return thresholds;
 });
 
-var clean$2 = apply(function (value) {
+var clean = apply(function (value) {
   return value === 0 ? 0 : value;
 });
-var getScroll = (function (_ref) {
+var getScroll$1 = (function (_ref) {
   var dragStartTime = _ref.dragStartTime,
       container = _ref.container,
       containerScroll = _ref.containerScroll,
@@ -4596,12 +4594,12 @@ var getScroll = (function (_ref) {
     shouldUseTimeDampening: shouldUseTimeDampening,
     thresholds: thresholdsHorizontal
   });
-  var required = clean$2({
+  var required = clean({
     x: x,
     y: y
   });
 
-  if (isEqual(required, origin)) {
+  if (isEqual$1(required, origin)) {
     return null;
   }
 
@@ -4648,7 +4646,7 @@ var getScroll = (function (_ref) {
     }
   }
 
-  return isEqual(scroll, origin) ? null : scroll;
+  return isEqual$1(scroll, origin) ? null : scroll;
 });
 
 var smallestSigned = apply(function (value) {
@@ -4681,7 +4679,7 @@ var getOverlap = function () {
       y: getRemainder(targetScroll.y, max.y)
     };
 
-    if (isEqual(overlap, origin)) {
+    if (isEqual$1(overlap, origin)) {
       return null;
     }
 
@@ -4780,7 +4778,7 @@ var getWindowScrollChange = (function (_ref) {
     x: viewport.scroll.current.x,
     y: viewport.scroll.current.y
   };
-  var scroll = getScroll({
+  var scroll = getScroll$1({
     dragStartTime: dragStartTime,
     container: viewport.frame,
     containerScroll: viewport.scroll,
@@ -4808,7 +4806,7 @@ var getDroppableScrollChange = (function (_ref) {
     return null;
   }
 
-  var scroll = getScroll({
+  var scroll = getScroll$1({
     dragStartTime: dragStartTime,
     container: frame.pageMarginBox,
     containerScroll: frame.scroll,
@@ -4821,7 +4819,7 @@ var getDroppableScrollChange = (function (_ref) {
   return scroll && canScrollDroppable(droppable, scroll) ? scroll : null;
 });
 
-var scroll$1 = (function (_ref) {
+var scroll = (function (_ref) {
   var state = _ref.state,
       dragStartTime = _ref.dragStartTime,
       shouldUseTimeDampening = _ref.shouldUseTimeDampening,
@@ -4890,7 +4888,7 @@ var createFluidScroller = (function (_ref) {
     var _dragging = dragging,
         shouldUseTimeDampening = _dragging.shouldUseTimeDampening,
         dragStartTime = _dragging.dragStartTime;
-    scroll$1({
+    scroll({
       state: state,
       scrollWindow: scheduleWindowScroll,
       scrollDroppable: scheduleDroppableScroll,
@@ -4910,7 +4908,7 @@ var createFluidScroller = (function (_ref) {
       wasScrollNeeded = true;
     };
 
-    scroll$1({
+    scroll({
       state: state,
       dragStartTime: 0,
       shouldUseTimeDampening: false,
@@ -5067,9 +5065,9 @@ var createAutoScroller = (function (_ref) {
   return scroller;
 });
 
-var prefix$1 = 'data-rbd';
+var prefix = 'data-rbd';
 var dragHandle = function () {
-  var base = prefix$1 + "-drag-handle";
+  var base = prefix + "-drag-handle";
   return {
     base: base,
     draggableId: base + "-draggable-id",
@@ -5077,7 +5075,7 @@ var dragHandle = function () {
   };
 }();
 var draggable = function () {
-  var base = prefix$1 + "-draggable";
+  var base = prefix + "-draggable";
   return {
     base: base,
     contextId: base + "-context-id",
@@ -5085,7 +5083,7 @@ var draggable = function () {
   };
 }();
 var droppable = function () {
-  var base = prefix$1 + "-droppable";
+  var base = prefix + "-droppable";
   return {
     base: base,
     contextId: base + "-context-id",
@@ -5093,7 +5091,7 @@ var droppable = function () {
   };
 }();
 var scrollContainer = {
-  contextId: prefix$1 + "-scroll-container-context-id"
+  contextId: prefix + "-scroll-container-context-id"
 };
 
 var makeGetSelector = function makeGetSelector(context) {
@@ -5166,6 +5164,7 @@ var getStyles$1 = (function (contextId) {
 });
 
 var useIsomorphicLayoutEffect = typeof window !== 'undefined' && typeof window.document !== 'undefined' && typeof window.document.createElement !== 'undefined' ? React.useLayoutEffect : React.useEffect;
+var useLayoutEffect = useIsomorphicLayoutEffect;
 
 var getHead = function getHead() {
   var head = document.querySelector('head');
@@ -5200,14 +5199,14 @@ function useStyleMarshal(contextId, nonce) {
     !el ? process.env.NODE_ENV !== "production" ? invariant(false, 'Cannot set dynamic style element if it is not set') : invariant(false) : void 0;
     el.textContent = proposed;
   }, []);
-  useIsomorphicLayoutEffect(function () {
+  useLayoutEffect(function () {
     !(!alwaysRef.current && !dynamicRef.current) ? process.env.NODE_ENV !== "production" ? invariant(false, 'style elements already mounted') : invariant(false) : void 0;
     var always = createStyleEl(nonce);
     var dynamic = createStyleEl(nonce);
     alwaysRef.current = always;
     dynamicRef.current = dynamic;
-    always.setAttribute(prefix$1 + "-always", contextId);
-    dynamic.setAttribute(prefix$1 + "-dynamic", contextId);
+    always.setAttribute(prefix + "-always", contextId);
+    dynamic.setAttribute(prefix + "-dynamic", contextId);
     getHead().appendChild(always);
     getHead().appendChild(dynamic);
     setAlwaysStyle(styles.always);
@@ -5350,7 +5349,7 @@ function useFocusMarshal(contextId) {
 
     recordRef.current = id;
   }, []);
-  useIsomorphicLayoutEffect(function () {
+  useLayoutEffect(function () {
     isMountedRef.current = true;
     return function clearFrameOnUnmount() {
       isMountedRef.current = false;
@@ -5525,7 +5524,7 @@ function useRegistry() {
   return registry;
 }
 
-var StoreContext = React__default.createContext(null);
+var StoreContext = React.createContext(null);
 
 var getBodyElement = (function () {
   var body = document.body;
@@ -5544,6 +5543,7 @@ var visuallyHidden = {
   clip: 'rect(0 0 0 0)',
   'clip-path': 'inset(100%)'
 };
+var visuallyHidden$1 = visuallyHidden;
 
 var getId = function getId(contextId) {
   return "rbd-announcement-" + contextId;
@@ -5560,7 +5560,7 @@ function useAnnouncer(contextId) {
     el.setAttribute('aria-live', 'assertive');
     el.setAttribute('aria-atomic', 'true');
 
-    _extends(el.style, visuallyHidden);
+    _extends(el.style, visuallyHidden$1);
 
     getBodyElement().appendChild(el);
     return function cleanup() {
@@ -5590,12 +5590,12 @@ function useAnnouncer(contextId) {
   return announce;
 }
 
-var count = 0;
+var count$1 = 0;
 var defaults = {
   separator: '::'
 };
-function reset() {
-  count = 0;
+function reset$1() {
+  count$1 = 0;
 }
 function useUniqueId(prefix, options) {
   if (options === void 0) {
@@ -5603,7 +5603,7 @@ function useUniqueId(prefix, options) {
   }
 
   return useMemoOne.useMemo(function () {
-    return "" + prefix + options.separator + count++;
+    return "" + prefix + options.separator + count$1++;
   }, [options.separator, prefix]);
 }
 
@@ -5641,7 +5641,7 @@ function useHiddenTextElement(_ref2) {
   return id;
 }
 
-var AppContext = React__default.createContext(null);
+var AppContext = React.createContext(null);
 
 var peerDependencies = {
 	react: "^16.8.5 || ^17.0.0 || ^18.0.0",
@@ -5733,7 +5733,7 @@ function useDevSetupWarning(fn, inputs) {
 
 function useStartupValidation() {
   useDevSetupWarning(function () {
-    checkReactVersion(peerDependencies.react, React__default.version);
+    checkReactVersion(peerDependencies.react, React.version);
     checkDoctype(document);
   }, []);
 }
@@ -5822,6 +5822,8 @@ var supportedEventName = function () {
   return supported || base;
 }();
 
+var supportedPageVisibilityEventName = supportedEventName;
+
 var primaryButton = 0;
 var sloppyClickThreshold = 5;
 
@@ -5946,14 +5948,14 @@ function getCaptureBindings(_ref) {
       event.preventDefault();
     }
   }, {
-    eventName: supportedEventName,
+    eventName: supportedPageVisibilityEventName,
     fn: cancel
   }];
 }
 
 function useMouseSensor(api) {
   var phaseRef = React.useRef(idle$1);
-  var unbindEventsRef = React.useRef(noop);
+  var unbindEventsRef = React.useRef(noop$2);
   var startCaptureBinding = useMemoOne.useMemo(function () {
     return {
       eventName: 'mousedown',
@@ -6084,7 +6086,7 @@ function useMouseSensor(api) {
     };
     bindCapturingEvents();
   }, [bindCapturingEvents]);
-  useIsomorphicLayoutEffect(function mount() {
+  useLayoutEffect(function mount() {
     listenForCapture();
     return function unmount() {
       unbindEventsRef.current();
@@ -6177,7 +6179,7 @@ function getDraggingBindings(actions, stop) {
       passive: true
     }
   }, {
-    eventName: supportedEventName,
+    eventName: supportedPageVisibilityEventName,
     fn: cancel
   }];
 }
@@ -6236,7 +6238,7 @@ function useKeyboardSensor(api) {
     };
     unbindEventsRef.current = bindEvents(window, [startCaptureBinding], options);
   }, [startCaptureBinding]);
-  useIsomorphicLayoutEffect(function mount() {
+  useLayoutEffect(function mount() {
     listenForCapture();
     return function unmount() {
       unbindEventsRef.current();
@@ -6244,7 +6246,7 @@ function useKeyboardSensor(api) {
   }, [listenForCapture]);
 }
 
-var idle$2 = {
+var idle = {
   type: 'IDLE'
 };
 var timeForLongPress = 120;
@@ -6279,7 +6281,7 @@ function getWindowBindings(_ref) {
       cancel();
     }
   }, {
-    eventName: supportedEventName,
+    eventName: supportedPageVisibilityEventName,
     fn: cancel
   }];
 }
@@ -6379,14 +6381,14 @@ function getHandleBindings(_ref2) {
       event.preventDefault();
     }
   }, {
-    eventName: supportedEventName,
+    eventName: supportedPageVisibilityEventName,
     fn: cancel
   }];
 }
 
 function useTouchSensor(api) {
-  var phaseRef = React.useRef(idle$2);
-  var unbindEventsRef = React.useRef(noop);
+  var phaseRef = React.useRef(idle);
+  var unbindEventsRef = React.useRef(noop$2);
   var getPhase = useMemoOne.useCallback(function getPhase() {
     return phaseRef.current;
   }, []);
@@ -6447,7 +6449,7 @@ function useTouchSensor(api) {
       clearTimeout(current.longPressTimerId);
     }
 
-    setPhase(idle$2);
+    setPhase(idle);
     unbindEventsRef.current();
     listenForCapture();
   }, [listenForCapture, setPhase]);
@@ -6504,7 +6506,7 @@ function useTouchSensor(api) {
     });
     bindCapturingEvents(target);
   }, [bindCapturingEvents, getPhase, setPhase, startDragging]);
-  useIsomorphicLayoutEffect(function mount() {
+  useLayoutEffect(function mount() {
     listenForCapture();
     return function unmount() {
       unbindEventsRef.current();
@@ -6512,11 +6514,11 @@ function useTouchSensor(api) {
 
       if (phase.type === 'PENDING') {
         clearTimeout(phase.longPressTimerId);
-        setPhase(idle$2);
+        setPhase(idle);
       }
     };
   }, [getPhase, listenForCapture, setPhase]);
-  useIsomorphicLayoutEffect(function webkitHack() {
+  useLayoutEffect(function webkitHack() {
     var unbind = bindEvents(window, [{
       eventName: 'touchmove',
       fn: function fn() {},
@@ -6617,7 +6619,7 @@ function closestPonyfill(el, selector) {
   return closestPonyfill(el.parentElement, selector);
 }
 
-function closest$1(el, selector) {
+function closest(el, selector) {
   if (el.closest) {
     return el.closest(selector);
   }
@@ -6638,7 +6640,7 @@ function findClosestDragHandleFromEvent(contextId, event) {
   }
 
   var selector = getSelector(contextId);
-  var handle = closest$1(target, selector);
+  var handle = closest(target, selector);
 
   if (!handle) {
     return null;
@@ -6768,7 +6770,7 @@ function tryStart(_ref3) {
     return null;
   }
 
-  var lock = lockAPI.claim(forceSensorStop || noop);
+  var lock = lockAPI.claim(forceSensorStop || noop$2);
   var phase = 'PRE_DRAG';
 
   function getShouldRespectForcePress() {
@@ -6792,7 +6794,7 @@ function tryStart(_ref3) {
 
   var tryDispatchWhenDragging = tryDispatch.bind(null, 'DRAGGING');
 
-  function lift$1(args) {
+  function lift(args) {
     function completed() {
       lockAPI.release();
       phase = 'COMPLETED';
@@ -6803,7 +6805,7 @@ function tryStart(_ref3) {
       !(phase === 'PRE_DRAG') ? process.env.NODE_ENV !== "production" ? invariant(false, "Cannot lift in phase " + phase) : invariant(false) : void 0;
     }
 
-    store.dispatch(lift(args.liftActionArgs));
+    store.dispatch(lift$1(args.liftActionArgs));
     phase = 'DRAGGING';
 
     function finish(reason, options) {
@@ -6829,7 +6831,7 @@ function tryStart(_ref3) {
       }
 
       completed();
-      store.dispatch(drop({
+      store.dispatch(drop$1({
         reason: reason
       }));
     }
@@ -6861,7 +6863,7 @@ function tryStart(_ref3) {
         });
       });
     });
-    var api = lift$1({
+    var api = lift({
       liftActionArgs: {
         id: draggableId,
         clientSelection: clientSelection,
@@ -6894,13 +6896,13 @@ function tryStart(_ref3) {
         return tryDispatchWhenDragging(moveLeft);
       }
     };
-    return lift$1({
+    return lift({
       liftActionArgs: {
         id: draggableId,
         clientSelection: getBorderBoxCenterPosition(el),
         movementMode: 'SNAP'
       },
-      cleanup: noop,
+      cleanup: noop$2,
       actions: actions
     });
   }
@@ -6951,7 +6953,7 @@ function useSensorMarshal(_ref4) {
       lockAPI.tryAbandon();
     }
   }, [lockAPI]);
-  useIsomorphicLayoutEffect(function listenToStore() {
+  useLayoutEffect(function listenToStore() {
     var previous = store.getState();
     var unsubscribe = store.subscribe(function () {
       var current = store.getState();
@@ -6960,7 +6962,7 @@ function useSensorMarshal(_ref4) {
     });
     return unsubscribe;
   }, [lockAPI, store, tryAbandonLock]);
-  useIsomorphicLayoutEffect(function () {
+  useLayoutEffect(function () {
     return lockAPI.tryAbandon;
   }, [lockAPI.tryAbandon]);
   var canGetLock = useMemoOne.useCallback(function (draggableId) {
@@ -7149,33 +7151,33 @@ function App(props) {
   React.useEffect(function () {
     return tryResetStore;
   }, [tryResetStore]);
-  return React__default.createElement(AppContext.Provider, {
+  return React.createElement(AppContext.Provider, {
     value: appContext
-  }, React__default.createElement(reactRedux.Provider, {
+  }, React.createElement(reactRedux.Provider, {
     context: StoreContext,
     store: store
   }, props.children));
 }
 
-var count$1 = 0;
-function reset$1() {
-  count$1 = 0;
+var count = 0;
+function reset() {
+  count = 0;
 }
 function useInstanceCount() {
   return useMemoOne.useMemo(function () {
-    return "" + count$1++;
+    return "" + count++;
   }, []);
 }
 
 function resetServerContext() {
-  reset$1();
   reset();
+  reset$1();
 }
 function DragDropContext(props) {
   var contextId = useInstanceCount();
-  var dragHandleUsageInstructions = props.dragHandleUsageInstructions || preset.dragHandleUsageInstructions;
-  return React__default.createElement(ErrorBoundary, null, function (setCallbacks) {
-    return React__default.createElement(App, {
+  var dragHandleUsageInstructions = props.dragHandleUsageInstructions || preset$1.dragHandleUsageInstructions;
+  return React.createElement(ErrorBoundary, null, function (setCallbacks) {
+    return React.createElement(App, {
       nonce: props.nonce,
       contextId: contextId,
       setCallbacks: setCallbacks,
@@ -7192,15 +7194,15 @@ function DragDropContext(props) {
   });
 }
 
-var isEqual$1 = function isEqual(base) {
+var isEqual = function isEqual(base) {
   return function (value) {
     return base === value;
   };
 };
 
-var isScroll = isEqual$1('scroll');
-var isAuto = isEqual$1('auto');
-var isVisible$1 = isEqual$1('visible');
+var isScroll = isEqual('scroll');
+var isAuto = isEqual('auto');
+var isVisible = isEqual('visible');
 
 var isEither = function isEither(overflow, fn) {
   return fn(overflow.overflowX) || fn(overflow.overflowY);
@@ -7243,7 +7245,7 @@ var isBodyScrollable = function isBodyScrollable() {
     overflowY: htmlStyle.overflowY
   };
 
-  if (isBoth(htmlOverflow, isVisible$1)) {
+  if (isBoth(htmlOverflow, isVisible)) {
     return false;
   }
 
@@ -7271,12 +7273,14 @@ var getClosestScrollable = function getClosestScrollable(el) {
   return el;
 };
 
+var getClosestScrollable$1 = getClosestScrollable;
+
 var checkForNestedScrollContainers = (function (scrollable) {
   if (!scrollable) {
     return;
   }
 
-  var anotherScrollParent = getClosestScrollable(scrollable.parentElement);
+  var anotherScrollParent = getClosestScrollable$1(scrollable.parentElement);
 
   if (!anotherScrollParent) {
     return;
@@ -7285,7 +7289,7 @@ var checkForNestedScrollContainers = (function (scrollable) {
   process.env.NODE_ENV !== "production" ? warning("\n    Droppable: unsupported nested scroll container detected.\n    A Droppable can only have one scroll parent (which can be itself)\n    Nested scroll containers are currently not supported.\n\n    We hope to support nested scroll containers soon: https://github.com/atlassian/react-beautiful-dnd/issues/131\n  ") : void 0;
 });
 
-var getScroll$1 = (function (el) {
+var getScroll = (function (el) {
   return {
     x: el.scrollLeft,
     y: el.scrollTop
@@ -7307,7 +7311,7 @@ var getIsFixed = function getIsFixed(el) {
 };
 
 var getEnv = (function (start) {
-  var closestScrollable = getClosestScrollable(start);
+  var closestScrollable = getClosestScrollable$1(start);
   var isFixedOnPage = getIsFixed(start);
   return {
     closestScrollable: closestScrollable,
@@ -7407,7 +7411,7 @@ var getClient = function getClient(targetRef, closestScrollable) {
   return client;
 };
 
-var getDimension = (function (_ref) {
+var getDimension$1 = (function (_ref) {
   var ref = _ref.ref,
       descriptor = _ref.descriptor,
       env = _ref.env,
@@ -7433,7 +7437,7 @@ var getDimension = (function (_ref) {
     return {
       client: frameClient,
       page: cssBoxModel.withScroll(frameClient, windowScroll),
-      scroll: getScroll$1(closestScrollable),
+      scroll: getScroll(closestScrollable),
       scrollSize: scrollSize,
       shouldClipSubject: shouldClipSubject
     };
@@ -7504,7 +7508,7 @@ function useDroppablePublisher(args) {
       return origin;
     }
 
-    return getScroll$1(dragging.env.closestScrollable);
+    return getScroll(dragging.env.closestScrollable);
   }, []);
   var updateScroll = useMemoOne.useCallback(function () {
     var scroll = getClosestScroll();
@@ -7539,7 +7543,7 @@ function useDroppablePublisher(args) {
       scrollOptions: options
     };
     whileDraggingRef.current = dragging;
-    var dimension = getDimension({
+    var dimension = getDimension$1({
       ref: ref,
       descriptor: descriptor,
       env: env,
@@ -7566,7 +7570,7 @@ function useDroppablePublisher(args) {
     var dragging = whileDraggingRef.current;
     var closest = getClosestScrollableFromDrag(dragging);
     !(dragging && closest) ? process.env.NODE_ENV !== "production" ? invariant(false, 'Can only recollect Droppable client for Droppables that have a scroll container') : invariant(false) : void 0;
-    return getScroll$1(closest);
+    return getScroll(closest);
   }, []);
   var dragStopped = useMemoOne.useCallback(function () {
     var dragging = whileDraggingRef.current;
@@ -7605,7 +7609,7 @@ function useDroppablePublisher(args) {
       callbacks: callbacks
     };
   }, [callbacks, descriptor, uniqueId]);
-  useIsomorphicLayoutEffect(function () {
+  useLayoutEffect(function () {
     publishedDescriptorRef.current = entry.descriptor;
     registry.droppable.register(entry);
     return function () {
@@ -7617,14 +7621,14 @@ function useDroppablePublisher(args) {
       registry.droppable.unregister(entry);
     };
   }, [callbacks, descriptor, dragStopped, entry, marshal, registry.droppable]);
-  useIsomorphicLayoutEffect(function () {
+  useLayoutEffect(function () {
     if (!whileDraggingRef.current) {
       return;
     }
 
     marshal.updateDroppableIsEnabled(publishedDescriptorRef.current.id, !args.isDropDisabled);
   }, [args.isDropDisabled, marshal]);
-  useIsomorphicLayoutEffect(function () {
+  useLayoutEffect(function () {
     if (!whileDraggingRef.current) {
       return;
     }
@@ -7633,7 +7637,7 @@ function useDroppablePublisher(args) {
   }, [args.isCombineEnabled, marshal]);
 }
 
-function noop$2() {}
+function noop() {}
 
 var empty = {
   width: 0,
@@ -7661,7 +7665,7 @@ var getSize = function getSize(_ref) {
   };
 };
 
-var getStyle = function getStyle(_ref2) {
+var getStyle$1 = function getStyle(_ref2) {
   var isAnimatingOpenOnMount = _ref2.isAnimatingOpenOnMount,
       placeholder = _ref2.placeholder,
       animate = _ref2.animate;
@@ -7707,17 +7711,17 @@ function Placeholder(props) {
 
   React.useEffect(function () {
     if (!isAnimatingOpenOnMount) {
-      return noop$2;
+      return noop;
     }
 
     if (animate !== 'open') {
       tryClearAnimateOpenTimer();
       setIsAnimatingOpenOnMount(false);
-      return noop$2;
+      return noop;
     }
 
     if (animateOpenTimerRef.current) {
-      return noop$2;
+      return noop;
     }
 
     animateOpenTimerRef.current = setTimeout(function () {
@@ -7737,12 +7741,12 @@ function Placeholder(props) {
       onClose();
     }
   }, [animate, onClose, onTransitionEnd]);
-  var style = getStyle({
+  var style = getStyle$1({
     isAnimatingOpenOnMount: isAnimatingOpenOnMount,
     animate: props.animate,
     placeholder: props.placeholder
   });
-  return React__default.createElement(props.placeholder.tagName, {
+  return React.createElement(props.placeholder.tagName, {
     style: style,
     'data-rbd-placeholder-context-id': contextId,
     onTransitionEnd: onSizeChangeEnd,
@@ -7750,9 +7754,9 @@ function Placeholder(props) {
   });
 }
 
-var Placeholder$1 = React__default.memo(Placeholder);
+var Placeholder$1 = React.memo(Placeholder);
 
-var DroppableContext = React__default.createContext(null);
+var DroppableContext = React.createContext(null);
 
 function checkIsValidInnerRef(el) {
   !(el && isHtmlElement(el)) ? process.env.NODE_ENV !== "production" ? invariant(false, "\n    provided.innerRef has not been provided with a HTMLElement.\n\n    You can find a guide on using the innerRef callback functions at:\n    https://github.com/atlassian/react-beautiful-dnd/blob/master/docs/guides/using-inner-ref.md\n  ") : invariant(false) : void 0;
@@ -7804,7 +7808,7 @@ var virtual = [function hasClone(_ref5) {
   var getPlaceholderRef = _ref6.getPlaceholderRef;
   !!getPlaceholderRef() ? process.env.NODE_ENV !== "production" ? invariant(false, 'Expected virtual list to not have a placeholder') : invariant(false) : void 0;
 }];
-function useValidation(args) {
+function useValidation$1(args) {
   useDevSetupWarning(function () {
     runChecks(args, shared);
 
@@ -7896,7 +7900,7 @@ var AnimateInOut = function (_React$PureComponent) {
   };
 
   return AnimateInOut;
-}(React__default.PureComponent);
+}(React.PureComponent);
 
 var zIndexOptions = {
   dragging: 5000,
@@ -7964,11 +7968,11 @@ function getSecondaryStyle(secondary) {
   };
 }
 
-function getStyle$1(mapped) {
+function getStyle(mapped) {
   return mapped.type === 'DRAGGING' ? getDraggingStyle(mapped) : getSecondaryStyle(mapped);
 }
 
-function getDimension$1(descriptor, el, windowScroll) {
+function getDimension(descriptor, el, windowScroll) {
   if (windowScroll === void 0) {
     windowScroll = origin;
   }
@@ -8011,28 +8015,28 @@ function useDraggablePublisher(args) {
       isEnabled: isEnabled
     };
   }, [canDragInteractiveElements, isEnabled, shouldRespectForcePress]);
-  var getDimension = useMemoOne.useCallback(function (windowScroll) {
+  var getDimension$1 = useMemoOne.useCallback(function (windowScroll) {
     var el = getDraggableRef();
     !el ? process.env.NODE_ENV !== "production" ? invariant(false, 'Cannot get dimension when no ref is set') : invariant(false) : void 0;
-    return getDimension$1(descriptor, el, windowScroll);
+    return getDimension(descriptor, el, windowScroll);
   }, [descriptor, getDraggableRef]);
   var entry = useMemoOne.useMemo(function () {
     return {
       uniqueId: uniqueId,
       descriptor: descriptor,
       options: options,
-      getDimension: getDimension
+      getDimension: getDimension$1
     };
-  }, [descriptor, getDimension, options, uniqueId]);
+  }, [descriptor, getDimension$1, options, uniqueId]);
   var publishedRef = React.useRef(entry);
   var isFirstPublishRef = React.useRef(true);
-  useIsomorphicLayoutEffect(function () {
+  useLayoutEffect(function () {
     registry.draggable.register(publishedRef.current);
     return function () {
       return registry.draggable.unregister(publishedRef.current);
     };
   }, [registry.draggable]);
-  useIsomorphicLayoutEffect(function () {
+  useLayoutEffect(function () {
     if (isFirstPublishRef.current) {
       isFirstPublishRef.current = false;
       return;
@@ -8044,7 +8048,7 @@ function useDraggablePublisher(args) {
   }, [entry, registry.draggable]);
 }
 
-function useValidation$1(props, contextId, getRef) {
+function useValidation(props, contextId, getRef) {
   useDevSetupWarning(function () {
     function prefix(id) {
       return "Draggable[id: " + id + "]: ";
@@ -8113,7 +8117,7 @@ function Draggable(props) {
       isClone = props.isClone,
       mapped = props.mapped,
       dropAnimationFinishedAction = props.dropAnimationFinished;
-  useValidation$1(props, contextId, getRef);
+  useValidation(props, contextId, getRef);
   useClonePropValidation(isClone);
 
   if (!isClone) {
@@ -8157,7 +8161,7 @@ function Draggable(props) {
     dropAnimationFinishedAction();
   }, [dropAnimationFinishedAction, mapped]);
   var provided = useMemoOne.useMemo(function () {
-    var style = getStyle$1(mapped);
+    var style = getStyle(mapped);
     var onTransitionEnd = mapped.type === 'DRAGGING' && mapped.dropping ? onMoveEnd : null;
     var result = {
       innerRef: setRef,
@@ -8412,7 +8416,7 @@ function getSecondarySelector() {
   return selector;
 }
 
-var makeMapStateToProps = function makeMapStateToProps() {
+var makeMapStateToProps$1 = function makeMapStateToProps() {
   var draggingSelector = getDraggableSelector();
   var secondarySelector = getSecondarySelector();
 
@@ -8422,14 +8426,15 @@ var makeMapStateToProps = function makeMapStateToProps() {
 
   return selector;
 };
-var mapDispatchToProps = {
+var mapDispatchToProps$1 = {
   dropAnimationFinished: dropAnimationFinished
 };
-var ConnectedDraggable = reactRedux.connect(makeMapStateToProps, mapDispatchToProps, null, {
+var ConnectedDraggable = reactRedux.connect(makeMapStateToProps$1, mapDispatchToProps$1, null, {
   context: StoreContext,
   pure: true,
   areStatePropsEqual: isStrictEqual
 })(Draggable);
+var ConnectedDraggable$1 = ConnectedDraggable;
 
 function PrivateDraggable(props) {
   var droppableContext = useRequiredContext(DroppableContext);
@@ -8439,13 +8444,13 @@ function PrivateDraggable(props) {
     return null;
   }
 
-  return React__default.createElement(ConnectedDraggable, props);
+  return React.createElement(ConnectedDraggable$1, props);
 }
 function PublicDraggable(props) {
   var isEnabled = typeof props.isDragDisabled === 'boolean' ? !props.isDragDisabled : true;
   var canDragInteractiveElements = Boolean(props.disableInteractiveElementBlocking);
   var shouldRespectForcePress = Boolean(props.shouldRespectForcePress);
-  return React__default.createElement(PrivateDraggable, _extends({}, props, {
+  return React.createElement(PrivateDraggable, _extends({}, props, {
     isClone: false,
     isEnabled: isEnabled,
     canDragInteractiveElements: canDragInteractiveElements,
@@ -8484,7 +8489,7 @@ function Droppable(props) {
   var setPlaceholderRef = useMemoOne.useCallback(function (value) {
     placeholderRef.current = value;
   }, []);
-  useValidation({
+  useValidation$1({
     props: props,
     getDroppableRef: getDroppableRef,
     getPlaceholderRef: getPlaceholderRef
@@ -8506,14 +8511,14 @@ function Droppable(props) {
     ignoreContainerClipping: ignoreContainerClipping,
     getDroppableRef: getDroppableRef
   });
-  var placeholder = React__default.createElement(AnimateInOut, {
+  var placeholder = React.createElement(AnimateInOut, {
     on: props.placeholder,
     shouldAnimate: props.shouldAnimatePlaceholder
   }, function (_ref) {
     var onClose = _ref.onClose,
         data = _ref.data,
         animate = _ref.animate;
-    return React__default.createElement(Placeholder$1, {
+    return React.createElement(Placeholder$1, {
       placeholder: data,
       onClose: onClose,
       innerRef: setPlaceholderRef,
@@ -8548,7 +8553,7 @@ function Droppable(props) {
 
     var dragging = useClone.dragging,
         render = useClone.render;
-    var node = React__default.createElement(PrivateDraggable, {
+    var node = React.createElement(PrivateDraggable, {
       draggableId: dragging.draggableId,
       index: dragging.source.index,
       isClone: true,
@@ -8561,11 +8566,43 @@ function Droppable(props) {
     return ReactDOM.createPortal(node, getContainerForClone());
   }
 
-  return React__default.createElement(DroppableContext.Provider, {
+  return React.createElement(DroppableContext.Provider, {
     value: droppableContext
   }, children(provided, snapshot), getClone());
 }
 
+function getBody() {
+  !document.body ? process.env.NODE_ENV !== "production" ? invariant(false, 'document.body is not ready') : invariant(false) : void 0;
+  return document.body;
+}
+
+var defaultProps = {
+  mode: 'standard',
+  type: 'DEFAULT',
+  direction: 'vertical',
+  isDropDisabled: false,
+  isCombineEnabled: false,
+  ignoreContainerClipping: false,
+  renderClone: null,
+  getContainerForClone: getBody
+};
+
+var attachDefaultPropsToOwnProps = function attachDefaultPropsToOwnProps(ownProps) {
+  var mergedProps = _extends({}, ownProps);
+
+  var defaultPropKey;
+
+  for (defaultPropKey in defaultProps) {
+    if (ownProps[defaultPropKey] === undefined) {
+      var _extends2;
+
+      mergedProps = _extends({}, mergedProps, (_extends2 = {}, _extends2[defaultPropKey] = defaultProps[defaultPropKey], _extends2));
+    }
+  }
+
+  return mergedProps;
+};
+
 var isMatchingType = function isMatchingType(type, critical) {
   return type === critical.droppable.type;
 };
@@ -8574,7 +8611,7 @@ var getDraggable = function getDraggable(critical, dimensions) {
   return dimensions.draggables[critical.draggable.id];
 };
 
-var makeMapStateToProps$1 = function makeMapStateToProps() {
+var makeMapStateToProps = function makeMapStateToProps() {
   var idleWithAnimation = {
     placeholder: null,
     shouldAnimatePlaceholder: true,
@@ -8647,10 +8684,11 @@ var makeMapStateToProps$1 = function makeMapStateToProps() {
   });
 
   var selector = function selector(state, ownProps) {
-    var id = ownProps.droppableId;
-    var type = ownProps.type;
-    var isEnabled = !ownProps.isDropDisabled;
-    var renderClone = ownProps.renderClone;
+    var ownPropsWithDefaultProps = attachDefaultPropsToOwnProps(ownProps);
+    var id = ownPropsWithDefaultProps.droppableId;
+    var type = ownPropsWithDefaultProps.type;
+    var isEnabled = !ownPropsWithDefaultProps.isDropDisabled;
+    var renderClone = ownPropsWithDefaultProps.renderClone;
 
     if (state.isDragging) {
       var critical = state.critical;
@@ -8703,35 +8741,21 @@ var makeMapStateToProps$1 = function makeMapStateToProps() {
 
   return selector;
 };
-var mapDispatchToProps$1 = {
+var mapDispatchToProps = {
   updateViewportMaxScroll: updateViewportMaxScroll
 };
-
-function getBody() {
-  !document.body ? process.env.NODE_ENV !== "production" ? invariant(false, 'document.body is not ready') : invariant(false) : void 0;
-  return document.body;
-}
-
-var defaultProps = {
-  mode: 'standard',
-  type: 'DEFAULT',
-  direction: 'vertical',
-  isDropDisabled: false,
-  isCombineEnabled: false,
-  ignoreContainerClipping: false,
-  renderClone: null,
-  getContainerForClone: getBody
-};
-var ConnectedDroppable = reactRedux.connect(makeMapStateToProps$1, mapDispatchToProps$1, null, {
+var ConnectedDroppable = reactRedux.connect(makeMapStateToProps, mapDispatchToProps, function (stateProps, dispatchProps, ownProps) {
+  return _extends({}, attachDefaultPropsToOwnProps(ownProps), {}, stateProps, {}, dispatchProps);
+}, {
   context: StoreContext,
   pure: true,
   areStatePropsEqual: isStrictEqual
 })(Droppable);
-ConnectedDroppable.defaultProps = defaultProps;
+var ConnectedDroppable$1 = ConnectedDroppable;
 
 exports.DragDropContext = DragDropContext;
 exports.Draggable = PublicDraggable;
-exports.Droppable = ConnectedDroppable;
+exports.Droppable = ConnectedDroppable$1;
 exports.resetServerContext = resetServerContext;
 exports.useKeyboardSensor = useKeyboardSensor;
 exports.useMouseSensor = useMouseSensor;