intergalactic 15.122.0-prerelease.0 → 15.123.0

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

@@ -0,0 +1,661 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import _defineProperty from "@babel/runtime/helpers/esm/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_1g7mg_gg_.__draggable_1g7mg_gg_{position:relative;cursor:grab;-moz-user-select:none;-webkit-user-select:none;user-select:none}.___SDraggable_1g7mg_gg_.__draggable_1g7mg_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_1g7mg_gg_.__draggable_1g7mg_gg_:hover::before{display:block}}.___SDraggable_1g7mg_gg_.__draggable_1g7mg_gg_.__hideHoverEffect_1g7mg_gg_:not(._role_menuitemcheckbox_1g7mg_gg_)::before{display:none}.___SDraggable_1g7mg_gg_._placement_right_1g7mg_gg_::before{right:0}.___SDraggable_1g7mg_gg_._placement_bottom_1g7mg_gg_::before{bottom:0}.___SDraggable_1g7mg_gg_._placement_left_1g7mg_gg_::before{left:0}.___SDraggable_1g7mg_gg_._placement_top_1g7mg_gg_::before{top:0;left:0;width:100%;height:16px}.___SDraggable_1g7mg_gg_._placement_bottom_1g7mg_gg_::before{left:0;width:100%;height:16px}.___SDraggable_1g7mg_gg_._placement_left_1g7mg_gg_::before,.___SDraggable_1g7mg_gg_._placement_right_1g7mg_gg_::before{top:0;width:16px;height:100%}.___SDropZone_1g7mg_gg_{position:relative}.___SDraggable_1g7mg_gg_.__dropPreview_1g7mg_gg_,.___SDropZone_1g7mg_gg_.__dropPreview_1g7mg_gg_{background-color:var(--intergalactic-bg-secondary-neutral, #f4f5f9)}.___SDraggable_1g7mg_gg_.__dark_1g7mg_gg_.__dropPreview_1g7mg_gg_,.___SDropZone_1g7mg_gg_.__dark_1g7mg_gg_.__dropPreview_1g7mg_gg_{background-color:var(--intergalactic-bg-primary-invert-active, #484a54)}.___SDraggable_1g7mg_gg_:focus{outline:0}.___SDraggable_1g7mg_gg_.__keyboardFocused_1g7mg_gg_:focus{box-shadow:none}.___SDraggable_1g7mg_gg_.__keyboardFocused_1g7mg_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_1g7mg_gg_.__keyboardDragging_1g7mg_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_1g7mg_gg_.__keyboardDragging_1g7mg_gg_.__hideHoverEffect_1g7mg_gg_::before,.___SDraggable_1g7mg_gg_.__keyboardDragging_1g7mg_gg_::before{display:block}.___SDraggable_1g7mg_gg_.__keyboardDragging_1g7mg_gg_.__reversedScaling_1g7mg_gg_{scale:.95}.___SDraggable_1g7mg_gg_.__animatedScaling_1g7mg_gg_{transition:all calc(var(--intergalactic-duration-extra-fast, 100)*1ms) ease-in-out}.___SA11yHint_1g7mg_gg_{position:absolute;margin-top:-1px;height:1px;width:1px;clip:rect(0 0 0 0)}@media (prefers-reduced-motion:reduce){.___SDraggable_1g7mg_gg_{transition:none}}" /*__inner_css_end__*/, "1g7mg_gg_") /*__reshadow_css_end__*/, {
+  "__SDraggable": "___SDraggable_1g7mg_gg_",
+  "_placement_top": "_placement_top_1g7mg_gg_",
+  "_placement_right": "_placement_right_1g7mg_gg_",
+  "_placement_left": "_placement_left_1g7mg_gg_",
+  "_placement_bottom": "_placement_bottom_1g7mg_gg_",
+  "__SDropZone": "___SDropZone_1g7mg_gg_",
+  "_dropPreview": "__dropPreview_1g7mg_gg_",
+  "_dark": "__dark_1g7mg_gg_",
+  "_keyboardFocused": "__keyboardFocused_1g7mg_gg_",
+  "_keyboardDragging": "__keyboardDragging_1g7mg_gg_",
+  "_reversedScaling": "__reversedScaling_1g7mg_gg_",
+  "_animatedScaling": "__animatedScaling_1g7mg_gg_",
+  "__SA11yHint": "___SA11yHint_1g7mg_gg_",
+  "_draggable": "__draggable_1g7mg_gg_",
+  "_hideHoverEffect": "__hideHoverEffect_1g7mg_gg_",
+  "_role_menuitemcheckbox": "_role_menuitemcheckbox_1g7mg_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.mjs.map