intergalactic 15.122.0-prerelease.0 → 15.123.0

package/drag-and-drop/lib/es6/DragAndDrop.js

@@ -1,661 +0,0 @@
-import _objectSpread from "@babel/runtime/helpers/objectSpread2";
-import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _createSuper from "@babel/runtime/helpers/createSuper";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import { sstyled as _sstyled } from 'intergalactic/utils/lib/core/index';
-import { assignProps as _assignProps3 } from 'intergalactic/core';
-import { assignProps as _assignProps2 } from 'intergalactic/core';
-import { assignProps as _assignProps } from 'intergalactic/core';
-import React from 'react';
-import createComponent, { sstyled, Component, Root } from 'intergalactic/core';
-import { Box } from 'intergalactic/flex-box';
-import { localizedMessages } from './translations/__intergalactic-dynamic-locales';
-import i18nEnhance from 'intergalactic/utils/lib/enhances/i18nEnhance';
-import useEnhancedEffect from 'intergalactic/utils/lib/use/useEnhancedEffect';
-/*__reshadow-styles__:"./style/drag-and-drop.shadow.css"*/
-var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/".___SDraggable_1inh4_gg_.__draggable_1inh4_gg_{position:relative;cursor:grab;-moz-user-select:none;-webkit-user-select:none;user-select:none}.___SDraggable_1inh4_gg_.__draggable_1inh4_gg_::before{content:\"\";position:absolute;display:none;pointer-events:none;background-image:radial-gradient(circle at center,var(--intergalactic-icon-primary-neutral, #6c6e79) 1px,transparent 0);background-size:6px 6px;background-position:2px 2px;background-repeat:repeat repeat}@media (hover:hover){.___SDraggable_1inh4_gg_.__draggable_1inh4_gg_:hover::before{display:block}}.___SDraggable_1inh4_gg_.__draggable_1inh4_gg_.__hideHoverEffect_1inh4_gg_:not(._role_menuitemcheckbox_1inh4_gg_)::before{display:none}.___SDraggable_1inh4_gg_._placement_right_1inh4_gg_::before{right:0}.___SDraggable_1inh4_gg_._placement_bottom_1inh4_gg_::before{bottom:0}.___SDraggable_1inh4_gg_._placement_left_1inh4_gg_::before{left:0}.___SDraggable_1inh4_gg_._placement_top_1inh4_gg_::before{top:0;left:0;width:100%;height:16px}.___SDraggable_1inh4_gg_._placement_bottom_1inh4_gg_::before{left:0;width:100%;height:16px}.___SDraggable_1inh4_gg_._placement_left_1inh4_gg_::before,.___SDraggable_1inh4_gg_._placement_right_1inh4_gg_::before{top:0;width:16px;height:100%}.___SDropZone_1inh4_gg_{position:relative}.___SDraggable_1inh4_gg_.__dropPreview_1inh4_gg_,.___SDropZone_1inh4_gg_.__dropPreview_1inh4_gg_{background-color:var(--intergalactic-bg-secondary-neutral, #f4f5f9)}.___SDraggable_1inh4_gg_.__dark_1inh4_gg_.__dropPreview_1inh4_gg_,.___SDropZone_1inh4_gg_.__dark_1inh4_gg_.__dropPreview_1inh4_gg_{background-color:var(--intergalactic-bg-primary-invert-active, #484a54)}.___SDraggable_1inh4_gg_:focus{outline:0}.___SDraggable_1inh4_gg_.__keyboardFocused_1inh4_gg_:focus{box-shadow:none}.___SDraggable_1inh4_gg_.__keyboardFocused_1inh4_gg_:focus:after{position:absolute;display:block;content:\"\";top:3px;right:3px;bottom:3px;left:3px;box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5));pointer-events:none}.___SDraggable_1inh4_gg_.__keyboardDragging_1inh4_gg_{scale:1.1;background-color:var(--intergalactic-bg-primary-neutral, #ffffff);box-shadow:var(--intergalactic-box-shadow-dnd, 0px 0px 1px 0px rgba(25, 27, 35, 0.16), 0px 12px 40px 0px rgba(25, 27, 35, 0.16))!important}.___SDraggable_1inh4_gg_.__keyboardDragging_1inh4_gg_.__hideHoverEffect_1inh4_gg_::before,.___SDraggable_1inh4_gg_.__keyboardDragging_1inh4_gg_::before{display:block}.___SDraggable_1inh4_gg_.__keyboardDragging_1inh4_gg_.__reversedScaling_1inh4_gg_{scale:.95}.___SDraggable_1inh4_gg_.__animatedScaling_1inh4_gg_{transition:all calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-in-out}.___SA11yHint_1inh4_gg_{position:absolute;margin-top:-1px;height:1px;width:1px;clip:rect(0 0 0 0)}@media (prefers-reduced-motion:reduce){.___SDraggable_1inh4_gg_{transition:none}}" /*__inner_css_end__*/, "1inh4_gg_") /*__reshadow_css_end__*/, {
-  "__SDraggable": "___SDraggable_1inh4_gg_",
-  "_placement_top": "_placement_top_1inh4_gg_",
-  "_placement_right": "_placement_right_1inh4_gg_",
-  "_placement_left": "_placement_left_1inh4_gg_",
-  "_placement_bottom": "_placement_bottom_1inh4_gg_",
-  "__SDropZone": "___SDropZone_1inh4_gg_",
-  "_dropPreview": "__dropPreview_1inh4_gg_",
-  "_dark": "__dark_1inh4_gg_",
-  "_keyboardFocused": "__keyboardFocused_1inh4_gg_",
-  "_keyboardDragging": "__keyboardDragging_1inh4_gg_",
-  "_reversedScaling": "__reversedScaling_1inh4_gg_",
-  "_animatedScaling": "__animatedScaling_1inh4_gg_",
-  "__SA11yHint": "___SA11yHint_1inh4_gg_",
-  "_draggable": "__draggable_1inh4_gg_",
-  "_hideHoverEffect": "__hideHoverEffect_1inh4_gg_",
-  "_role_menuitemcheckbox": "_role_menuitemcheckbox_1inh4_gg_"
-});
-import keyboardFocusEnhance from 'intergalactic/utils/lib/enhances/keyboardFocusEnhance';
-import { ScreenReaderOnly } from 'intergalactic/flex-box';
-import uniqueIDEnhance from 'intergalactic/utils/lib/uniqueID';
-import canUseDOM from 'intergalactic/utils/lib/canUseDOM';
-var noop = function noop() {
-  /* do nothing */
-};
-var DragAndDropContext = /*#__PURE__*/React.createContext({
-  attach: noop,
-  detach: noop
-});
-var DragAndDropRoot = /*#__PURE__*/function (_Component) {
-  _inherits(DragAndDropRoot, _Component);
-  var _super = _createSuper(DragAndDropRoot);
-  function DragAndDropRoot() {
-    var _this;
-    _classCallCheck(this, DragAndDropRoot);
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-    _this = _super.call.apply(_super, [this].concat(args));
-    _defineProperty(_assertThisInitialized(_this), "state", {
-      items: [],
-      dragging: null,
-      dragOver: null,
-      hideHoverEffect: false,
-      // https://stackoverflow.com/questions/67118739/hover-effect-reset-when-hovering-over-other-letters
-      a11yHint: null,
-      keyboardDraggingIndex: null,
-      animatedScaling: null,
-      reversedScaling: false
-    });
-    _defineProperty(_assertThisInitialized(_this), "containerRef", /*#__PURE__*/React.createRef());
-    _defineProperty(_assertThisInitialized(_this), "clearA11yHintTimeout", 0);
-    _defineProperty(_assertThisInitialized(_this), "handleItemDragStart", function (index) {
-      var items = _this.state.items;
-      var currentItem = items[index];
-      if (!currentItem) return;
-      var itemText = currentItem.node.getAttribute('aria-label') || currentItem.node.textContent || "".concat(index + 1);
-      var zoneName = currentItem.zoneName;
-      var zonedItems = !zoneName ? items : items.filter(function (i) {
-        return (i === null || i === void 0 ? void 0 : i.zoneName) === zoneName;
-      });
-      var itemsCount = zonedItems.length;
-      var itemPosition = zonedItems.findIndex(function (i) {
-        return (i === null || i === void 0 ? void 0 : i.node) === currentItem.node || (i === null || i === void 0 ? void 0 : i.id) && (i === null || i === void 0 ? void 0 : i.id) === currentItem.id;
-      });
-      _this.setA11yHint(zoneName ? 'grabbedWithZone' : 'grabbed', {
-        itemText: itemText,
-        itemPosition: itemPosition + 1,
-        itemsCount: itemsCount,
-        zoneName: zoneName || ''
-      });
-      _this.setState(function (prevState) {
-        return {
-          dragging: {
-            index: index,
-            initialItemsRects: prevState.items.map(function (item) {
-              return item === null || item === void 0 ? void 0 : item.node.getBoundingClientRect();
-            })
-          }
-        };
-      });
-    });
-    _defineProperty(_assertThisInitialized(_this), "handleItemDragEnd", function (event) {
-      event.preventDefault();
-      _this.setState({
-        dragging: null,
-        dragOver: null,
-        reversedScaling: false,
-        keyboardDraggingIndex: null
-      });
-    });
-    _defineProperty(_assertThisInitialized(_this), "handleItemDragOver", function (event) {
-      event.preventDefault();
-      var _this$state = _this.state,
-        items = _this$state.items,
-        dragging = _this$state.dragging,
-        dragOver = _this$state.dragOver;
-      if (!dragging) return;
-      var itemIndex = dragging.initialItemsRects.findIndex(function (rect) {
-        return rect && event.clientX > rect.x && event.clientX < rect.x + rect.width && event.clientY > rect.y && event.clientY < rect.y + rect.height;
-      });
-      var currentItem = items[itemIndex];
-      var draggingItem = items[dragging.index];
-      if (!currentItem || !draggingItem || itemIndex === dragOver) return;
-      var node = currentItem.isDropZone ? draggingItem.node : currentItem.node;
-      var itemText = node.getAttribute('aria-label') || node.textContent || "".concat(itemIndex + 1);
-      var zoneName = currentItem.zoneName;
-      var zonedItems = !zoneName ? items : items.filter(function (i) {
-        return (i === null || i === void 0 ? void 0 : i.zoneName) === zoneName;
-      });
-      var itemsCount = zonedItems.length;
-      var itemPosition = zonedItems.findIndex(function (i) {
-        return (i === null || i === void 0 ? void 0 : i.node) === currentItem.node || (i === null || i === void 0 ? void 0 : i.id) && (i === null || i === void 0 ? void 0 : i.id) === currentItem.id;
-      });
-      var i18nKey = !zoneName ? 'grabbing' : currentItem.isDropZone ? 'grabbingJustWithZone' : 'grabbingFullWithZone';
-      _this.setA11yHint(i18nKey, {
-        itemText: itemText,
-        itemPosition: itemPosition + 1,
-        itemsCount: itemsCount,
-        zoneName: zoneName || ''
-      });
-      _this.setState({
-        dragOver: itemIndex
-      }, _this.swapElements);
-    });
-    _defineProperty(_assertThisInitialized(_this), "handleItemDrop", function () {
-      var onDnD = _this.asProps.onDnD;
-      if (!onDnD) return;
-      var _this$state2 = _this.state,
-        items = _this$state2.items,
-        dragging = _this$state2.dragging,
-        dragOver = _this$state2.dragOver;
-      if (!dragging) return;
-      var currentItem = dragOver !== null ? items[dragOver] : items[dragging.index];
-      var draggingItem = items[dragging.index];
-      if (!currentItem || !draggingItem) return;
-      var node = currentItem.isDropZone ? draggingItem.node : currentItem.node;
-      var itemText = node.getAttribute('aria-label') || node.textContent || "".concat((dragOver !== null && dragOver !== void 0 ? dragOver : dragging.index) + 1);
-      var zoneName = currentItem.zoneName;
-      var zonedItems = !zoneName ? items : items.filter(function (i) {
-        return (i === null || i === void 0 ? void 0 : i.zoneName) === zoneName;
-      });
-      var itemsCount = zonedItems.length;
-      var itemPosition = zonedItems.findIndex(function (i) {
-        return (i === null || i === void 0 ? void 0 : i.node) === currentItem.node || (i === null || i === void 0 ? void 0 : i.id) && (i === null || i === void 0 ? void 0 : i.id) === currentItem.id;
-      });
-      var i18nKey = !zoneName ? 'dropped' : currentItem.isDropZone ? 'droppedJustWithZone' : 'droppedFullWithZone';
-      _this.setA11yHint(i18nKey, {
-        itemText: itemText,
-        itemPosition: itemPosition + 1,
-        itemsCount: itemsCount,
-        zoneName: zoneName || ''
-      });
-      _this.setState({
-        dragging: null,
-        dragOver: null,
-        keyboardDraggingIndex: null,
-        hideHoverEffect: true,
-        reversedScaling: false
-      });
-      if (dragging && items[dragging.index]) {
-        var fromNode = items[dragging.index];
-        if (fromNode) {
-          onDnD({
-            fromId: fromNode.id,
-            fromIndex: dragging.index,
-            toId: currentItem.id,
-            toIndex: dragOver !== null && dragOver !== void 0 ? dragOver : dragging.index
-          });
-        }
-      }
-      if (!currentItem.draggingAllowed) {
-        var _this$asProps$onInser, _this$asProps, _items$index;
-        (_this$asProps$onInser = (_this$asProps = _this.asProps).onInsertDroppable) === null || _this$asProps$onInser === void 0 ? void 0 : _this$asProps$onInser.call(_this$asProps, (_items$index = items[dragging.index]) === null || _items$index === void 0 ? void 0 : _items$index.children, currentItem.children);
-      } else {
-        var _this$asProps$onSwapD, _this$asProps2, _items$index2;
-        (_this$asProps$onSwapD = (_this$asProps2 = _this.asProps).onSwapDraggable) === null || _this$asProps$onSwapD === void 0 ? void 0 : _this$asProps$onSwapD.call(_this$asProps2, (_items$index2 = items[dragging.index]) === null || _items$index2 === void 0 ? void 0 : _items$index2.children, currentItem.children);
-      }
-    });
-    _defineProperty(_assertThisInitialized(_this), "handleItemDragEnter", function (event) {
-      event.preventDefault();
-    });
-    _defineProperty(_assertThisInitialized(_this), "handleItemMouseMove", function () {
-      if (!_this.state.hideHoverEffect) return;
-      _this.setState({
-        hideHoverEffect: false
-      });
-    });
-    _defineProperty(_assertThisInitialized(_this), "updateItemScaling", function () {
-      var _this$state$items$;
-      var firstItemNode = (_this$state$items$ = _this.state.items[0]) === null || _this$state$items$ === void 0 ? void 0 : _this$state$items$.node;
-      if (!firstItemNode) return;
-      if (_this.state.reversedScaling) return;
-      var firstItemRect = firstItemNode.getBoundingClientRect();
-      var reversedScaling = false;
-      var parent = firstItemNode.parentElement;
-      while (parent && parent !== document.body) {
-        var computedStyle = getComputedStyle(parent);
-        var rect = parent.getBoundingClientRect();
-        if (computedStyle.overflow !== 'visible') {
-          if (rect.left >= firstItemRect.left || rect.right <= firstItemRect.right || rect.top >= firstItemRect.top || rect.bottom <= firstItemRect.bottom) {
-            reversedScaling = true;
-            break;
-          }
-        } else {
-          if (rect.left < firstItemRect.left && rect.right > firstItemRect.right && rect.top < firstItemRect.top && rect.bottom > firstItemRect.bottom) {
-            break;
-          }
-        }
-        parent = parent.parentElement;
-      }
-      if (_this.state.reversedScaling !== reversedScaling) {
-        _this.setState({
-          reversedScaling: reversedScaling
-        });
-      }
-    });
-    _defineProperty(_assertThisInitialized(_this), "swapElements", function () {
-      var _dragging$index, _items$draggingIndex, _items$dragOver;
-      var _this$state3 = _this.state,
-        items = _this$state3.items,
-        dragging = _this$state3.dragging,
-        dragOver = _this$state3.dragOver;
-      var draggingIndex = (_dragging$index = dragging === null || dragging === void 0 ? void 0 : dragging.index) !== null && _dragging$index !== void 0 ? _dragging$index : null;
-      if (draggingIndex === null || dragOver === null) return;
-      var node = (_items$draggingIndex = items[draggingIndex]) === null || _items$draggingIndex === void 0 ? void 0 : _items$draggingIndex.node;
-      var dragNode = (_items$dragOver = items[dragOver]) === null || _items$dragOver === void 0 ? void 0 : _items$dragOver.node;
-      if (!node || !dragNode) return;
-      if (draggingIndex === dragOver) {
-        var _items$node, _items, _this$containerRef$cu;
-        var nextDragNode = (_items$node = (_items = items[dragOver + 1]) === null || _items === void 0 ? void 0 : _items.node) !== null && _items$node !== void 0 ? _items$node : null;
-        (_this$containerRef$cu = _this.containerRef.current) === null || _this$containerRef$cu === void 0 ? void 0 : _this$containerRef$cu.insertBefore(node, nextDragNode);
-      } else if (draggingIndex > dragOver) {
-        var _this$containerRef$cu2;
-        (_this$containerRef$cu2 = _this.containerRef.current) === null || _this$containerRef$cu2 === void 0 ? void 0 : _this$containerRef$cu2.insertBefore(node, dragNode);
-      } else {
-        var _this$containerRef$cu3;
-        (_this$containerRef$cu3 = _this.containerRef.current) === null || _this$containerRef$cu3 === void 0 ? void 0 : _this$containerRef$cu3.insertBefore(node, dragNode.nextSibling);
-      }
-      node.focus();
-    });
-    _defineProperty(_assertThisInitialized(_this), "handleItemKeyDown", function (event, index) {
-      if (event.target !== event.currentTarget) {
-        return;
-      }
-      if (_this.state.dragging && event.key === 'Tab') {
-        event.preventDefault();
-        event.stopPropagation();
-      }
-      if (event.key === ' ') {
-        var _this$state$items$ind;
-        event.preventDefault();
-        event.stopPropagation();
-        if (_this.state.dragging) {
-          _this.handleItemDrop();
-          _this.setState({
-            dragging: null,
-            dragOver: null,
-            keyboardDraggingIndex: null,
-            animatedScaling: index,
-            hideHoverEffect: true
-          });
-        } else if ((_this$state$items$ind = _this.state.items[index]) !== null && _this$state$items$ind !== void 0 && _this$state$items$ind.draggingAllowed) {
-          _this.handleItemDragStart(index);
-          _this.setState({
-            keyboardDraggingIndex: index,
-            animatedScaling: index
-          });
-          _this.updateItemScaling();
-        }
-        return false;
-      } else if (event.key === 'Escape' && _this.state.dragging) {
-        event.preventDefault();
-        event.stopPropagation();
-        _this.setA11yHint('discarded');
-        _this.setState({
-          dragging: null,
-          dragOver: null,
-          keyboardDraggingIndex: null,
-          hideHoverEffect: true
-        });
-        var items = _this.state.items;
-        for (var i = items.length - 1; i >= 0; i--) {
-          var _items$i, _items$node2, _items2;
-          var node = (_items$i = items[i]) === null || _items$i === void 0 ? void 0 : _items$i.node;
-          var prevNode = (_items$node2 = (_items2 = items[i + 1]) === null || _items2 === void 0 ? void 0 : _items2.node) !== null && _items$node2 !== void 0 ? _items$node2 : null;
-          if (node) {
-            var _this$containerRef$cu4;
-            (_this$containerRef$cu4 = _this.containerRef.current) === null || _this$containerRef$cu4 === void 0 ? void 0 : _this$containerRef$cu4.insertBefore(node, prevNode);
-          }
-        }
-        if (event.target instanceof HTMLElement) {
-          event.target.focus();
-        }
-        return false;
-      } else if (event.key.startsWith('Arrow') && _this.state.dragging) {
-        if (_this.state.animatedScaling !== null) {
-          _this.setState({
-            animatedScaling: null
-          });
-        }
-        var _node = event.currentTarget;
-        if (!_node || _node !== document.activeElement) return;
-        event.preventDefault();
-        event.stopPropagation();
-        requestAnimationFrame(function () {
-          var _this$containerRef$cu5;
-          if (!(_node instanceof HTMLElement) || _node !== document.activeElement) return;
-          var rects = [];
-          var nodeRect = {
-            top: 0,
-            right: 0,
-            bottom: 0,
-            left: 0
-          };
-          (_this$containerRef$cu5 = _this.containerRef.current) === null || _this$containerRef$cu5 === void 0 ? void 0 : _this$containerRef$cu5.childNodes.forEach(function (childNode, index) {
-            if (childNode instanceof HTMLElement && childNode.getAttribute('draggable') !== null) {
-              var rect = childNode.getBoundingClientRect();
-              var roundedRect = {
-                top: Math.round(rect.top),
-                right: Math.round(rect.right),
-                bottom: Math.round(rect.bottom),
-                left: Math.round(rect.left)
-              };
-              rects.push(roundedRect);
-              if (childNode === _node) {
-                nodeRect = roundedRect;
-              }
-            }
-          });
-          var nextIndex = findNextRectangleIndex(rects, nodeRect, event.key);
-          if (nextIndex === -1) return false;
-          if (_node && _this.state.dragging !== null) {
-            _this.setA11yHint('grabbing', {
-              itemPosition: nextIndex + 1,
-              itemsCount: _this.state.items.length
-            });
-            _this.setState({
-              dragOver: nextIndex
-            }, function () {
-              _this.swapElements();
-            });
-          }
-          return false;
-        });
-      }
-    });
-    _defineProperty(_assertThisInitialized(_this), "handleItemFocus", function () {
-      if (!_this.state.dragging) return;
-      _this.updateItemScaling();
-    });
-    _defineProperty(_assertThisInitialized(_this), "makeItemDragStartHandler", function (index) {
-      return function () {
-        return _this.handleItemDragStart(index);
-      };
-    });
-    _defineProperty(_assertThisInitialized(_this), "makeItemKeyDownHandler", function (index) {
-      return function (event) {
-        return _this.handleItemKeyDown(event, index);
-      };
-    });
-    _defineProperty(_assertThisInitialized(_this), "handlePageKeyDown", function (event) {
-      if (_this.asProps.customFocus !== undefined) {
-        var itemIndex = _this.getCustomFocusItemIndex(_this.asProps.customFocus);
-        if (_this.state.items[itemIndex]) {
-          _this.handleItemKeyDown(event, itemIndex);
-        }
-      }
-    });
-    _defineProperty(_assertThisInitialized(_this), "attach", function (_ref7) {
-      var index = _ref7.index,
-        children = _ref7.children,
-        node = _ref7.node,
-        id = _ref7.id,
-        draggingAllowed = _ref7.draggingAllowed,
-        zoneName = _ref7.zoneName,
-        isDropZone = _ref7.isDropZone;
-      _this.setState(function (prevState) {
-        var _prevState$items$inde, _prevState$items$inde2;
-        if (((_prevState$items$inde = prevState.items[index]) === null || _prevState$items$inde === void 0 ? void 0 : _prevState$items$inde.children) === children && ((_prevState$items$inde2 = prevState.items[index]) === null || _prevState$items$inde2 === void 0 ? void 0 : _prevState$items$inde2.node) === node) return prevState;
-        var items = prevState.items;
-        items[index] = {
-          children: children,
-          node: node,
-          id: id,
-          draggingAllowed: draggingAllowed,
-          zoneName: zoneName,
-          isDropZone: isDropZone
-        };
-        return {
-          items: _toConsumableArray(items)
-        };
-      });
-    });
-    _defineProperty(_assertThisInitialized(_this), "detach", function (index) {
-      _this.setState(function (prevState) {
-        if (!prevState.items[index]) return prevState;
-        var items = prevState.items;
-        items[index] = undefined;
-        return {
-          items: _toConsumableArray(items)
-        };
-      });
-    });
-    _defineProperty(_assertThisInitialized(_this), "getCustomFocusItemIndex", function (customFocus) {
-      if (customFocus === undefined) return undefined;
-      var itemIndex = customFocus;
-      if (typeof itemIndex === 'string') {
-        itemIndex = _this.state.items.findIndex(function (item) {
-          return (item === null || item === void 0 ? void 0 : item.id) === customFocus;
-        });
-      }
-      if (itemIndex === -1 || typeof itemIndex !== 'number') return undefined;
-      return itemIndex;
-    });
-    _defineProperty(_assertThisInitialized(_this), "setA11yHint", function (key) {
-      var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
-      clearTimeout(_this.clearA11yHintTimeout);
-      var getI18nText = _this.asProps.getI18nText;
-      _this.setState({
-        a11yHint: getI18nText(key, options)
-      });
-      if ((key === 'dropped' || key === 'discarded') && canUseDOM()) {
-        _this.clearA11yHintTimeout = window.setTimeout(function () {
-          _this.setState({
-            a11yHint: null
-          });
-        }, 2000);
-      }
-    });
-    return _this;
-  }
-  _createClass(DragAndDropRoot, [{
-    key: "getDraggableProps",
-    value: function getDraggableProps(_, index) {
-      var uid = this.asProps.uid;
-      return {
-        uid: uid,
-        index: index,
-        onDragStart: this.makeItemDragStartHandler(index),
-        onDragEnd: this.handleItemDragEnd,
-        onDragOver: this.handleItemDragOver,
-        onDragEnter: this.handleItemDragEnter,
-        onDrop: this.handleItemDrop,
-        onMouseMove: this.handleItemMouseMove,
-        onKeyDown: this.makeItemKeyDownHandler(index),
-        onFocus: this.handleItemFocus,
-        dropPreview: index === this.state.dragOver,
-        keyboardDragging: index === this.state.keyboardDraggingIndex,
-        reversedScaling: this.state.reversedScaling,
-        dark: this.asProps.theme === 'dark',
-        hideHoverEffect: this.state.hideHoverEffect,
-        animatedScaling: index === this.state.animatedScaling
-      };
-    }
-  }, {
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      document.addEventListener('keydown', this.handlePageKeyDown, {
-        capture: true
-      });
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      clearTimeout(this.clearA11yHintTimeout);
-      document.removeEventListener('keydown', this.handlePageKeyDown, {
-        capture: true
-      });
-    }
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps) {
-      if (prevProps.customFocus !== this.asProps.customFocus) {
-        var itemIndex = this.getCustomFocusItemIndex(this.asProps.customFocus);
-        if (this.state.items[itemIndex]) this.handleItemFocus();
-      }
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _ref = this.asProps,
-        _ref4;
-      var attach = this.attach,
-        detach = this.detach;
-      var SA11yHint = 'div';
-      var _this$state4 = this.state,
-        a11yHint = _this$state4.a11yHint,
-        dragging = _this$state4.dragging;
-      var context = {
-        attach: attach,
-        detach: detach
-      };
-      var _this$asProps3 = this.asProps,
-        getI18nText = _this$asProps3.getI18nText,
-        uid = _this$asProps3.uid;
-      return _ref4 = sstyled(this.asProps.styles), /*#__PURE__*/React.createElement(DragAndDropContext.Provider, {
-        value: context
-      }, a11yHint && /*#__PURE__*/React.createElement(SA11yHint, _ref4.cn("SA11yHint", {
-        "role": 'alert',
-        "aria-live": 'assertive'
-      }), a11yHint), /*#__PURE__*/React.createElement(Box, _assignProps({
-        "role": 'group',
-        "ref": this.containerRef
-      }, _ref)), /*#__PURE__*/React.createElement(ScreenReaderOnly, _ref4.cn("ScreenReaderOnly", {
-        "id": "describe-draggable-".concat(uid),
-        "aria-hidden": 'true'
-      }), getI18nText('describe', {
-        control: 'Space'
-      })));
-    }
-  }]);
-  return DragAndDropRoot;
-}(Component);
-_defineProperty(DragAndDropRoot, "displayName", 'DragAndDrop');
-_defineProperty(DragAndDropRoot, "enhance", [i18nEnhance(localizedMessages), uniqueIDEnhance()]);
-_defineProperty(DragAndDropRoot, "defaultProps", {
-  theme: 'default',
-  i18n: localizedMessages,
-  locale: 'en'
-});
-_defineProperty(DragAndDropRoot, "style", style);
-var Draggable = function Draggable(props) {
-  var _ref2 = arguments[0],
-    _ref5;
-  var SDraggable = Box;
-  var ref = React.useRef();
-  var _React$useContext = React.useContext(DragAndDropContext),
-    attach = _React$useContext.attach,
-    detach = _React$useContext.detach;
-  var styles = props.styles,
-    _props$placement = props.placement,
-    placement = _props$placement === void 0 ? 'right' : _props$placement,
-    _props$noDrag = props.noDrag,
-    noDrag = _props$noDrag === void 0 ? false : _props$noDrag,
-    index = props.index,
-    children = props.children,
-    Children = props.Children,
-    id = props.id,
-    zoneName = props.zoneName,
-    _props$isDropZone = props.isDropZone,
-    isDropZone = _props$isDropZone === void 0 ? false : _props$isDropZone,
-    uid = props.uid,
-    _props$isCustomFocus = props.isCustomFocus,
-    isCustomFocus = _props$isCustomFocus === void 0 ? false : _props$isCustomFocus,
-    keyboardFocused = props.keyboardFocused;
-  var resolvedChildren = React.useMemo(function () {
-    return typeof children === 'function' ? children(props) : children;
-  }, [children, props]);
-  useEnhancedEffect(function () {
-    attach({
-      index: index,
-      children: resolvedChildren,
-      node: ref.current,
-      id: id,
-      draggingAllowed: !noDrag,
-      zoneName: zoneName,
-      isDropZone: isDropZone
-    });
-    return function () {
-      return detach(index);
-    };
-  }, [index, resolvedChildren, attach, detach, id]);
-  return _ref5 = sstyled(styles), /*#__PURE__*/React.createElement(SDraggable, _ref5.cn("SDraggable", _objectSpread({}, _assignProps2({
-    "ref": ref,
-    "draggable": !noDrag,
-    "placement": placement,
-    "role": 'group',
-    "aria-describedby": "describe-draggable-".concat(uid),
-    "use:keyboardFocused": isCustomFocus ? false : keyboardFocused
-  }, _ref2))), /*#__PURE__*/React.createElement(Children, _ref5.cn("Children", {})));
-};
-Draggable.enhance = [keyboardFocusEnhance()];
-var findNextRectangleIndex = function findNextRectangleIndex(rectangles, current, direction) {
-  var candidate = null;
-  var minDistance = Infinity;
-  for (var i = 0; i < rectangles.length; i++) {
-    var rect = rectangles[i];
-    if (!rect) continue;
-    if (rect === current) continue;
-    var verticallyOverlaps = current.top <= rect.bottom && current.bottom >= rect.top;
-    var horizontallyOverlaps = current.left <= rect.right && current.right >= rect.left;
-    if (!verticallyOverlaps && !horizontallyOverlaps) continue;
-    switch (direction) {
-      case 'ArrowRight':
-        {
-          if (!verticallyOverlaps) continue;
-          var distance = rect.left - current.right;
-          if (distance < 0 || distance >= minDistance) continue;
-          candidate = rect;
-          minDistance = distance;
-          break;
-        }
-      case 'ArrowLeft':
-        {
-          if (!verticallyOverlaps) continue;
-          var _distance = current.left - rect.right;
-          if (_distance < 0 || _distance >= minDistance) continue;
-          candidate = rect;
-          minDistance = _distance;
-          break;
-        }
-      case 'ArrowUp':
-        {
-          if (!horizontallyOverlaps) continue;
-          var _distance2 = current.top - rect.bottom;
-          if (_distance2 < 0 || _distance2 >= minDistance) continue;
-          candidate = rect;
-          minDistance = _distance2;
-          break;
-        }
-      case 'ArrowDown':
-        {
-          if (!horizontallyOverlaps) continue;
-          var _distance3 = rect.top - current.bottom;
-          if (_distance3 < 0 || _distance3 >= minDistance) continue;
-          candidate = rect;
-          minDistance = _distance3;
-          break;
-        }
-    }
-  }
-  return rectangles.indexOf(candidate);
-};
-var DropZone = function DropZone(props) {
-  var _ref3 = arguments[0],
-    _ref6;
-  var SDropZone = DragAndDrop.Draggable;
-  var styles = props.styles;
-  return _ref6 = sstyled(styles), /*#__PURE__*/React.createElement(SDropZone, _ref6.cn("SDropZone", _objectSpread({}, _assignProps3({
-    "noDrag": true,
-    "isDropZone": true,
-    "aria-describedby": null
-  }, _ref3))));
-};
-var DragAndDrop = createComponent(DragAndDropRoot, {
-  Draggable: Draggable,
-  DropZone: DropZone,
-  Dropable: DropZone
-});
-export default DragAndDrop;
-//# sourceMappingURL=DragAndDrop.js.map