@eightshift/ui-components 5.0.10 → 5.1.1

package/dist/{Collection-uTAXq9Br.js → Collection-BRJOMbOa.js}

@@ -2388,11 +2388,16 @@ export {
   $ae20dd8cbca75726$export$d6daf82dcd84e87c as i,
   $7135fc7d473fd974$export$a164736487e3f0ae as j,
   $7135fc7d473fd974$export$90e00781bc59d8f9 as k,
-  $cc38e7bd3fc7b213$export$2bb74740c4e19def as l,
-  $feb5ffebff200149$export$c3d8340acf92597f as m,
-  $c5a24bc478652b5f$export$1005530eda016c13 as n,
-  $fb3050f43d946246$export$e32c88dfddc6e1d8 as o,
-  $55f9b1ae81f22853$export$2b35b76d2e30e129 as p,
-  $8a26561d2877236e$export$c24ed0104d07eab9 as q,
-  $e1995378a142960e$export$e953bb1cd0f19726 as r
+  $fb3050f43d946246$export$e32c88dfddc6e1d8 as l,
+  $c5a24bc478652b5f$export$1005530eda016c13 as m,
+  $55f9b1ae81f22853$export$2b35b76d2e30e129 as n,
+  $cc38e7bd3fc7b213$export$2bb74740c4e19def as o,
+  $feb5ffebff200149$export$c3d8340acf92597f as p,
+  $5671b20cf9b562b2$export$831c820ad60f9d12 as q,
+  $55f9b1ae81f22853$export$76e4e37e5339496d as r,
+  $5671b20cf9b562b2$export$447a38995de2c711 as s,
+  $55f9b1ae81f22853$export$6c5dc7e81d2cc29a as t,
+  $21f1aa98acb08317$export$16792effe837dba3 as u,
+  $8a26561d2877236e$export$c24ed0104d07eab9 as v,
+  $e1995378a142960e$export$e953bb1cd0f19726 as w
 };

package/dist/{Dialog-CmAxaSUv.js → Dialog-D6EdDPeu.js}

@@ -2,8 +2,8 @@ import { a as $d2b4bc8c273e7be6$export$24d547caef80ccd1 } from "./Button-DH22t_S
 import { l as $df56164dff5785e2$export$4338b53315abf666, d as $3ef42575df84b30b$export$9d1611c77c2fe928, f as $8ae05eaa5c114e9c$export$7f54fc3180508a52, e as $bdb11010cef70236$export$f680877a34711e37, k as $f0a04ccd8dbdd83b$export$e5c5a5f917a5871c, p as $ff5963eb1fccf552$export$e08e3b67e392101e, n as $b5e257d569688ac6$export$535bd6ca7f90a273, j as $bdb11010cef70236$export$b4cc09c592e8fdb8, a as $64fa3d84918910a7$export$29f1550f4b0d4415, b as $64fa3d84918910a7$export$4d86445c2cf5e3, i as $64fa3d84918910a7$export$2881499e37b75b9a, $ as $64fa3d84918910a7$export$fabf2dc03a41866e, o as $64fa3d84918910a7$export$c62b8e45d58ddad9, m as $5dc95899b306f630$export$c9058316764c140e, g as $64fa3d84918910a7$export$9d4c57ee4c6ffdd8 } from "./utils-CZt7LCbO.js";
 import { $ as $4e85f108e88277b8$export$d688439359537581 } from "./RSPContexts-2lR5GG9p.js";
 import { g as $dd149f63282afbbf$export$f6211563215e3b37, c as $2a41e45df1593e64$export$d39e1813b3bdd0e1, f as $9daab02d461809db$export$683480f191c0e3ea, $ as $fc909762b330b746$export$61c6a8c84e605fb6, a as $d3f049242431219c$export$45fda7c47f93fd48, b as $d3f049242431219c$export$6d3443f2c48bfc20, d as $44f671af83e7d9e0$export$2de4954e8ae13b9f } from "./OverlayArrow-BUfV-5P3.js";
-import { q as $8a26561d2877236e$export$c24ed0104d07eab9, c as $880e95eb8b93ba9a$export$ecf600387e221c37, $ as $7af3f5b51489e0b5$export$253fe78d46329472, a as $7613b1592d41b092$export$6cd28814d92fa9c9, b as $d496c0a20b6e58ec$export$6c8a5aaad13c9852, d as $e1995378a142960e$export$18af5c7a9e9b3664, r as $e1995378a142960e$export$e953bb1cd0f19726, e as $e1995378a142960e$export$bf788dd355e3a401, f as $e1995378a142960e$export$fb8073518f34e6ec, g as $7135fc7d473fd974$export$4feb769f8ddf26c5, h as $7135fc7d473fd974$export$d40e14dec8b060a8, k as $7135fc7d473fd974$export$90e00781bc59d8f9 } from "./Collection-uTAXq9Br.js";
-import { b as $62d8ded9296f3872$export$cfa2225e87938781, c as $982254629710d113$export$b95089534ab7c1fd, d as $453cc9f0df89c0a5$export$77d5aafae4e095b2, e as $d2f53cda644affe3$export$65d2a03b8800d6e3, h as $431f98aba6844401$export$6615d83f6de245ce, i as $72a5793c14baf454$export$e0e4026c12a8bdbb } from "./Separator-BN3mjL6q.js";
+import { v as $8a26561d2877236e$export$c24ed0104d07eab9, c as $880e95eb8b93ba9a$export$ecf600387e221c37, $ as $7af3f5b51489e0b5$export$253fe78d46329472, a as $7613b1592d41b092$export$6cd28814d92fa9c9, b as $d496c0a20b6e58ec$export$6c8a5aaad13c9852, d as $e1995378a142960e$export$18af5c7a9e9b3664, w as $e1995378a142960e$export$e953bb1cd0f19726, e as $e1995378a142960e$export$bf788dd355e3a401, f as $e1995378a142960e$export$fb8073518f34e6ec, g as $7135fc7d473fd974$export$4feb769f8ddf26c5, h as $7135fc7d473fd974$export$d40e14dec8b060a8, k as $7135fc7d473fd974$export$90e00781bc59d8f9 } from "./Collection-BRJOMbOa.js";
+import { e as $62d8ded9296f3872$export$cfa2225e87938781, f as $982254629710d113$export$b95089534ab7c1fd, g as $453cc9f0df89c0a5$export$77d5aafae4e095b2, h as $d2f53cda644affe3$export$65d2a03b8800d6e3, j as $431f98aba6844401$export$6615d83f6de245ce, k as $72a5793c14baf454$export$e0e4026c12a8bdbb } from "./Separator-CTQWg_HO.js";
 import React__default, { useRef, useContext, useEffect, useMemo, useState, useCallback, forwardRef, createContext } from "react";
 import { a as $514c0188e459b4c0$export$9afb8bc826b033ea } from "./Text-BuJgePCv.js";
 import { $ as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "./filterDOMProps-EDDcM64A.js";
@@ -2298,12 +2298,12 @@ const $de32f1b87079253c$export$3ddf2d174ce01153 = /* @__PURE__ */ forwardRef(fun
   }, renderProps.children));
 });
 export {
-  $07b14b47974efb58$export$5b6b19405a83ff9d as $,
-  $3674c52c6b3c5bce$export$27d2ad3c5815583e as a,
-  $3674c52c6b3c5bce$export$d9b273488cd8ce6f as b,
-  $3674c52c6b3c5bce$export$2ce376c2cc3355c8 as c,
-  $3674c52c6b3c5bce$export$4b1545b4f2016d26 as d,
-  $3674c52c6b3c5bce$export$ecabc99eeffab7ca as e,
+  $3674c52c6b3c5bce$export$27d2ad3c5815583e as $,
+  $3674c52c6b3c5bce$export$d9b273488cd8ce6f as a,
+  $3674c52c6b3c5bce$export$2ce376c2cc3355c8 as b,
+  $3674c52c6b3c5bce$export$4b1545b4f2016d26 as c,
+  $3674c52c6b3c5bce$export$ecabc99eeffab7ca as d,
+  $07b14b47974efb58$export$5b6b19405a83ff9d as e,
   $de32f1b87079253c$export$3ddf2d174ce01153 as f,
   $de32f1b87079253c$export$2e1e1122cf0cba88 as g,
   $a11501f3d1d39e6c$export$ea8f71083e90600f as h,

package/dist/{useFormValidation-Dy0PXJg5.js → Form-Bnyyv3Im.js}

@@ -216,9 +216,11 @@ function $e93e671b31057976$var$getFirstInvalidInput(form) {
   }
   return null;
 }
+const $d3e0e05bdfcf66bd$export$c24727297075ec6a = /* @__PURE__ */ createContext(null);
 export {
-  $e5be200c675c3b3a$export$fc1a364ae1f3ff10 as $,
-  $e93e671b31057976$export$b8473d3665f3a75a as a,
-  $e5be200c675c3b3a$export$a763b9476acd3eb as b,
-  $e5be200c675c3b3a$export$dad6ae84456c676a as c
+  $d3e0e05bdfcf66bd$export$c24727297075ec6a as $,
+  $e5be200c675c3b3a$export$fc1a364ae1f3ff10 as a,
+  $e93e671b31057976$export$b8473d3665f3a75a as b,
+  $e5be200c675c3b3a$export$a763b9476acd3eb as c,
+  $e5be200c675c3b3a$export$dad6ae84456c676a as d
 };

package/dist/{Group-DDPhPPTQ.js → Group-LBogWgyp.js}

@@ -43,6 +43,6 @@ const $a049562f99e7db0e$export$eb2fcfdbd7ba97d4 = /* @__PURE__ */ forwardRef(fun
   }, renderProps.children);
 });
 export {
-  $a049562f99e7db0e$export$eb2fcfdbd7ba97d4 as $,
-  $a049562f99e7db0e$export$f9c6924e160136d1 as a
+  $a049562f99e7db0e$export$f9c6924e160136d1 as $,
+  $a049562f99e7db0e$export$eb2fcfdbd7ba97d4 as a
 };

package/dist/{Input-BmDS8Juy.js → Input-DfSBLhDx.js}

@@ -4,7 +4,7 @@ import { $ as $65484d02dcb7eb3e$export$457c3d6518dd4c6f } from "./filterDOMProps
 import { $ as $99facab73266f662$export$5add1d006293d136 } from "./useFormReset-D2YaWRIA.js";
 import React__default, { useEffect, createContext } from "react";
 import { a as $2baaea4c71418dea$export$294aa081a6c6f55d } from "./FieldError-DHrSdE_Q.js";
-import { $ as $e5be200c675c3b3a$export$fc1a364ae1f3ff10, a as $e93e671b31057976$export$b8473d3665f3a75a } from "./useFormValidation-Dy0PXJg5.js";
+import { a as $e5be200c675c3b3a$export$fc1a364ae1f3ff10, b as $e93e671b31057976$export$b8473d3665f3a75a } from "./Form-Bnyyv3Im.js";
 import { $ as $f39a9eba43920ace$export$86427a43e3e48ebb } from "./Hidden-rE6uR-lr.js";
 import { $ as $f7dceffc5ad7768b$export$4e328f61c538687f } from "./useFocusRing-Bv0UJQl8.js";
 function $2d73ec29415bd339$export$712718f7aec83d5(props, ref) {

package/dist/List-BLeHBkfx.js

@@ -0,0 +1,590 @@
+import * as React from "react";
+import { r as reactDomExports } from "./index-CFozsmNS.js";
+function arrayMove(array, from, to) {
+  array = array.slice();
+  array.splice(to < 0 ? array.length + to : to, 0, array.splice(from, 1)[0]);
+  return array;
+}
+function arrayRemove(array, index) {
+  array = array.slice();
+  array.splice(index, 1);
+  return array;
+}
+function getTranslateOffset(element) {
+  const style = window.getComputedStyle(element);
+  return Math.max(parseInt(style["margin-top"], 10), parseInt(style["margin-bottom"], 10)) + element.getBoundingClientRect().height;
+}
+function isTouchEvent(event) {
+  return event.touches && event.touches.length || event.changedTouches && event.changedTouches.length;
+}
+function transformItem(element, offsetY = 0, offsetX = 0) {
+  if (!element)
+    return;
+  if (offsetY === null || offsetX === null) {
+    element.style.removeProperty("transform");
+    return;
+  }
+  element.style.transform = `translate(${offsetX}px, ${offsetY}px)`;
+}
+function setItemTransition(element, duration, timing) {
+  if (element) {
+    element.style["transition"] = `transform ${duration}ms${timing ? ` ${timing}` : ""}`;
+  }
+}
+function binarySearch(array, targetValue) {
+  let min = 0;
+  let max = array.length - 1;
+  let guess;
+  while (min <= max) {
+    guess = Math.floor((max + min) / 2);
+    if (!array[guess + 1] || array[guess] <= targetValue && array[guess + 1] >= targetValue) {
+      return guess;
+    } else if (array[guess] < targetValue && array[guess + 1] < targetValue) {
+      min = guess + 1;
+    } else {
+      max = guess - 1;
+    }
+  }
+  return -1;
+}
+const schd = (fn) => {
+  let lastArgs = [];
+  let frameId = null;
+  const wrapperFn = (...args) => {
+    lastArgs = args;
+    if (frameId) {
+      return;
+    }
+    frameId = requestAnimationFrame(() => {
+      frameId = null;
+      fn(...lastArgs);
+    });
+  };
+  wrapperFn.cancel = () => {
+    if (frameId) {
+      cancelAnimationFrame(frameId);
+    }
+  };
+  return wrapperFn;
+};
+function checkIfInteractive(target, rootElement) {
+  const DISABLED_ELEMENTS = [
+    "input",
+    "textarea",
+    "select",
+    "option",
+    "optgroup",
+    "video",
+    "audio",
+    "button",
+    "a"
+  ];
+  const DISABLED_ROLES = [
+    "button",
+    "link",
+    "checkbox",
+    "radio",
+    "switch",
+    "tab"
+  ];
+  if (!target || !rootElement)
+    return false;
+  while (target !== rootElement) {
+    if (target.getAttribute("data-movable-handle")) {
+      return false;
+    }
+    if (DISABLED_ELEMENTS.includes(target.tagName.toLowerCase())) {
+      return true;
+    }
+    const role = target.getAttribute("role");
+    if (role && DISABLED_ROLES.includes(role.toLowerCase())) {
+      return true;
+    }
+    if (target.tagName.toLowerCase() === "label" && target.hasAttribute("for")) {
+      return true;
+    }
+    if (target.tagName)
+      target = target.parentElement;
+  }
+  return false;
+}
+const AUTOSCROLL_ACTIVE_OFFSET = 200;
+const AUTOSCROLL_SPEED_RATIO = 10;
+const AUTOSCROLL_DELTA_THRESHOLD = 10;
+class List extends React.Component {
+  listRef = React.createRef();
+  ghostRef = React.createRef();
+  topOffsets = [];
+  itemTranslateOffsets = [];
+  initialYOffset = 0;
+  lastScroll = 0;
+  lastYOffset = 0;
+  lastListYOffset = 0;
+  dropTimeout;
+  needle = -1;
+  afterIndex = -2;
+  state = {
+    itemDragged: -1,
+    itemDraggedOutOfBounds: -1,
+    selectedItem: -1,
+    initialX: 0,
+    initialY: 0,
+    targetX: 0,
+    targetY: 0,
+    targetHeight: 0,
+    targetWidth: 0,
+    liveText: "",
+    scrollingSpeed: 0,
+    scrollWindow: false
+  };
+  schdOnMouseMove;
+  schdOnTouchMove;
+  schdOnEnd;
+  constructor(props) {
+    super(props);
+    this.schdOnMouseMove = schd(this.onMouseMove);
+    this.schdOnTouchMove = schd(this.onTouchMove);
+    this.schdOnEnd = schd(this.onEnd);
+  }
+  componentDidMount() {
+    this.calculateOffsets();
+    document.addEventListener("touchstart", this.onMouseOrTouchStart, {
+      passive: false,
+      capture: false
+    });
+    document.addEventListener("mousedown", this.onMouseOrTouchStart);
+  }
+  componentDidUpdate(_prevProps, prevState) {
+    if (prevState.scrollingSpeed !== this.state.scrollingSpeed && prevState.scrollingSpeed === 0) {
+      this.doScrolling();
+    }
+  }
+  componentWillUnmount() {
+    document.removeEventListener("touchstart", this.onMouseOrTouchStart);
+    document.removeEventListener("mousedown", this.onMouseOrTouchStart);
+    if (this.dropTimeout) {
+      window.clearTimeout(this.dropTimeout);
+    }
+    this.schdOnMouseMove.cancel();
+    this.schdOnTouchMove.cancel();
+    this.schdOnEnd.cancel();
+  }
+  doScrolling = () => {
+    const { scrollingSpeed, scrollWindow } = this.state;
+    const listEl = this.listRef.current;
+    window.requestAnimationFrame(() => {
+      if (scrollWindow) {
+        window.scrollTo(window.pageXOffset, window.pageYOffset + scrollingSpeed * 1.5);
+      } else {
+        listEl.scrollTop += scrollingSpeed;
+      }
+      if (scrollingSpeed !== 0) {
+        this.doScrolling();
+      }
+    });
+  };
+  getChildren = () => {
+    if (this.listRef && this.listRef.current) {
+      return Array.from(this.listRef.current.children);
+    }
+    console.warn("No items found in the List container. Did you forget to pass & spread the `props` param in renderList?");
+    return [];
+  };
+  static defaultProps = {
+    transitionDuration: 300,
+    lockVertically: false,
+    removableByMove: false,
+    voiceover: {
+      item: (position) => `You are currently at a draggable item at position ${position}. Press space bar to lift.`,
+      lifted: (position) => `You have lifted item at position ${position}. Press j to move down, k to move up, space bar to drop and escape to cancel.`,
+      moved: (position, up) => `You have moved the lifted item ${up ? "up" : "down"} to position ${position}. Press j to move down, k to move up, space bar to drop and escape to cancel.`,
+      dropped: (from, to) => `You have dropped the item. It has moved from position ${from} to ${to}.`,
+      canceled: (position) => `You have cancelled the movement. The item has returned to its starting position of ${position}.`
+    }
+  };
+  calculateOffsets = () => {
+    this.topOffsets = this.getChildren().map((item) => item.getBoundingClientRect().top);
+    this.itemTranslateOffsets = this.getChildren().map((item) => getTranslateOffset(item));
+  };
+  getTargetIndex = (e) => {
+    return this.getChildren().findIndex((child) => child === e.target || child.contains(e.target));
+  };
+  onMouseOrTouchStart = (e) => {
+    if (this.dropTimeout && this.state.itemDragged > -1) {
+      window.clearTimeout(this.dropTimeout);
+      this.finishDrop();
+    }
+    const isTouch = isTouchEvent(e);
+    if (!isTouch && e.button !== 0)
+      return;
+    const index = this.getTargetIndex(e);
+    if (index === -1 || this.props.disabled || // @ts-ignore
+    this.props.values[index] && this.props.values[index].disabled) {
+      if (this.state.selectedItem !== -1) {
+        this.setState({ selectedItem: -1 });
+        this.finishDrop();
+      }
+      return;
+    }
+    const listItemTouched = this.getChildren()[index];
+    const handle = listItemTouched.querySelector("[data-movable-handle]");
+    if (handle && !handle.contains(e.target)) {
+      return;
+    }
+    if (checkIfInteractive(e.target, listItemTouched)) {
+      return;
+    }
+    e.preventDefault();
+    this.props.beforeDrag && this.props.beforeDrag({
+      elements: this.getChildren(),
+      index
+    });
+    if (isTouch) {
+      const opts = { passive: false };
+      listItemTouched.style.touchAction = "none";
+      document.addEventListener("touchend", this.schdOnEnd, opts);
+      document.addEventListener("touchmove", this.schdOnTouchMove, opts);
+      document.addEventListener("touchcancel", this.schdOnEnd, opts);
+    } else {
+      document.addEventListener("mousemove", this.schdOnMouseMove);
+      document.addEventListener("mouseup", this.schdOnEnd);
+      const listItemDragged = this.getChildren()[this.state.itemDragged];
+      if (listItemDragged && listItemDragged.style) {
+        listItemDragged.style.touchAction = "";
+      }
+    }
+    this.onStart(listItemTouched, isTouch ? e.touches[0].clientX : e.clientX, isTouch ? e.touches[0].clientY : e.clientY, index);
+  };
+  getYOffset = () => {
+    const listScroll = this.listRef.current ? this.listRef.current.scrollTop : 0;
+    return window.pageYOffset + listScroll;
+  };
+  onStart = (target, clientX, clientY, index) => {
+    if (this.state.selectedItem > -1) {
+      this.setState({ selectedItem: -1 });
+      this.needle = -1;
+    }
+    const targetRect = target.getBoundingClientRect();
+    const targetStyles = window.getComputedStyle(target);
+    this.calculateOffsets();
+    this.initialYOffset = this.getYOffset();
+    this.lastYOffset = window.pageYOffset;
+    this.lastListYOffset = this.listRef.current.scrollTop;
+    this.setState({
+      itemDragged: index,
+      targetX: targetRect.left - parseInt(targetStyles["margin-left"], 10),
+      targetY: targetRect.top - parseInt(targetStyles["margin-top"], 10),
+      targetHeight: targetRect.height,
+      targetWidth: targetRect.width,
+      initialX: clientX,
+      initialY: clientY
+    });
+  };
+  onMouseMove = (e) => {
+    e.cancelable && e.preventDefault();
+    this.onMove(e.clientX, e.clientY);
+  };
+  onTouchMove = (e) => {
+    e.cancelable && e.preventDefault();
+    this.onMove(e.touches[0].clientX, e.touches[0].clientY);
+  };
+  onWheel = (e) => {
+    if (this.state.itemDragged < 0)
+      return;
+    this.lastScroll = this.listRef.current.scrollTop += e.deltaY;
+    this.moveOtherItems();
+  };
+  onMove = (clientX, clientY) => {
+    if (this.state.itemDragged === -1)
+      return null;
+    transformItem(this.ghostRef.current, clientY - this.state.initialY, this.props.lockVertically ? 0 : clientX - this.state.initialX);
+    this.autoScrolling(clientY, clientY - this.state.initialY);
+    this.moveOtherItems();
+  };
+  moveOtherItems = () => {
+    const targetRect = this.ghostRef.current.getBoundingClientRect();
+    const itemVerticalCenter = targetRect.top + targetRect.height / 2;
+    const offset = getTranslateOffset(this.getChildren()[this.state.itemDragged]);
+    const currentYOffset = this.getYOffset();
+    if (this.initialYOffset !== currentYOffset) {
+      this.topOffsets = this.topOffsets.map((offset2) => offset2 - (currentYOffset - this.initialYOffset));
+      this.initialYOffset = currentYOffset;
+    }
+    if (this.isDraggedItemOutOfBounds() && this.props.removableByMove) {
+      this.afterIndex = this.topOffsets.length + 1;
+    } else {
+      this.afterIndex = binarySearch(this.topOffsets, itemVerticalCenter);
+    }
+    this.animateItems(this.afterIndex === -1 ? 0 : this.afterIndex, this.state.itemDragged, offset);
+  };
+  autoScrolling = (clientY, delta) => {
+    const { top, bottom, height } = this.listRef.current.getBoundingClientRect();
+    const viewportHeight = window.innerHeight || document.documentElement.clientHeight;
+    if (bottom > viewportHeight && viewportHeight - clientY < AUTOSCROLL_ACTIVE_OFFSET && delta > AUTOSCROLL_DELTA_THRESHOLD) {
+      this.setState({
+        scrollingSpeed: Math.min(Math.round((AUTOSCROLL_ACTIVE_OFFSET - (viewportHeight - clientY)) / AUTOSCROLL_SPEED_RATIO), Math.round((delta - AUTOSCROLL_DELTA_THRESHOLD) / AUTOSCROLL_SPEED_RATIO)),
+        scrollWindow: true
+      });
+    } else if (top < 0 && clientY < AUTOSCROLL_ACTIVE_OFFSET && delta < -10) {
+      this.setState({
+        scrollingSpeed: Math.max(Math.round((AUTOSCROLL_ACTIVE_OFFSET - clientY) / -10), Math.round((delta + AUTOSCROLL_DELTA_THRESHOLD) / AUTOSCROLL_SPEED_RATIO)),
+        scrollWindow: true
+      });
+    } else {
+      if (this.state.scrollWindow && this.state.scrollingSpeed !== 0) {
+        this.setState({ scrollingSpeed: 0, scrollWindow: false });
+      }
+      if (height + 20 < this.listRef.current.scrollHeight) {
+        let scrollingSpeed = 0;
+        if (clientY - top < AUTOSCROLL_ACTIVE_OFFSET && delta < -10) {
+          scrollingSpeed = Math.max(Math.round((AUTOSCROLL_ACTIVE_OFFSET - (clientY - top)) / -10), Math.round((delta + AUTOSCROLL_DELTA_THRESHOLD) / AUTOSCROLL_SPEED_RATIO));
+        } else if (bottom - clientY < AUTOSCROLL_ACTIVE_OFFSET && delta > AUTOSCROLL_DELTA_THRESHOLD) {
+          scrollingSpeed = Math.min(Math.round((AUTOSCROLL_ACTIVE_OFFSET - (bottom - clientY)) / AUTOSCROLL_SPEED_RATIO), Math.round((delta - AUTOSCROLL_DELTA_THRESHOLD) / AUTOSCROLL_SPEED_RATIO));
+        }
+        if (this.state.scrollingSpeed !== scrollingSpeed) {
+          this.setState({ scrollingSpeed });
+        }
+      }
+    }
+  };
+  animateItems = (needle, movedItem, offset, animateMovedItem = false) => {
+    this.getChildren().forEach((item, i) => {
+      setItemTransition(item, this.props.transitionDuration);
+      if (movedItem === i && animateMovedItem) {
+        if (movedItem === needle) {
+          return transformItem(item, null);
+        }
+        transformItem(item, movedItem < needle ? this.itemTranslateOffsets.slice(movedItem + 1, needle + 1).reduce((a, b) => a + b, 0) : this.itemTranslateOffsets.slice(needle, movedItem).reduce((a, b) => a + b, 0) * -1);
+      } else if (movedItem < needle && i > movedItem && i <= needle) {
+        transformItem(item, -offset);
+      } else if (i < movedItem && movedItem > needle && i >= needle) {
+        transformItem(item, offset);
+      } else {
+        transformItem(item, null);
+      }
+    });
+  };
+  isDraggedItemOutOfBounds = () => {
+    const initialRect = this.getChildren()[this.state.itemDragged].getBoundingClientRect();
+    const targetRect = this.ghostRef.current.getBoundingClientRect();
+    if (Math.abs(initialRect.left - targetRect.left) > targetRect.width) {
+      if (this.state.itemDraggedOutOfBounds === -1) {
+        this.setState({ itemDraggedOutOfBounds: this.state.itemDragged });
+      }
+      return true;
+    }
+    if (this.state.itemDraggedOutOfBounds > -1) {
+      this.setState({ itemDraggedOutOfBounds: -1 });
+    }
+    return false;
+  };
+  onEnd = (e) => {
+    e.cancelable && e.preventDefault();
+    document.removeEventListener("mousemove", this.schdOnMouseMove);
+    document.removeEventListener("touchmove", this.schdOnTouchMove);
+    document.removeEventListener("mouseup", this.schdOnEnd);
+    document.removeEventListener("touchup", this.schdOnEnd);
+    document.removeEventListener("touchcancel", this.schdOnEnd);
+    const removeItem = this.props.removableByMove && this.isDraggedItemOutOfBounds();
+    if (!removeItem && this.props.transitionDuration > 0 && this.afterIndex !== -2) {
+      schd(() => {
+        setItemTransition(this.ghostRef.current, this.props.transitionDuration, "cubic-bezier(.2,1,.1,1)");
+        if (this.afterIndex < 1 && this.state.itemDragged === 0) {
+          transformItem(this.ghostRef.current, 0, 0);
+        } else {
+          transformItem(
+            this.ghostRef.current,
+            // compensate window scroll
+            -(window.pageYOffset - this.lastYOffset) + // compensate container scroll
+            -(this.listRef.current.scrollTop - this.lastListYOffset) + (this.state.itemDragged < this.afterIndex ? this.itemTranslateOffsets.slice(this.state.itemDragged + 1, this.afterIndex + 1).reduce((a, b) => a + b, 0) : this.itemTranslateOffsets.slice(this.afterIndex < 0 ? 0 : this.afterIndex, this.state.itemDragged).reduce((a, b) => a + b, 0) * -1),
+            0
+          );
+        }
+      })();
+    }
+    this.dropTimeout = window.setTimeout(this.finishDrop, removeItem || this.afterIndex === -2 ? 0 : this.props.transitionDuration);
+  };
+  finishDrop = () => {
+    const removeItem = this.props.removableByMove && this.isDraggedItemOutOfBounds();
+    const oldIndex = this.state.itemDragged;
+    const hasChanged = this.afterIndex > -2 && oldIndex !== this.afterIndex;
+    const newIndex = hasChanged ? removeItem ? -1 : Math.max(this.afterIndex, 0) : oldIndex;
+    if (removeItem || hasChanged) {
+      this.props.onChange({
+        oldIndex,
+        newIndex,
+        targetRect: this.ghostRef.current.getBoundingClientRect()
+      });
+    }
+    this.props.afterDrag && this.props.afterDrag({
+      elements: this.getChildren(),
+      oldIndex,
+      newIndex
+    });
+    this.getChildren().forEach((item) => {
+      setItemTransition(item, 0);
+      transformItem(item, null);
+      item.style.touchAction = "";
+    });
+    this.setState({ itemDragged: -1, scrollingSpeed: 0 });
+    this.afterIndex = -2;
+    if (this.lastScroll > 0) {
+      this.listRef.current.scrollTop = this.lastScroll;
+      this.lastScroll = 0;
+    }
+  };
+  onKeyDown = (e) => {
+    const selectedItem = this.state.selectedItem;
+    const index = this.getTargetIndex(e);
+    if (checkIfInteractive(e.target, e.currentTarget)) {
+      return;
+    }
+    if (index === -1)
+      return;
+    if (e.key === " ") {
+      e.preventDefault();
+      if (selectedItem === index) {
+        if (selectedItem !== this.needle) {
+          this.getChildren().forEach((item) => {
+            setItemTransition(item, 0);
+            transformItem(item, null);
+          });
+          this.props.onChange({
+            oldIndex: selectedItem,
+            newIndex: this.needle,
+            targetRect: this.getChildren()[this.needle].getBoundingClientRect()
+          });
+          this.getChildren()[this.needle].focus();
+        }
+        this.setState({
+          selectedItem: -1,
+          liveText: this.props.voiceover.dropped(selectedItem + 1, this.needle + 1)
+        });
+        this.needle = -1;
+      } else {
+        this.setState({
+          selectedItem: index,
+          liveText: this.props.voiceover.lifted(index + 1)
+        });
+        this.needle = index;
+        this.calculateOffsets();
+      }
+    }
+    if ((e.key === "ArrowDown" || e.key === "j") && selectedItem > -1 && this.needle < this.props.values.length - 1) {
+      e.preventDefault();
+      const offset = getTranslateOffset(this.getChildren()[selectedItem]);
+      this.needle++;
+      this.animateItems(this.needle, selectedItem, offset, true);
+      this.setState({
+        liveText: this.props.voiceover.moved(this.needle + 1, false)
+      });
+    }
+    if ((e.key === "ArrowUp" || e.key === "k") && selectedItem > -1 && this.needle > 0) {
+      e.preventDefault();
+      const offset = getTranslateOffset(this.getChildren()[selectedItem]);
+      this.needle--;
+      this.animateItems(this.needle, selectedItem, offset, true);
+      this.setState({
+        liveText: this.props.voiceover.moved(this.needle + 1, true)
+      });
+    }
+    if (e.key === "Escape" && selectedItem > -1) {
+      this.getChildren().forEach((item) => {
+        setItemTransition(item, 0);
+        transformItem(item, null);
+      });
+      this.setState({
+        selectedItem: -1,
+        liveText: this.props.voiceover.canceled(selectedItem + 1)
+      });
+      this.needle = -1;
+    }
+    if ((e.key === "Tab" || e.key === "Enter") && selectedItem > -1) {
+      e.preventDefault();
+    }
+  };
+  render() {
+    const baseStyle = {
+      userSelect: "none",
+      WebkitUserSelect: "none",
+      MozUserSelect: "none",
+      msUserSelect: "none",
+      boxSizing: "border-box",
+      position: "relative"
+    };
+    const ghostStyle = {
+      ...baseStyle,
+      top: this.state.targetY,
+      left: this.state.targetX,
+      width: this.state.targetWidth,
+      height: this.state.targetHeight,
+      position: "fixed",
+      marginTop: 0
+    };
+    return React.createElement(
+      React.Fragment,
+      null,
+      this.props.renderList({
+        children: this.props.values.map((value, index) => {
+          const isHidden = index === this.state.itemDragged;
+          const isSelected = index === this.state.selectedItem;
+          const isDisabled = Boolean(this.props.disabled || this.props.values[index] && typeof this.props.values[index] === "object" && // @ts-expect-error value doesn't necessarily have a `disabled` property
+          this.props.values[index].disabled);
+          const props = {
+            key: index,
+            tabIndex: isDisabled ? -1 : 0,
+            "aria-roledescription": this.props.voiceover.item(index + 1),
+            onKeyDown: this.onKeyDown,
+            style: {
+              ...baseStyle,
+              visibility: isHidden ? "hidden" : void 0,
+              zIndex: isSelected ? 5e3 : 0
+            }
+          };
+          return this.props.renderItem({
+            value,
+            props,
+            index,
+            isDragged: false,
+            isSelected,
+            isOutOfBounds: false,
+            isDisabled
+          });
+        }),
+        isDragged: this.state.itemDragged > -1,
+        props: {
+          ref: this.listRef
+        }
+      }),
+      this.state.itemDragged > -1 && reactDomExports.createPortal(this.props.renderItem({
+        value: this.props.values[this.state.itemDragged],
+        props: {
+          ref: this.ghostRef,
+          style: ghostStyle,
+          onWheel: this.onWheel
+        },
+        index: this.state.itemDragged,
+        isDragged: true,
+        isSelected: false,
+        isDisabled: false,
+        isOutOfBounds: this.state.itemDraggedOutOfBounds > -1
+      }), this.props.container || document.body),
+      React.createElement("div", { "aria-live": "assertive", role: "log", "aria-atomic": "true", style: {
+        position: "absolute",
+        width: "1px",
+        height: "1px",
+        margin: "-1px",
+        border: "0px",
+        padding: "0px",
+        overflow: "hidden",
+        clip: "rect(0px, 0px, 0px, 0px)",
+        clipPath: "inset(100%)"
+      } }, this.state.liveText)
+    );
+  }
+}
+export {
+  List as L,
+  arrayRemove as a,
+  arrayMove as b
+};