@onepercentio/one-ui 0.19.1 → 0.19.3

package/dist/components/OrderableList/OrderableList.js

@@ -1,394 +1,428 @@
 "use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useOrderableEvents = exports.useOrderableListAnchor = exports.OrderableListReorderMode = void 0;
-const throttle_1 = __importDefault(require("lodash/throttle"));
-const UncontrolledTransition_1 = __importDefault(require("../UncontrolledTransition"));
-const react_1 = __importStar(require("react"));
-const useHero_1 = __importDefault(require("../../hooks/useHero"));
-const AnimatedEntrance_1 = __importDefault(require("../AnimatedEntrance"));
-const Transition_1 = require("../Transition");
-const OrderableList_module_scss_1 = __importDefault(require("./OrderableList.module.scss"));
-const useEvents_1 = __importDefault(require("../../hooks/utility/useEvents"));
-const ownEvent_1 = __importDefault(require("../../utils/ownEvent"));
-const OrderableListContext = (0, react_1.createContext)(null);
-var OrderableListReorderMode;
-(function (OrderableListReorderMode) {
-    OrderableListReorderMode["VERTICAL"] = "v";
-    OrderableListReorderMode["TWO_DIMENSIONS"] = "hv";
-})(OrderableListReorderMode = exports.OrderableListReorderMode || (exports.OrderableListReorderMode = {}));
+exports.OrderableListReorderMode = void 0;
+exports.default = OrderableList;
+exports.useOrderableEvents = useOrderableEvents;
+exports.useOrderableListAnchor = useOrderableListAnchor;
+var _throttle = _interopRequireDefault(require("lodash/throttle"));
+var _UncontrolledTransition = _interopRequireDefault(require("../UncontrolledTransition"));
+var _react = _interopRequireWildcard(require("react"));
+var _useHero2 = _interopRequireDefault(require("../../hooks/useHero"));
+var _AnimatedEntrance = _interopRequireDefault(require("../AnimatedEntrance"));
+var _Transition = require("../Transition");
+var _OrderableListModule = _interopRequireDefault(require("./OrderableList.module.scss"));
+var _useEvents = _interopRequireDefault(require("../../hooks/utility/useEvents"));
+var _ownEvent = _interopRequireDefault(require("../../utils/ownEvent"));
+const _excluded = ["children", "className", "mode", "shrinkToOnOrder", "reorderingClassName", "cloneClassName"];
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+const OrderableListContext = /*#__PURE__*/(0, _react.createContext)(null);
+let OrderableListReorderMode = /*#__PURE__*/function (OrderableListReorderMode) {
+  OrderableListReorderMode["VERTICAL"] = "v";
+  OrderableListReorderMode["TWO_DIMENSIONS"] = "hv";
+  return OrderableListReorderMode;
+}({});
+exports.OrderableListReorderMode = OrderableListReorderMode;
 function cleanKeys(keys) {
-    return keys.map((a) => a.split(";")[0]);
+  return keys.map(function (a) {
+    return a.split(";")[0];
+  });
 }
+
 /**
  * This component receives a list of keyed elements and orders it based of the order provided via the prop "keyOrder"
  **/
-function OrderableList(_a) {
-    var { children, className = "", mode = OrderableListReorderMode.VERTICAL, shrinkToOnOrder, reorderingClassName, cloneClassName } = _a, props = __rest(_a, ["children", "className", "mode", "shrinkToOnOrder", "reorderingClassName", "cloneClassName"]);
-    const { current: anchorsList } = (0, react_1.useRef)([]);
-    const eventEmitter = (0, useEvents_1.default)();
-    const currentClone = (0, react_1.useRef)(null);
-    const currentWorkingKey = (0, react_1.useRef)();
-    const availableKeys = children.map((a) => a.key);
-    const rootRef = (0, react_1.useRef)(null);
-    const [_order, setOrder] = (0, react_1.useState)(() => {
-        const missingOrderKeys = "keyOrder" in props && props.keyOrder
-            ? availableKeys.filter((a) => !props.keyOrder.includes(a))
-            : [];
-        return (("keyOrder" in props && props.keyOrder
-            ? [...props.keyOrder, ...missingOrderKeys]
-            : undefined) || availableKeys);
+function OrderableList(_ref) {
+  let children = _ref.children,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? "" : _ref$className,
+    _ref$mode = _ref.mode,
+    mode = _ref$mode === void 0 ? OrderableListReorderMode.VERTICAL : _ref$mode,
+    shrinkToOnOrder = _ref.shrinkToOnOrder,
+    reorderingClassName = _ref.reorderingClassName,
+    cloneClassName = _ref.cloneClassName,
+    props = _objectWithoutProperties(_ref, _excluded);
+  const _useRef = (0, _react.useRef)([]),
+    anchorsList = _useRef.current;
+  const eventEmitter = (0, _useEvents.default)();
+  const currentClone = (0, _react.useRef)(null);
+  const currentWorkingKey = (0, _react.useRef)();
+  const availableKeys = children.map(function (a) {
+    return a.key;
+  });
+  const rootRef = (0, _react.useRef)(null);
+  const _useState = (0, _react.useState)(function () {
+      const missingOrderKeys = "keyOrder" in props && props.keyOrder ? availableKeys.filter(function (a) {
+        return !props.keyOrder.includes(a);
+      }) : [];
+      return ("keyOrder" in props && props.keyOrder ? [].concat(_toConsumableArray(props.keyOrder), _toConsumableArray(missingOrderKeys)) : undefined) || availableKeys;
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    _order = _useState2[0],
+    setOrder = _useState2[1];
+  const order = (0, _react.useMemo)(function () {
+    return ("currentOrder" in props ? props.currentOrder || _order : _order).filter(function (o) {
+      return o.includes(";") || availableKeys.includes(o);
     });
-    const order = (0, react_1.useMemo)(() => {
-        return ("currentOrder" in props ? props.currentOrder || _order : _order).filter((o) => o.includes(";") || availableKeys.includes(o));
-    }, [props.currentOrder, _order]);
-    const cleanOrder = (0, react_1.useMemo)(() => order.map((a) => a.split(";")[0]), [order]);
-    const orderId = (0, react_1.useMemo)(() => "key-" + cleanOrder.join(""), [cleanOrder]);
-    const findParentElement = (target) => {
-        let parent = target;
-        while (parent.parentElement !== rootRef.current) {
-            if (parent.parentElement === null)
-                break;
-            parent = parent.parentElement;
+  }, [props.currentOrder, _order]);
+  const cleanOrder = (0, _react.useMemo)(function () {
+    return order.map(function (a) {
+      return a.split(";")[0];
+    });
+  }, [order]);
+  const orderId = (0, _react.useMemo)(function () {
+    return "key-" + cleanOrder.join("");
+  }, [cleanOrder]);
+  const findParentElement = function findParentElement(target) {
+    let parent = target;
+    while (parent.parentElement !== rootRef.current) {
+      if (parent.parentElement === null) break;
+      parent = parent.parentElement;
+    }
+    if (process.env.NODE_ENV === "development" && parent === null) throw new Error("It seems like we could not find a relation between this element and the root list. Are you using portals maybe?");
+    return parent;
+  };
+  (0, _react.useLayoutEffect)(function () {
+    if (shrinkToOnOrder) rootRef.current.style.setProperty("--shrink-to", "".concat(shrinkToOnOrder, "px"));
+  }, [shrinkToOnOrder]);
+  const calculateReordering = (0, _react.useMemo)(function () {
+    return (0, _throttle.default)(function (e, els, currentOrder) {
+      if (els.length > currentOrder.length || !currentWorkingKey.current) return;
+      const parent = findParentElement(e.target);
+      const indexOfKeyInCleanOrder = els.indexOf(parent);
+      const keyOfTheOverElement = currentOrder[indexOfKeyInCleanOrder];
+      const isDraggingOwnElement = currentWorkingKey.current === keyOfTheOverElement;
+      if (indexOfKeyInCleanOrder === -1 || keyOfTheOverElement === undefined) return;
+      if (!isDraggingOwnElement) {
+        const distanceFromTop = e.offsetY;
+        const heightOfEl = parent.clientHeight;
+        const offset = heightOfEl * 0.25;
+        const isAfter = distanceFromTop > heightOfEl - offset;
+        const isBefore = distanceFromTop < offset;
+        const checkIfCanMove = function checkIfCanMove(keyOfOverElement) {
+          return keyOfOverElement === undefined || keyOfOverElement !== currentWorkingKey.current;
+        };
+        const indexOfTheNewElement = indexOfKeyInCleanOrder + (isAfter ? 1 : -1);
+        const shouldTriggerReordering = (isAfter || isBefore) && checkIfCanMove(currentOrder[indexOfTheNewElement]);
+        if (shouldTriggerReordering) {
+          setOrder(function (p) {
+            const previousIndex = currentOrder.indexOf(currentWorkingKey.current);
+            const indexOfKeyInProvidedOrder = cleanKeys(p).indexOf(keyOfTheOverElement);
+            let indexOfTheNewElement = indexOfKeyInProvidedOrder + (isBefore ? -1 : 0);
+            if (previousIndex > indexOfTheNewElement) indexOfTheNewElement++;
+            const orderWithoutCurrent = p.filter(function (a) {
+              if (a.startsWith("".concat(currentWorkingKey.current, ";"))) return false;
+              return a !== currentWorkingKey.current;
+            });
+            orderWithoutCurrent.splice(indexOfTheNewElement, 0, "".concat(currentWorkingKey.current, ";").concat(Date.now()));
+            return orderWithoutCurrent;
+          });
         }
-        if (process.env.NODE_ENV === "development" && parent === null)
-            throw new Error("It seems like we could not find a relation between this element and the root list. Are you using portals maybe?");
-        return parent;
+      }
+    }, 1000 / 60);
+  }, []);
+  (0, _react.useEffect)(function () {
+    const els = Array.from(rootRef.current.children);
+    const calculateReorderingCall = function calculateReorderingCall(e) {
+      const els = Array.from(rootRef.current.children);
+      calculateReordering(e, els, cleanOrder);
     };
-    (0, react_1.useLayoutEffect)(() => {
-        if (shrinkToOnOrder)
-            rootRef.current.style.setProperty("--shrink-to", `${shrinkToOnOrder}px`);
-    }, [shrinkToOnOrder]);
-    const calculateReordering = (0, react_1.useMemo)(() => {
-        return (0, throttle_1.default)((e, els, currentOrder) => {
-            if (els.length > currentOrder.length || !currentWorkingKey.current)
-                return;
-            const parent = findParentElement(e.target);
-            const indexOfKeyInCleanOrder = els.indexOf(parent);
-            const keyOfTheOverElement = currentOrder[indexOfKeyInCleanOrder];
-            const isDraggingOwnElement = currentWorkingKey.current === keyOfTheOverElement;
-            if (indexOfKeyInCleanOrder === -1 || keyOfTheOverElement === undefined)
-                return;
-            if (!isDraggingOwnElement) {
-                const distanceFromTop = e.offsetY;
-                const heightOfEl = parent.clientHeight;
-                const offset = heightOfEl * 0.25;
-                const isAfter = distanceFromTop > heightOfEl - offset;
-                const isBefore = distanceFromTop < offset;
-                const checkIfCanMove = (keyOfOverElement) => {
-                    return (keyOfOverElement === undefined ||
-                        keyOfOverElement !== currentWorkingKey.current);
-                };
-                const indexOfTheNewElement = indexOfKeyInCleanOrder + (isAfter ? 1 : -1);
-                const shouldTriggerReordering = (isAfter || isBefore) &&
-                    checkIfCanMove(currentOrder[indexOfTheNewElement]);
-                if (shouldTriggerReordering) {
-                    setOrder((p) => {
-                        const previousIndex = currentOrder.indexOf(currentWorkingKey.current);
-                        const indexOfKeyInProvidedOrder = cleanKeys(p).indexOf(keyOfTheOverElement);
-                        let indexOfTheNewElement = indexOfKeyInProvidedOrder + (isBefore ? -1 : 0);
-                        if (previousIndex > indexOfTheNewElement)
-                            indexOfTheNewElement++;
-                        const orderWithoutCurrent = p.filter((a) => {
-                            if (a.startsWith(`${currentWorkingKey.current};`))
-                                return false;
-                            return a !== currentWorkingKey.current;
-                        });
-                        orderWithoutCurrent.splice(indexOfTheNewElement, 0, `${currentWorkingKey.current};${Date.now()}`);
-                        return orderWithoutCurrent;
-                    });
-                }
-            }
-        }, 1000 / 60);
-    }, []);
-    (0, react_1.useEffect)(() => {
-        const els = Array.from(rootRef.current.children);
-        const calculateReorderingCall = (e) => {
-            const els = Array.from(rootRef.current.children);
-            calculateReordering(e, els, cleanOrder);
-        };
-        for (let el of els)
-            el.addEventListener("mousemove", calculateReorderingCall);
-        return () => {
-            for (let el of els)
-                el.removeEventListener("mousemove", calculateReorderingCall);
+    for (let el of els) el.addEventListener("mousemove", calculateReorderingCall);
+    return function () {
+      for (let el of els) el.removeEventListener("mousemove", calculateReorderingCall);
+    };
+  }, [cleanOrder]);
+  (0, _react.useEffect)(function () {
+    if ("onChangeKeyOrder" in props) props.onChangeKeyOrder(cleanKeys(_order));
+  }, [_order]);
+  const cleanOrderRef = (0, _react.useRef)(cleanOrder);
+  (0, _react.useEffect)(function () {
+    cleanOrderRef.current = cleanOrder;
+  }, [cleanOrder]);
+  const onAnchorClick = (0, _react.useCallback)(function (_ref2) {
+    let anchor = _ref2.target;
+    let offset;
+    const orderableListItemForAnchor = findParentElement(anchor);
+    const box = orderableListItemForAnchor.getBoundingClientRect();
+    const els = Array.from(rootRef.current.children);
+    const elIndex = els.indexOf(orderableListItemForAnchor);
+    const clone = orderableListItemForAnchor.cloneNode(true);
+    currentClone.current = clone;
+    if (process.env.NODE_ENV === "development") clone.setAttribute("data-testid", "orderable-list-clone");
+    clone.setAttribute("data-orderableid", "orderable-list-clone");
+    clone.style.width = "".concat(box.width, "px");
+    clone.style.height = "".concat(box.height, "px");
+    clone.style.top = "".concat(box.top, "px");
+    clone.style.left = "".concat(box.left, "px");
+    clone.classList.add(_OrderableListModule.default.clone);
+    if (shrinkToOnOrder) clone.style.maxHeight = "".concat(box.height, "px");
+    setTimeout(function () {
+      if (cloneClassName) clone.classList.add(cloneClassName);
+      if (shrinkToOnOrder) clone.style.maxHeight = "".concat(shrinkToOnOrder, "px");
+    }, 0);
+    orderableListItemForAnchor.classList.add(_OrderableListModule.default.currentOrdering);
+    orderableListItemForAnchor.classList.remove(_OrderableListModule.default.visible);
+    const movementControl = function movementControl(e) {
+      const _ref3 = "touches" in e ? {
+          x: e.touches[0].pageX,
+          y: e.touches[0].pageY
+        } : e,
+        x1 = _ref3.x,
+        y1 = _ref3.y;
+      if (!offset) offset = [x1 - box.left, y1 - box.top];
+      const _offset = offset,
+        _offset2 = _slicedToArray(_offset, 2),
+        offsetX = _offset2[0],
+        offsetY = _offset2[1];
+      clone.style.top = "".concat(y1 - offsetY, "px");
+      clone.style.left = "".concat(x1 - offsetX, "px");
+    };
+    document.body.appendChild(clone);
+    const deleteClone = function deleteClone() {
+      window.removeEventListener("mousemove", movementControl);
+      window.removeEventListener("touchmove", movementControl);
+      window.removeEventListener("touchend", deleteClone);
+      window.removeEventListener("mouseup", deleteClone);
+      orderableListItemForAnchor.style.visibility = "initial";
+      currentWorkingKey.current = undefined;
+      window.document.body.classList.remove(_OrderableListModule.default.unselectable);
+      {
+        let cleanUp = function cleanUp() {
+          if (shrinkToOnOrder) {
+            rootRef.current.style.removeProperty("padding-top");
+            rootRef.current.style.removeProperty("min-height");
+          }
+          eventEmitter.dispatcher("order-stop");
+          rootRef.current.classList.remove(_OrderableListModule.default.ordering);
+          if (reorderingClassName) rootRef.current.classList.remove(reorderingClassName);
+          for (let el of els) el.classList.remove(_OrderableListModule.default.visible);
+          clone.remove();
+          currentClone.current = null;
+          for (let el of Array.from(elInvisible.children)) el.style.height = "";
         };
-    }, [cleanOrder]);
-    (0, react_1.useEffect)(() => {
-        if ("onChangeKeyOrder" in props)
-            props.onChangeKeyOrder(cleanKeys(_order));
-    }, [_order]);
-    const cleanOrderRef = (0, react_1.useRef)(cleanOrder);
-    (0, react_1.useEffect)(() => {
-        cleanOrderRef.current = cleanOrder;
-    }, [cleanOrder]);
-    const onAnchorClick = (0, react_1.useCallback)(({ target: anchor }) => {
-        let offset;
-        const orderableListItemForAnchor = findParentElement(anchor);
-        const box = orderableListItemForAnchor.getBoundingClientRect();
         const els = Array.from(rootRef.current.children);
-        const elIndex = els.indexOf(orderableListItemForAnchor);
-        const clone = orderableListItemForAnchor.cloneNode(true);
-        currentClone.current = clone;
-        clone.setAttribute("data-testid", "orderable-list-clone");
-        clone.style.width = `${box.width}px`;
-        clone.style.height = `${box.height}px`;
-        clone.style.top = `${box.top}px`;
-        clone.style.left = `${box.left}px`;
-        clone.classList.add(OrderableList_module_scss_1.default.clone);
-        if (shrinkToOnOrder)
-            clone.style.maxHeight = `${box.height}px`;
-        setTimeout(() => {
-            if (cloneClassName)
-                clone.classList.add(cloneClassName);
-            if (shrinkToOnOrder)
-                clone.style.maxHeight = `${shrinkToOnOrder}px`;
-        }, 0);
-        orderableListItemForAnchor.classList.add(OrderableList_module_scss_1.default.currentOrdering);
-        orderableListItemForAnchor.classList.remove(OrderableList_module_scss_1.default.visible);
-        const movementControl = (e) => {
-            const { x: x1, y: y1 } = "touches" in e ? { x: e.touches[0].pageX, y: e.touches[0].pageY } : e;
-            if (!offset)
-                offset = [x1 - box.left, y1 - box.top];
-            const [offsetX, offsetY] = offset;
-            clone.style.top = `${y1 - offsetY}px`;
-            clone.style.left = `${x1 - offsetX}px`;
-        };
-        document.body.appendChild(clone);
-        const deleteClone = () => {
-            window.removeEventListener("mousemove", movementControl);
-            window.removeEventListener("touchmove", movementControl);
-            window.removeEventListener("touchend", deleteClone);
-            window.removeEventListener("mouseup", deleteClone);
-            orderableListItemForAnchor.style.visibility = "initial";
-            currentWorkingKey.current = undefined;
-            window.document.body.classList.remove(OrderableList_module_scss_1.default.unselectable);
-            {
-                const els = Array.from(rootRef.current.children);
-                const elInvisible = els.find((a) => !a.classList.contains(OrderableList_module_scss_1.default.visible) &&
-                    a.style.maxHeight !== "0px");
-                if (shrinkToOnOrder) {
-                    const child = elInvisible.lastElementChild;
-                    child.style.maxHeight = `${child.scrollHeight}px`;
-                    child.classList.add(OrderableList_module_scss_1.default.transitionHeight);
-                    const onEnd = (0, ownEvent_1.default)(() => {
-                        child.removeEventListener("transitionend", onEnd);
-                        child.style.maxHeight = `initial`;
-                        child.classList.remove(OrderableList_module_scss_1.default.transitionHeight);
-                    });
-                    child.addEventListener("transitionend", onEnd);
-                }
-                const box = elInvisible.getBoundingClientRect();
-                function cleanUp() {
-                    if (shrinkToOnOrder) {
-                        rootRef.current.style.removeProperty("padding-top");
-                        rootRef.current.style.removeProperty("min-height");
-                    }
-                    eventEmitter.dispatcher("order-stop");
-                    rootRef.current.classList.remove(OrderableList_module_scss_1.default.ordering);
-                    if (reorderingClassName)
-                        rootRef.current.classList.remove(reorderingClassName);
-                    for (let el of els)
-                        el.classList.remove(OrderableList_module_scss_1.default.visible);
-                    clone.remove();
-                    currentClone.current = null;
-                    for (let el of Array.from(elInvisible.children))
-                        el.style.height = "";
-                }
-                if (clone.style.top.startsWith(Math.floor(box.top).toString()) &&
-                    clone.style.left.startsWith(Math.floor(box.left).toString())) {
-                    cleanUp();
-                }
-                else {
-                    clone.style.top = `${box.top}px`;
-                    clone.style.left = `${box.left}px`;
-                    clone.style.transition = `top 500ms linear, left 500ms linear`;
-                    clone.addEventListener("transitionend", () => {
-                        cleanUp();
-                    });
-                }
-            }
-        };
-        for (let el of els) {
-            el.classList.add(OrderableList_module_scss_1.default.visible);
-        }
+        const elInvisible = els.find(function (a) {
+          return !a.classList.contains(_OrderableListModule.default.visible) && a.style.maxHeight !== "0px";
+        });
         if (shrinkToOnOrder) {
-            for (let el of els)
-                el.style.maxHeight = `${el.scrollHeight}px`;
-            const targetHeight = elIndex * shrinkToOnOrder;
-            const currentHeight = orderableListItemForAnchor.offsetTop - els[0].offsetTop;
-            const paddingTop = currentHeight - targetHeight;
-            rootRef.current.style.paddingTop = `${paddingTop}px`;
-            rootRef.current.style.minHeight = `${rootRef.current.clientHeight}px`;
+          const child = elInvisible.lastElementChild;
+          child.style.maxHeight = "".concat(child.scrollHeight, "px");
+          child.classList.add(_OrderableListModule.default.transitionHeight);
+          const onEnd = (0, _ownEvent.default)(function () {
+            child.removeEventListener("transitionend", onEnd);
+            child.style.maxHeight = "initial";
+            child.classList.remove(_OrderableListModule.default.transitionHeight);
+          });
+          child.addEventListener("transitionend", onEnd);
         }
-        orderableListItemForAnchor.style.visibility = "hidden";
-        orderableListItemForAnchor.classList.remove(OrderableList_module_scss_1.default.visible);
-        rootRef.current.classList.add(OrderableList_module_scss_1.default.ordering);
-        if (reorderingClassName)
-            rootRef.current.classList.add(reorderingClassName);
-        currentWorkingKey.current = cleanOrderRef.current[elIndex];
-        eventEmitter.dispatcher("order-start");
-        window.document.body.classList.add(OrderableList_module_scss_1.default.unselectable);
-        window.addEventListener("mouseup", deleteClone);
-        window.addEventListener("mousemove", movementControl);
-        window.addEventListener("touchend", deleteClone);
-        window.addEventListener("touchmove", movementControl);
-    }, []);
-    (0, react_1.useLayoutEffect)(() => {
-        if (currentClone.current) {
-            const els = Array.from(rootRef.current.children);
-            const elInvisible = els.find((a) => !a.classList.contains(OrderableList_module_scss_1.default.visible) && a.style.maxHeight !== "0px");
-            elInvisible.children[0].style.height = `${currentClone.current.clientHeight}px`;
-            setTimeout(() => {
-                elInvisible.children[1].style.height = `${currentClone.current.clientHeight}px`;
-            }, 150);
+        const box = elInvisible.getBoundingClientRect();
+        if (clone.style.top.startsWith(Math.floor(box.top).toString()) && clone.style.left.startsWith(Math.floor(box.left).toString())) {
+          cleanUp();
+        } else {
+          clone.style.top = "".concat(box.top, "px");
+          clone.style.left = "".concat(box.left, "px");
+          clone.style.transition = "top 500ms linear, left 500ms linear";
+          clone.addEventListener("transitionend", function () {
+            cleanUp();
+          });
         }
-    }, [cleanOrder]);
-    const _b = props, { keyOrder: _, onChangeKeyOrder: __ } = _b, toSpread = __rest(_b, ["keyOrder", "onChangeKeyOrder"]);
-    const childrenToRender = [...children]
-        .filter((a) => cleanOrder.includes(a.key))
-        .sort((a, b) => cleanOrder.indexOf(a.key) -
-        cleanOrder.indexOf(b.key))
-        .map((a, i) => (Object.assign(Object.assign({}, a), { key: order[i] })));
-    (0, react_1.useLayoutEffect)(() => {
-        rootRef.current.addEventListener("touchstart", (e) => {
-            const relatedAnchor = anchorsList.find((anchor) => anchor.contains(e.target));
-            if (relatedAnchor) {
-                e.preventDefault();
-                onAnchorClick({
-                    target: relatedAnchor,
-                });
-                const moveCb = (0, throttle_1.default)((e) => {
-                    const touch = e.touches[0];
-                    const [x, y] = [touch.clientX, touch.clientY];
-                    const els = Array.from(rootRef.current.children);
-                    const currentElementIdx = els.findIndex((c, i) => {
-                        const rect = c === null || c === void 0 ? void 0 : c.getBoundingClientRect();
-                        if (!rect)
-                            return false;
-                        return rect.top < y && rect.top + rect.height > y;
-                    });
-                    if (currentElementIdx !== -1) {
-                        const el = els[currentElementIdx];
-                        const rect = el.getBoundingClientRect();
-                        calculateReordering({
-                            target: el,
-                            offsetY: y - rect.top,
-                        }, els, cleanOrderRef.current);
-                    }
-                }, 500);
-                const t = e.target;
-                const touchMoveCb = (e) => {
-                    e.stopPropagation();
-                    window.dispatchEvent(new TouchEvent(e.type, e));
-                    moveCb(e);
-                };
-                const removeCb = (e) => {
-                    t.removeEventListener("touchmove", touchMoveCb);
-                    t.removeEventListener("touchend", removeCb);
-                    window.dispatchEvent(new TouchEvent(e.type, e));
-                };
-                t.addEventListener("touchmove", touchMoveCb);
-                t.addEventListener("touchend", removeCb);
-            }
+      }
+    };
+    for (let el of els) {
+      el.classList.add(_OrderableListModule.default.visible);
+    }
+    if (shrinkToOnOrder) {
+      for (let el of els) el.style.maxHeight = "".concat(el.scrollHeight, "px");
+      const targetHeight = elIndex * shrinkToOnOrder;
+      const currentHeight = orderableListItemForAnchor.offsetTop - els[0].offsetTop;
+      const paddingTop = currentHeight - targetHeight;
+      rootRef.current.style.paddingTop = "".concat(paddingTop, "px");
+      rootRef.current.style.minHeight = "".concat(rootRef.current.clientHeight, "px");
+    }
+    orderableListItemForAnchor.style.visibility = "hidden";
+    orderableListItemForAnchor.classList.remove(_OrderableListModule.default.visible);
+    rootRef.current.classList.add(_OrderableListModule.default.ordering);
+    if (reorderingClassName) rootRef.current.classList.add(reorderingClassName);
+    currentWorkingKey.current = cleanOrderRef.current[elIndex];
+    eventEmitter.dispatcher("order-start");
+    window.document.body.classList.add(_OrderableListModule.default.unselectable);
+    window.addEventListener("mouseup", deleteClone);
+    window.addEventListener("mousemove", movementControl);
+    window.addEventListener("touchend", deleteClone);
+    window.addEventListener("touchmove", movementControl);
+  }, []);
+  (0, _react.useLayoutEffect)(function () {
+    if (currentClone.current) {
+      const els = Array.from(rootRef.current.children);
+      const elInvisible = els.find(function (a) {
+        return !a.classList.contains(_OrderableListModule.default.visible) && a.style.maxHeight !== "0px";
+      });
+      elInvisible.children[0].style.height = "".concat(currentClone.current.clientHeight, "px");
+      setTimeout(function () {
+        elInvisible.children[1].style.height = "".concat(currentClone.current.clientHeight, "px");
+      }, 150);
+    }
+  }, [cleanOrder]);
+  const toSpread = _objectSpread({}, props);
+  delete toSpread.keyOrder;
+  delete toSpread.onChangeKeyOrder;
+  const childrenToRender = _toConsumableArray(children).filter(function (a) {
+    return cleanOrder.includes(a.key);
+  }).sort(function (a, b) {
+    return cleanOrder.indexOf(a.key) - cleanOrder.indexOf(b.key);
+  }).map(function (a, i) {
+    return _objectSpread(_objectSpread({}, a), {}, {
+      key: order[i]
+    });
+  });
+  (0, _react.useLayoutEffect)(function () {
+    rootRef.current.addEventListener("touchstart", function (e) {
+      const relatedAnchor = anchorsList.find(function (anchor) {
+        return anchor.contains(e.target);
+      });
+      if (relatedAnchor) {
+        e.preventDefault();
+        onAnchorClick({
+          target: relatedAnchor
         });
-    }, []);
-    const e = (0, react_1.useMemo)(() => ({
-        bindAnchor: (el) => {
-            el.addEventListener("mousedown", onAnchorClick);
-            anchorsList.push(el);
-        },
-        unbindAnchor: (el) => {
-            el.removeEventListener("mousedown", onAnchorClick);
-            anchorsList.splice(anchorsList.indexOf(el), 1);
-        },
-        on: eventEmitter.subscriber,
-    }), []);
-    return (react_1.default.createElement(OrderableListContext.Provider, { value: e },
-        react_1.default.createElement("div", Object.assign({ ref: rootRef, className: `${OrderableList_module_scss_1.default.root} ${className} ${shrinkToOnOrder ? OrderableList_module_scss_1.default.shrinkable : ""}` }, toSpread), mode === OrderableListReorderMode.VERTICAL ? (react_1.default.createElement(AnimatedEntrance_1.default, null, childrenToRender)) : (react_1.default.createElement(UncontrolledTransition_1.default, { className: OrderableList_module_scss_1.default.transition, transitionType: Transition_1.TransitionAnimationTypes.FADE, contentClassName: `${className}` },
-            react_1.default.createElement(react_1.Fragment, { key: orderId }, [...children]
-                .filter((a) => cleanOrder.includes(a.key))
-                .sort((a, b) => cleanOrder.indexOf(a.key) -
-                cleanOrder.indexOf(b.key))
-                .map((a, i) => (react_1.default.createElement(HeroWrapper, { key: i, id: a.key }, a)))))))));
-}
-exports.default = OrderableList;
-function HeroWrapper({ children, id }) {
-    const { heroRef } = (0, useHero_1.default)(id, undefined, {
-        onHeroStart: (_c, _o, t) => {
-            t.querySelectorAll("img").forEach((img) => (img.style.visibility = "hidden"));
-        },
-        onHeroEnd: () => {
-            if (heroRef.current)
-                heroRef.current
-                    .querySelectorAll("img")
-                    .forEach((img) => (img.style.visibility = ""));
-        },
+        const moveCb = (0, _throttle.default)(function () {
+          const els = Array.from(rootRef.current.children);
+          const currentElementIdx = els.findIndex(function (c) {
+            const rect = c === null || c === void 0 ? void 0 : c.getBoundingClientRect();
+            if (!rect) return false;
+            return rect.top < y && rect.top + rect.height > y;
+          });
+          if (currentElementIdx !== -1) {
+            const el = els[currentElementIdx];
+            const rect = el.getBoundingClientRect();
+            calculateReordering({
+              target: el,
+              offsetY: y - rect.top
+            }, els, cleanOrderRef.current);
+          }
+        }, 500);
+        const t = e.target;
+        const touchMoveCb = function touchMoveCb(e) {
+          e.stopPropagation();
+          window.dispatchEvent(new TouchEvent(e.type, e));
+          moveCb(e);
+        };
+        const removeCb = function removeCb(e) {
+          t.removeEventListener("touchmove", touchMoveCb);
+          t.removeEventListener("touchend", removeCb);
+          window.dispatchEvent(new TouchEvent(e.type, e));
+        };
+        t.addEventListener("touchmove", touchMoveCb);
+        t.addEventListener("touchend", removeCb);
+      }
     });
-    return react_1.default.createElement("div", { ref: heroRef }, children);
+  }, []);
+  const e = (0, _react.useMemo)(function () {
+    return {
+      bindAnchor: function bindAnchor(el) {
+        el.addEventListener("mousedown", onAnchorClick);
+        anchorsList.push(el);
+      },
+      unbindAnchor: function unbindAnchor(el) {
+        el.removeEventListener("mousedown", onAnchorClick);
+        anchorsList.splice(anchorsList.indexOf(el), 1);
+      },
+      on: eventEmitter.subscriber
+    };
+  }, []);
+  return /*#__PURE__*/_react.default.createElement(OrderableListContext.Provider, {
+    value: e
+  }, /*#__PURE__*/_react.default.createElement("div", _extends({
+    ref: rootRef,
+    className: "".concat(_OrderableListModule.default.root, " ").concat(className, " ").concat(shrinkToOnOrder ? _OrderableListModule.default.shrinkable : "")
+  }, toSpread), mode === OrderableListReorderMode.VERTICAL ? /*#__PURE__*/_react.default.createElement(_AnimatedEntrance.default, null, childrenToRender) : /*#__PURE__*/_react.default.createElement(_UncontrolledTransition.default, {
+    className: _OrderableListModule.default.transition,
+    transitionType: _Transition.TransitionAnimationTypes.FADE,
+    contentClassName: "".concat(className)
+  }, /*#__PURE__*/_react.default.createElement(_react.Fragment, {
+    key: orderId
+  }, _toConsumableArray(children).filter(function (a) {
+    return cleanOrder.includes(a.key);
+  }).sort(function (a, b) {
+    return cleanOrder.indexOf(a.key) - cleanOrder.indexOf(b.key);
+  }).map(function (a, i) {
+    return /*#__PURE__*/_react.default.createElement(HeroWrapper, {
+      key: i,
+      id: a.key
+    }, a);
+  })))));
+}
+function HeroWrapper(_ref5) {
+  let children = _ref5.children,
+    id = _ref5.id;
+  const _useHero = (0, _useHero2.default)(id, undefined, {
+      onHeroStart: function onHeroStart(_c, _o, t) {
+        t.querySelectorAll("img").forEach(function (img) {
+          return img.style.visibility = "hidden";
+        });
+      },
+      onHeroEnd: function onHeroEnd() {
+        if (heroRef.current) heroRef.current.querySelectorAll("img").forEach(function (img) {
+          return img.style.visibility = "";
+        });
+      }
+    }),
+    heroRef = _useHero.heroRef;
+  return /*#__PURE__*/_react.default.createElement("div", {
+    ref: heroRef
+  }, children);
 }
 function useOrderableListAnchor() {
-    const anchorRef = (0, react_1.useRef)(null);
-    const ctx = (0, react_1.useContext)(OrderableListContext);
-    (0, react_1.useLayoutEffect)(() => {
-        if (!ctx)
-            return;
-        const { bindAnchor, unbindAnchor } = ctx;
-        bindAnchor(anchorRef.current);
-        return () => unbindAnchor(anchorRef.current);
-    }, []);
-    return {
-        anchorRef: ctx ? anchorRef : undefined,
+  const anchorRef = (0, _react.useRef)(null);
+  const ctx = (0, _react.useContext)(OrderableListContext);
+  (0, _react.useLayoutEffect)(function () {
+    if (!ctx) return;
+    const bindAnchor = ctx.bindAnchor,
+      unbindAnchor = ctx.unbindAnchor;
+    bindAnchor(anchorRef.current);
+    return function () {
+      return unbindAnchor(anchorRef.current);
     };
+  }, []);
+  return {
+    anchorRef: ctx ? anchorRef : undefined
+  };
 }
-exports.useOrderableListAnchor = useOrderableListAnchor;
 function useOrderableEvents(events) {
-    const { on } = (0, react_1.useContext)(OrderableListContext);
-    (0, react_1.useEffect)(() => {
-        const unsubscribers = [];
-        for (let eventName in events) {
-            unsubscribers.push(on(eventName, events[eventName]));
-        }
-        return () => {
-            unsubscribers.forEach((u) => u());
-        };
-    }, [events]);
-}
-exports.useOrderableEvents = useOrderableEvents;
-//# sourceMappingURL=OrderableList.js.map
+  const _useContext = (0, _react.useContext)(OrderableListContext),
+    on = _useContext.on;
+  (0, _react.useEffect)(function () {
+    const unsubscribers = [];
+    for (let eventName in events) {
+      unsubscribers.push(on(eventName, events[eventName]));
+    }
+    return function () {
+      unsubscribers.forEach(function (u) {
+        return u();
+      });
+    };
+  }, [events]);
+}