@startlibs/components 1.1.5 → 1.2.0-rc.1

package/lib-yak/Draggable.mjs

@@ -0,0 +1,892 @@
+import _extends from '@babel/runtime/helpers/extends';
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
+import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
+import _set from 'lodash/fp/set';
+import _assign from 'lodash/fp/assign';
+import _pullAt from 'lodash/fp/pullAt';
+import _map from 'lodash/fp/map';
+import { yakDomTag } from '@startlibs/utils/yakDomTag';
+import React from 'react';
+import ReactDOM from 'react-dom';
+import { styled, css } from '@yak/react';
+import { getScrollParent, normalizeMouse, normalizeTouch } from '@startlibs/utils';
+import { FlipList } from './FlipList.mjs';
+
+const _excluded = ["DragTag", "as", "eventHandlers", "className", "isDragging", "droppable", "dragIndex", "roundedPlaceholder", "inheritRadius", "children"],
+  _excluded2 = ["setItemOrder", "noResistance", "animation", "timing", "disabled", "list", "ghostScale", "setDragRef", "scrollOnDrag", "holdTouchTimer", "children"];
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+const {
+  Provider,
+  Consumer
+} = /*#__PURE__*/React.createContext({});
+const DropPosition = styled(yakDomTag("div"))`
+  border: 2px dashed rgba(0,0,0,0.1);
+  background-color: rgba(0,0,0,0.025);
+  border-radius: 18px;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  visibility: visible;
+  display: block;
+  border-radius: inherit;
+  ${props => props.rounded && css`
+    border-radius: 1000rem;
+  `}
+`;
+const EmptyPlaceholder = styled(yakDomTag("div"))`
+  position:absolute;
+`;
+const HORIZONTAL_DIMENSIONS = {
+  min: 'left',
+  max: 'right',
+  axis: 'x',
+  size: 'Width'
+};
+const VERTICAL_DIMENSIONS = {
+  min: 'top',
+  max: 'bottom',
+  axis: 'y',
+  size: 'Height'
+};
+const AUTO_SCROLL_BORDER_SIZE = 30;
+const AUTO_SCROLL_MAX_VELOCITY = 20;
+const AUTO_SCROLL_OVERFLOW_BUFFER = 100;
+function easeInCubic(t) {
+  return Math.ceil(t * t * t / (AUTO_SCROLL_MAX_VELOCITY * AUTO_SCROLL_MAX_VELOCITY));
+}
+const disableWillChange = el => {
+  const willChange = el === null || el === void 0 ? void 0 : el.closest(".JS-has-wc");
+  if (willChange) {
+    willChange.classList.add('JS-wc-off');
+    disableWillChange(willChange.parentNode);
+  }
+};
+const reenableWillChange = el => {
+  const willChange = el === null || el === void 0 ? void 0 : el.closest(".JS-has-wc");
+  if (willChange) {
+    willChange.classList.remove('JS-wc-off');
+    reenableWillChange(willChange.parentNode);
+  }
+};
+const shouldPreventDrag = e => !e.target.closest('body,.drag-drop-item,[data-drag="false"],input,textarea,button').matches('body,.drag-drop-item,[data-drag="true"]');
+class DraggableItem extends React.Component {
+  constructor() {
+    super(...arguments);
+    this.events = this.props.eventHandlers(this);
+  }
+  render() {
+    const _this$props = this.props,
+      {
+        DragTag,
+        as = 'div',
+        eventHandlers,
+        className,
+        isDragging,
+        droppable,
+        dragIndex,
+        roundedPlaceholder,
+        inheritRadius,
+        children
+      } = _this$props,
+      props = _objectWithoutProperties(_this$props, _excluded);
+    const Wrapper = DragTag || as;
+    const extraClassName = (isDragging ? ' drag-drop-placeholder' : '') + ' drag-drop-item';
+    return typeof children === 'function' ? children(_objectSpread(_objectSpread({
+      className: extraClassName
+    }, this.events), {}, {
+      children: isDragging && /*#__PURE__*/React.createElement(DropPosition, {
+        rounded: roundedPlaceholder,
+        inheritRadius: inheritRadius
+      })
+    })) : /*#__PURE__*/React.createElement(Wrapper, _extends({
+      className: className + extraClassName,
+      isDragging: isDragging
+    }, props, this.events), children, isDragging && /*#__PURE__*/React.createElement(DropPosition, {
+      rounded: roundedPlaceholder,
+      inheritRadius: inheritRadius
+    }));
+  }
+}
+DraggableItem.a = props => /*#__PURE__*/React.createElement(DraggableItem, _extends({}, props, {
+  DragTag: "a"
+}));
+const DroppableContainer = props => /*#__PURE__*/React.createElement(Consumer, null, dragProps => /*#__PURE__*/React.createElement(DroppableContainerComponent, _extends({}, props, dragProps)));
+class DroppableContainerComponent extends React.Component {
+  constructor() {
+    super(...arguments);
+    this.draggables = [];
+    this.emptyPlaceholder = void 0;
+    this.addProps = (children, eventHandlers, activeIndex, extraProps) => children.map((c, index) => c.type === DraggableItem ? /*#__PURE__*/React.cloneElement(c, {
+      isDragging: activeIndex === index,
+      dragIndex: index,
+      droppable: this,
+      ref: el => this.draggables[index] = el,
+      eventHandlers: eventHandlers
+    }) : c);
+    this.toPosition = (parentRect, _ref) => {
+      let {
+        scrollTop,
+        scrollLeft
+      } = _ref;
+      return (el, i) => {
+        if (el) {
+          const domNode = ReactDOM.__DOM_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE.findDOMNode(el);
+          const {
+            width,
+            height
+          } = domNode.getBoundingClientRect();
+          return {
+            droppable: this,
+            index: i,
+            width,
+            height,
+            y: parentRect.top + domNode.offsetTop + height / 2 + (scrollTop || 0),
+            x: parentRect.left + domNode.offsetLeft + width / 2 + (scrollLeft || 0)
+          };
+        }
+      };
+    };
+    this.getPosition = (i, scrollXY) => {
+      const el = this.draggables[i];
+      if (el) {
+        const parent = ReactDOM.__DOM_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE.findDOMNode(this).offsetParent;
+        const parentRect = parent.getBoundingClientRect();
+        return this.toPosition(parentRect, 0)(el, i);
+      }
+    };
+    this.getPositions = (scrollXY, dragInfo) => {
+      if (this.props.allowDrop && !this.props.allowDrop(_map(dragInfo, v => v && v.props ? v.props.id : v))) {
+        return [];
+      }
+      const parent = ReactDOM.__DOM_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE.findDOMNode(this).offsetParent;
+      if (!parent) {
+        return [];
+      }
+      const parentRect = parent.getBoundingClientRect();
+      const toPosition = this.toPosition(parentRect, scrollXY);
+      const existing = this.draggables.map(toPosition).filter(_ => _);
+      if (existing.length || !this.props.placeholder) return existing;
+      return [ReactDOM.__DOM_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE.findDOMNode(this)].map(toPosition).filter(_ => _);
+    };
+    this.repositionDragged = (array, _ref2, getActiveElement) => {
+      let {
+        active,
+        startIndex,
+        startDroppable,
+        activeIndex,
+        activeDroppable
+      } = _ref2;
+      // Repositioning dereferences startDroppable.props further down. Rendering with an
+      // activeDroppable but no startDroppable would take the whole tree down, so render
+      // the list untouched instead and let the next commit reconcile it.
+      if (!startDroppable) {
+        return array;
+      }
+      if (activeDroppable && (activeDroppable === this || startDroppable === this)) {
+        // remove
+        const removedOrInserted = _pullAt(startDroppable === this ? startIndex : [], array);
+        if (activeDroppable === this) {
+          // insert
+          removedOrInserted.splice(activeIndex, 0, getActiveElement());
+        }
+        return removedOrInserted;
+      }
+      return array;
+    };
+    this.getPlaceholder = (childArray, dragInfo) => childArray.find(_ => _.props.droppable) || dragInfo.startDroppable.props.children[dragInfo.startIndex];
+    this.getDragged = (childArray, dragInfo) => dragInfo.startDroppable === this ? childArray[dragInfo.startIndex] : /*#__PURE__*/React.cloneElement(this.getPlaceholder(childArray, dragInfo), {
+      key: childArray[0].key + 'si' + dragInfo.startIndex
+    });
+    this.childrenToarray = _ref3 => {
+      let {
+        children,
+        list,
+        dragInfo
+      } = _ref3;
+      const {
+        startDroppable,
+        startIndex
+      } = dragInfo;
+      if (list) {
+        return React.Children.toArray(children(this.repositionDragged(list, dragInfo, () => startDroppable.props.list[startIndex])));
+      } else {
+        const childArray = React.Children.toArray(children);
+        return this.repositionDragged(childArray, dragInfo, () => this.getDragged(childArray, dragInfo));
+      }
+    };
+  }
+  componentDidMount() {
+    this.props.addDroppable(this);
+  }
+  componentWillUnmount() {
+    this.props.removeDroppable(this);
+  }
+  render() {
+    const {
+      group,
+      placeholder,
+      dragInfo,
+      animation,
+      timing,
+      eventHandlers
+    } = this.props;
+    const {
+      active,
+      activeIndex,
+      activeDroppable
+    } = dragInfo;
+    const childArray = this.childrenToarray(this.props);
+    if (!childArray.length && placeholder) {
+      return placeholder();
+    }
+    return /*#__PURE__*/React.createElement(FlipList, {
+      animation: animation,
+      timing: timing,
+      play: active
+    }, this.addProps(childArray, eventHandlers, active && activeDroppable === this && activeIndex));
+  }
+}
+DroppableContainerComponent.defaultProps = {
+  placeholder: () => /*#__PURE__*/React.createElement(EmptyPlaceholder, null)
+};
+class DraggableContainer extends React.Component {
+  constructor() {
+    var _this;
+    super(...arguments);
+    _this = this;
+    this.props = void 0;
+    /*: {
+    scrollContainer,
+    setItemOrder,
+    children,
+    noResistance,
+    holdTouchTimer
+    }*/
+    this.ghost = void 0;
+    // dragEnd animates the ghost out over 300ms, so the tail of a drag is asynchronous
+    // and a new drag can start before the previous one has finished. Each drag therefore
+    // gets its own session holding everything its completion needs (ghost, dragInfo),
+    // instead of reading the shared slots a newer drag may already have taken over.
+    // dragToken identifies the drag that currently owns the shared state.
+    this.dragToken = 0;
+    this.activeSession = null;
+    this.positions = {};
+    this.passedResistance = false;
+    this.pressedEnough = false;
+    this.holdTouchTimer = void 0;
+    //: number
+    this.preventScroll = void 0;
+    //: boolean
+    this.state = {
+      dragInfo: {}
+    };
+    this.droppables = {};
+    this.offsetParent = void 0;
+    //: HTMLElement
+    this.parent = void 0;
+    //: HTMLElement
+    this.ghostDimensions = void 0;
+    //: GhostDimensions
+    this.itemsPositions = void 0;
+    //: Array<{ index: number, y: number, x: number }>
+    this.scrollContainer = void 0;
+    //: HTMLElement & any
+    this.lastScrollTop = void 0;
+    //: number
+    this.lastScrollLeft = void 0;
+    //: number
+    this.settedDragRef = false;
+    this.preventDefault = e => {
+      if (!shouldPreventDrag(e) && this.preventScroll) e.preventDefault();
+    };
+    this.getScrollContainer = () => {
+      return this.scrollContainer = this.scrollContainer || (this.props.scrollContainer ? this.props.scrollContainer : getScrollParent(ReactDOM.__DOM_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE.findDOMNode(this)));
+    };
+    this.removeItem = el => {
+      this.domItems = this.domItems.filter(e => e !== el);
+    };
+    this.setOffsetParent = e => {
+      this.parent = e;
+      this.offsetParent = e && (window.getComputedStyle(e).position !== 'static' ? e : e.offsetParent);
+    };
+    this.getConstraintDimensions = () => {
+      if (!this.offsetParent) return {
+        left: 0,
+        top: 0,
+        bottom: 0,
+        right: 0,
+        width: 0,
+        height: 0
+      };
+      return this.offsetParent.getBoundingClientRect();
+    };
+    this.dragStart = draggable => (e, _ref4) => {
+      let {
+        pageX,
+        pageY,
+        clientX,
+        clientY
+      } = _ref4;
+      const currentTarget = e.currentTarget;
+      if (shouldPreventDrag(e) || this.props.disabled) {
+        return;
+      }
+      if (e.type === 'mousedown' && e.button !== 0) {
+        return;
+      }
+      e.stopPropagation();
+      this.passedResistance = false;
+      const holdTouchTimer = this.props.holdTouchTimer;
+      this.pressedEnough = !holdTouchTimer;
+      if (holdTouchTimer) {
+        e.persist();
+        this.holdTouchTimer = setTimeout(() => {
+          this.pressedEnough = true;
+          if (window.navigator.vibrate) window.navigator.vibrate([65]);
+          if (!this.state.dragInfo.active) {
+            this.dragMove(e, {
+              pageX,
+              pageY,
+              clientX,
+              clientY
+            });
+          }
+        }, holdTouchTimer);
+      }
+      const {
+        width,
+        height,
+        top,
+        left
+      } = currentTarget.getBoundingClientRect();
+      const targetStyle = window.getComputedStyle(currentTarget);
+      const {
+        top: parentTop,
+        left: parentLeft
+      } = this.getConstraintDimensions();
+      const offsetTop = parentTop + pageY - top + parseInt(targetStyle['margin-top'], 10);
+      const offsetLeft = parentLeft + pageX - left + parseInt(targetStyle['margin-left'], 10);
+      const {
+        scrollTop,
+        scrollLeft,
+        scrollY,
+        scrollX
+      } = this.getScrollContainer();
+      this.positions = {
+        originalX: pageX,
+        originalY: pageY,
+        offsetTop,
+        offsetLeft,
+        ghostHeight: height,
+        ghostWidth: width,
+        ghostMarginTop: parseInt(targetStyle['margin-top'], 10),
+        ghostMarginLeft: parseInt(targetStyle['margin-left'], 10),
+        scrollLeft: scrollLeft || 0,
+        scrollTop: scrollTop || 0,
+        scrollY: scrollY || 0,
+        scrollX: scrollX || 0
+      };
+      const ghost = currentTarget.cloneNode(true);
+      ghost.className += ' dragging';
+      Object.assign(ghost.style, {
+        transition: '',
+        position: 'fixed',
+        display: 'none',
+        zIndex: '10',
+        width: width + 'px',
+        height: height + 'px',
+        margin: '0',
+        top: top - clientY + 'px',
+        left: left - clientX + 'px'
+      });
+      this.setupMove(ghost, currentTarget.offsetParent, draggable, {
+        width,
+        height,
+        offsetX: pageX - left,
+        offsetY: pageY - top
+      });
+      window.addEventListener('mousemove', this.mouseMove);
+      window.addEventListener('touchmove', this.touchMove, {
+        passive: false
+      });
+      window.addEventListener('mouseup', this.dragEnd);
+      window.addEventListener('touchend', this.dragEnd);
+      window.addEventListener('visibilitychange', this.dragEnd);
+      window.addEventListener('blur', this.dragEnd, false);
+      window.addEventListener('selectstart', this.disableSelect);
+    };
+    this.setupMove = (el, parent, item, ghostDimensions) => {
+      this.ghostDimensions = ghostDimensions;
+      parent.click(); // close popups
+      this.ghost = el;
+      // Open this drag's session and take ownership of the shared state. Any previous
+      // session is now superseded: it still holds its own ghost and dragInfo, so it can
+      // finish animating and clean itself up without touching anything below.
+      this.dragToken++;
+      this.activeSession = {
+        token: this.dragToken,
+        ghost: el,
+        dragInfo: null,
+        ended: false,
+        endTimeout: null,
+        onTransitionEnd: null
+      };
+      parent.appendChild(this.ghost);
+      disableWillChange(this.ghost);
+      this.setState({
+        dragInfo: {
+          active: false,
+          startIndex: item.props.dragIndex,
+          activeGroup: item.props.droppable.props.group,
+          startDroppable: item.props.droppable
+        }
+      });
+      this.settedDragRef = false;
+    };
+    this.getScrollPosition = () => {
+      const {
+        scrollY,
+        scrollX,
+        scrollLeft,
+        scrollTop
+      } = this.getScrollContainer();
+      const left = (scrollX || 0 + scrollLeft || 0) - this.positions.scrollX - this.positions.scrollLeft;
+      const top = (scrollY || 0 + scrollTop || 0) - this.positions.scrollY - this.positions.scrollTop;
+      return {
+        scrollLeft: left,
+        scrollTop: top
+      };
+    };
+    this.resetPositions = function () {
+      let group = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _this.state.dragInfo.activeGroup;
+      _this.itemsPositions = _this.droppables[group].reduce((acc, _) => acc.concat(_.getPositions(_this.getScrollPosition(), _this.state.dragInfo)), []).sort((a, b) => a.y - b.y || a.x - b.x);
+    };
+    this.move = (x, y) => {
+      if (!this.settedDragRef && this.props.setDragRef) {
+        this.props.setDragRef(this.ghost);
+        this.settedDragRef = true;
+      }
+      const {
+        scrollTop,
+        scrollLeft
+      } = this.getScrollPosition();
+      this.preventScroll = true;
+      let item = this.findGhostIndex(x - this.ghostDimensions.offsetX + (scrollLeft || 0), y - this.ghostDimensions.offsetY + (scrollTop || 0), this.ghostDimensions.width, this.ghostDimensions.height);
+      if (!item) {
+        return;
+      }
+      const dragInfo = this.state.dragInfo;
+      if (item.index !== dragInfo.activeIndex || item.droppable !== dragInfo.activeDroppable) {
+        this.setState({
+          dragInfo: _assign(dragInfo, {
+            active: true,
+            activePosition: item,
+            activeIndex: item.index,
+            activeDroppable: item.droppable
+          })
+        });
+      }
+    };
+    this.findGhostIndex = (ghostX1, ghostY1, ghostWidth, ghostHeight) => {
+      const ghostY2 = ghostY1 + ghostHeight;
+      const ghostX2 = ghostX1 + ghostWidth;
+      const centerInsideGhost = this.itemsPositions.filter(position => position.y >= ghostY1 && position.x >= ghostX1 && position.y <= ghostY2 && position.x <= ghostX2);
+      const ghostX = ghostX1 + ghostWidth / 2;
+      const ghostY = ghostY1 + ghostHeight / 2;
+      const rectanglesIntersection = (a, b) => Math.max(0, Math.min(a.x2, b.x2) - Math.max(a.x1, b.x1)) * Math.max(0, Math.min(a.y2, b.y2) - Math.max(a.y1, b.y1));
+      const closestIndex = centerInsideGhost.map(item => {
+        const {
+          x,
+          y,
+          width,
+          height
+        } = item;
+        const area = width * height;
+        const intersectionArea = rectanglesIntersection(
+        //at least 1px wide
+        {
+          x1: x - Math.max(1, width) / 2,
+          x2: x + width / 2,
+          y1: y - Math.max(1, height) / 2,
+          y2: y + height / 2
+        }, {
+          x1: ghostX1,
+          x2: ghostX2,
+          y1: ghostY1,
+          y2: ghostY2
+        });
+        const distance = Math.sqrt(Math.pow(x - ghostX, 2) + Math.pow(y - ghostY, 2));
+        return {
+          area: intersectionArea / area,
+          distance
+        };
+      }).reduce((iMax, _ref5, i, arr) => {
+        let {
+          area,
+          distance
+        } = _ref5;
+        return area > arr[iMax].area || area === arr[iMax].area && distance < arr[iMax].distance ? i : iMax;
+      }, 0);
+      return centerInsideGhost[closestIndex];
+    };
+    this.stopMoving = session => {
+      // Completion runs from mouseup, from a transitionend, or from the 300ms fallback
+      // timer, so it can be reached more than once for the same drag.
+      if (!session || session.ended) {
+        return;
+      }
+      session.ended = true;
+      const {
+        token,
+        ghost,
+        dragInfo
+      } = session;
+      const {
+        activeIndex,
+        startIndex,
+        activeGroup,
+        activeDroppable,
+        startDroppable
+      } = dragInfo || {};
+      if (session.endTimeout) {
+        clearTimeout(session.endTimeout);
+        session.endTimeout = null;
+      }
+      if (ghost && session.onTransitionEnd) {
+        ghost.removeEventListener('transitionend', session.onTransitionEnd);
+        session.onTransitionEnd = null;
+      }
+
+      // Everything below acts on this session's own ghost and dragInfo, so it stays
+      // correct even once a newer drag has replaced this.ghost and this.state.dragInfo.
+      const finish = () => {
+        if (ghost !== null && ghost !== void 0 && ghost.parentNode) {
+          reenableWillChange(ghost);
+          ghost.parentNode.removeChild(ghost);
+        }
+        if (activeIndex !== startIndex && activeIndex !== undefined || activeDroppable !== startDroppable && activeDroppable !== undefined) {
+          var _startDroppable$props, _activeDroppable$prop;
+          const promise = this.props.setItemOrder(startIndex, activeIndex, startDroppable === null || startDroppable === void 0 || (_startDroppable$props = startDroppable.props) === null || _startDroppable$props === void 0 ? void 0 : _startDroppable$props.id, activeDroppable === null || activeDroppable === void 0 || (_activeDroppable$prop = activeDroppable.props) === null || _activeDroppable$prop === void 0 ? void 0 : _activeDroppable$prop.id, activeGroup);
+          if (promise && promise.then) {
+            promise.then(() => this.clearChangedOrder(token), () => this.clearChangedOrder(token));
+          } else {
+            this.clearChangedOrder(token);
+          }
+        } else {
+          this.clearChangedOrder(token);
+        }
+      };
+      if (token !== this.dragToken) {
+        // Superseded: a newer drag owns the shared state and the render output. Drop
+        // our ghost and commit our reorder, but leave that drag's state alone.
+        finish();
+        return;
+      }
+      this.setState({
+        saving: {
+          list: this.props.list,
+          children: this.props.children,
+          dragInfo: _set('active', false, dragInfo || {})
+        }
+      }, () => {
+        this.preventScroll = false;
+        this.props.setDragRef(null);
+        this.settedDragRef = false;
+        finish();
+      });
+    };
+    this.clearChangedOrder = token => {
+      // Only the drag that still owns the shared state may reset it — a superseded
+      // session clearing dragInfo here would wipe the drag currently in progress.
+      if (token !== undefined && token !== this.dragToken) {
+        return;
+      }
+      this.setState({
+        dragInfo: {},
+        saving: false
+      });
+    };
+    this.dragMove = (e, _ref6) => {
+      let {
+        pageX,
+        pageY,
+        clientX,
+        clientY
+      } = _ref6;
+      const distance = Math.sqrt((this.positions.originalX - pageX) ** 2 + (this.positions.originalY - pageY) ** 2);
+      if (e.type === 'mousemove') {
+        // get touchstart and touchmove
+        if (!this.passedResistance && !this.props.noResistance && distance < 5) {
+          return;
+        }
+      } else {
+        if (!this.pressedEnough) {
+          if (distance > 5) {
+            this.dragEnd();
+          }
+          return;
+        }
+        e.preventDefault();
+      }
+      this.passedResistance = true;
+      this.processAutoScroll(pageX, pageY, clientX, clientY);
+    };
+    this.completeMove = (pageX, pageY) => {
+      const {
+        scrollTop,
+        scrollLeft
+      } = this.getScrollContainer();
+      const scrollYDelta = this.positions.scrollTop - (scrollTop || 0);
+      const scrollXDelta = this.positions.scrollLeft - (scrollLeft || 0);
+      const ghostLeft = pageX - this.positions.offsetLeft;
+      const ghostTop = pageY - this.positions.offsetTop;
+      const {
+        height: parentHeight,
+        width: parentWidth
+      } = this.getConstraintDimensions();
+      const normalizedLeft = Math.max(Math.min(ghostLeft, parentWidth - this.positions.ghostWidth - this.positions.ghostMarginLeft + scrollXDelta), 0 - this.positions.ghostMarginLeft + scrollXDelta);
+      const normalizedTop = Math.max(Math.min(ghostTop, parentHeight - this.positions.ghostHeight - this.positions.ghostMarginTop + scrollYDelta), 0 - this.positions.ghostMarginTop + scrollYDelta);
+      const x = normalizedLeft - ghostLeft + pageX - window.scrollX;
+      const y = normalizedTop - ghostTop + pageY - window.scrollY;
+      if (this.ghost) {
+        this.ghost.style.transform = `translate(${x}px,${y}px)` + (this.props.ghostScale ? ' scale(' + this.props.ghostScale + ')' : '');
+        this.ghost.style.display = '';
+      }
+      this.move(pageX - (ghostLeft - normalizedLeft), pageY - (ghostTop - normalizedTop));
+      if (!this.state.dragInfo.active) {
+        this.setState({
+          dragInfo: _assign(this.state.dragInfo, {
+            activeIndex: this.state.dragInfo.startIndex,
+            activeDroppable: this.state.dragInfo.startDroppable,
+            active: true
+          })
+        });
+      }
+    };
+    this.autoScrollAnimation = void 0;
+    this.autoScrollX = void 0;
+    this.autoScrollY = void 0;
+    this.getFixedParentRect = (node, not) => {
+      if (node) {
+        if (window.getComputedStyle(node)['position'].toLowerCase() === 'fixed' && not !== node) return node.getBoundingClientRect();else return this.getFixedParentRect(node.offsetParent, not);
+      } else {
+        return {};
+      }
+    };
+    this.calculateDistanceFromBorder = (ghost, position, getElementBeforeBorder, scrollContainer, parentRect, keys) => {
+      const fixedUnderMouse = scrollContainer === window ? this.getFixedParentRect(getElementBeforeBorder(+AUTO_SCROLL_BORDER_SIZE), ghost) : {};
+      const min = scrollContainer !== window ? scrollContainer.getBoundingClientRect()[keys.min] : fixedUnderMouse[keys.max] || this.getFixedParentRect(getElementBeforeBorder(-AUTO_SCROLL_BORDER_SIZE), ghost)[keys.max] || 0;
+      const max = scrollContainer !== window ? scrollContainer.getBoundingClientRect()[keys.max] : fixedUnderMouse[keys.min] || this.getFixedParentRect(getElementBeforeBorder(+AUTO_SCROLL_BORDER_SIZE), ghost)[keys.min] || window['inner' + keys.size];
+      const distanceMin = position - AUTO_SCROLL_BORDER_SIZE - min;
+      const distanceMax = position + AUTO_SCROLL_BORDER_SIZE - max;
+      const containerMin = scrollContainer === window ? 0 : Math.max(scrollContainer.getBoundingClientRect()[keys.min], 0);
+      const containerMax = scrollContainer === window ? window['inner' + keys.size] : Math.min(scrollContainer.getBoundingClientRect()[keys.max], window['inner' + keys.size]);
+      const afterCenter = (position - containerMin) * 2 / (containerMax - containerMin) > 1;
+      if (distanceMin < 0 && !afterCenter) return distanceMin;
+      if (distanceMax > 0) return distanceMax;
+      return 0;
+    };
+    this.processAutoScroll = (pageX, pageY, clientX, clientY) => {
+      const scrollContainer = this.getScrollContainer();
+      const parentRect = this.getConstraintDimensions();
+      this.autoScrollY = this.calculateDistanceFromBorder(this.ghost, clientY, diff => document.elementFromPoint(clientX, clientY + diff), scrollContainer, parentRect, VERTICAL_DIMENSIONS);
+      // this.autoScrollX = this.calculateDistanceFromBorder(clientX, (diff) => document.elementFromPoint(clientX + diff, clientY), scrollContainer, parentRect, HORIZONTAL_DIMENSIONS)
+      this.autoScrollX = 0;
+      // noinspection JSSuspiciousNameCombination
+      const keepY = this.autoScrollX === 0 || this.autoScrollY !== 0 && Math.abs(this.autoScrollY) < Math.abs(this.autoScrollX);
+      this.autoScrollY = this.props.scrollOnDrag && keepY ? this.autoScrollY : 0;
+      this.autoScrollX = this.props.scrollOnDrag && !keepY ? this.autoScrollX : 0;
+      if (this.autoScrollX || this.autoScrollY) {
+        this.startAutoScroll(pageX, pageY, scrollContainer);
+      } else {
+        if (this.autoScrollAnimation) {
+          this.stopAutoScroll();
+        }
+        this.completeMove(pageX, pageY);
+      }
+    };
+    this.checkLimits = (delta, boundRect, constraintRect, scrollRect, keys) => {
+      if (delta > 0) {
+        if (constraintRect[keys.max] + AUTO_SCROLL_OVERFLOW_BUFFER < scrollRect[keys.max]) {
+          return 0;
+        }
+      }
+      if (delta < 0) {
+        if (constraintRect[keys.min] - AUTO_SCROLL_OVERFLOW_BUFFER > scrollRect[keys.min]) {
+          return 0;
+        }
+      }
+      return delta;
+    };
+    this.startAutoScroll = (pageX, pageY, scrollContainer) => {
+      if (!this.autoScrollAnimation) {
+        this.autoScrollAnimation = window.requestAnimationFrame(timestamp => {
+          const ghostRect = this.ghost.getBoundingClientRect();
+          const parentRect = this.getConstraintDimensions();
+          const scrollRect = scrollContainer === window ? {
+            top: 0,
+            bottom: window.innerHeight,
+            left: 0,
+            right: window.innerWidth
+          } : scrollContainer.getBoundingClientRect();
+          const deltaScrollX = easeInCubic(this.checkLimits(this.autoScrollX < 0 ? Math.max(this.autoScrollX, -AUTO_SCROLL_MAX_VELOCITY) : Math.min(this.autoScrollX, AUTO_SCROLL_MAX_VELOCITY), ghostRect, parentRect, scrollRect, HORIZONTAL_DIMENSIONS));
+          const deltaScrollY = easeInCubic(this.checkLimits(this.autoScrollY < 0 ? Math.max(this.autoScrollY, -AUTO_SCROLL_MAX_VELOCITY) : Math.min(this.autoScrollY, AUTO_SCROLL_MAX_VELOCITY), ghostRect, parentRect, scrollRect, VERTICAL_DIMENSIONS));
+          const willScroll = deltaScrollX !== 0 || deltaScrollY !== 0;
+          if (willScroll) {
+            scrollContainer.scroll((isNaN(scrollContainer.scrollLeft) ? scrollContainer.pageXOffset : scrollContainer.scrollLeft) + deltaScrollX, (isNaN(scrollContainer.scrollTop) ? scrollContainer.pageYOffset : scrollContainer.scrollTop) + deltaScrollY);
+          }
+          this.autoScrollAnimation = 0;
+          this.completeMove(pageX, pageY);
+          if (willScroll) {
+            this.startAutoScroll(pageX + (scrollContainer === window ? deltaScrollX : 0), pageY + (scrollContainer === window ? deltaScrollY : 0), scrollContainer);
+          }
+        });
+      } else {
+        this.completeMove(pageX, pageY);
+      }
+    };
+    this.stopAutoScroll = () => {
+      window.cancelAnimationFrame(this.autoScrollAnimation);
+      this.autoScrollAnimation = 0;
+    };
+    this.dragEnd = () => {
+      window.removeEventListener('touchmove', this.touchMove);
+      window.removeEventListener('mousemove', this.mouseMove);
+      window.removeEventListener('mouseup', this.dragEnd);
+      window.removeEventListener('touchend', this.dragEnd);
+      window.removeEventListener('visibilitychange', this.dragEnd);
+      window.removeEventListener('blur', this.dragEnd);
+      window.removeEventListener('selectstart', this.disableSelect);
+      this.stopAutoScroll();
+      this.props.setDragRef && this.props.setDragRef(null);
+      clearTimeout(this.holdTouchTimer);
+      // Wired to mouseup, touchend, visibilitychange and blur, so this can fire several
+      // times for one drag. Only the first call owns the session and completes it.
+      const session = this.activeSession;
+      if (!session) {
+        return;
+      }
+      this.activeSession = null;
+      session.dragInfo = this.state.dragInfo;
+      const ghost = session.ghost;
+      const {
+        activeDroppable,
+        activeIndex
+      } = session.dragInfo;
+      const finalPosition = activeDroppable && activeDroppable.getPosition(activeIndex, this.getScrollPosition());
+      if (activeDroppable && ghost && finalPosition) {
+        const {
+          marginTop,
+          marginLeft,
+          left,
+          top
+        } = window.getComputedStyle(ghost);
+        const finalLeft = finalPosition.x - Math.max(1, finalPosition.width) / 2 - parseInt(left) - parseInt(marginLeft);
+        const finalTop = finalPosition.y - Math.max(1, finalPosition.height) / 2 - parseInt(top) - parseInt(marginTop);
+        ghost.style.transition = `transform 300ms ease-in-out 0ms, opacity 300ms ease-in-out 0ms`;
+        const newTransform = `translate(${finalLeft}px,${finalTop}px)`;
+        if ((ghost.style.transform || "").replace(/\s/g, '') === newTransform) {
+          this.stopMoving(session);
+        } else {
+          ghost.style.transform = newTransform;
+          session.onTransitionEnd = () => this.stopMoving(session);
+          ghost.addEventListener('transitionend', session.onTransitionEnd);
+          session.endTimeout = setTimeout(session.onTransitionEnd, 300);
+        }
+      } else {
+        this.stopMoving(session);
+      }
+    };
+    this.addDroppable = el => {
+      this.droppables[el.props.group] = (this.droppables[el.props.group] || []).concat(el);
+    };
+    this.remoevDroppable = el => {
+      this.droppables[el.props.group] = this.droppables[el.props.group].filter(_ => _ !== el);
+    };
+    this.mouseDown = draggable => normalizeMouse(this.dragStart(draggable), this.dragEnd);
+    this.mouseMove = normalizeMouse(this.dragMove, this.dragEnd);
+    this.touchStart = draggable => normalizeTouch(this.dragStart(draggable), this.dragEnd);
+    this.touchMove = normalizeTouch(this.dragMove, this.dragEnd);
+    this.providerValue = {};
+    this.providerEvents = draggable => ({
+      onMouseDown: this.mouseDown(draggable),
+      onTouchStart: this.touchStart(draggable)
+    });
+  }
+  componentDidMount() {
+    this.parent.addEventListener('touchmove', this.preventDefault);
+  }
+  componentWillUnmount() {
+    this.parent.removeEventListener('touchmove', this.preventDefault);
+  }
+  componentDidUpdate(_, prevState) {
+    if (!isNaN(this.lastScrollTop) || !isNaN(this.lastScrollLeft)) {
+      this.getScrollContainer().scroll(this.lastScrollLeft, this.lastScrollTop);
+      this.lastScrollLeft = this.lastScrollTop = undefined;
+    }
+    if (this.ghost && this.ghost.parentNode) {
+      this.ghost.parentNode.appendChild(this.ghost);
+    }
+    if (this.state.dragInfo !== prevState.dragInfo) {
+      this.resetPositions();
+    }
+  }
+  disableSelect(event) {
+    event.preventDefault();
+  }
+  render() {
+    const _this$props2 = this.props,
+      {
+        setItemOrder,
+        noResistance,
+        animation,
+        timing,
+        disabled,
+        list,
+        ghostScale,
+        setDragRef,
+        scrollOnDrag,
+        holdTouchTimer,
+        children
+      } = _this$props2,
+      rest = _objectWithoutProperties(_this$props2, _excluded2);
+    const {
+      saving,
+      dragInfo
+    } = this.state;
+    this.providerValue = _assign(this.providerValue, {
+      addDroppable: this.addDroppable,
+      removeDroppable: this.remoevDroppable,
+      dragInfo: saving ? saving.dragInfo : dragInfo,
+      eventHandlers: this.providerEvents
+    });
+    if (this.scrollContainer) {
+      const scrollContainer = this.getScrollContainer();
+      this.lastScrollTop = (isNaN(scrollContainer['scrollTop']) ? scrollContainer['pageYOffset'] : scrollContainer['scrollTop']) || undefined;
+      this.lastScrollLeft = (isNaN(scrollContainer['scrollLeft']) ? scrollContainer['pageXOffset'] : scrollContainer['scrollLeft']) || undefined;
+    }
+    return /*#__PURE__*/React.createElement(Provider, {
+      value: this.providerValue
+    }, /*#__PURE__*/React.createElement("div", _extends({}, rest, {
+      ref: this.setOffsetParent
+    }), /*#__PURE__*/React.createElement(DroppableContainer, {
+      animation: animation,
+      timing: timing,
+      list: saving ? saving.list : list,
+      placeholder: false
+    }, saving ? saving.children : children)));
+  }
+}
+
+// type GhostDimensions = { offsetX: number, offsetY: number, width: number, height: number }
+DraggableContainer.defaultProps = {
+  holdTouchTimer: 500,
+  scrollOnDrag: true,
+  setDragRef: () => {}
+};
+
+export { DraggableContainer, DraggableItem, DroppableContainer };
+//# sourceMappingURL=Draggable.mjs.map