@progress/kendo-react-sortable 7.2.4-develop.3 → 7.3.0-develop.1

package/Sortable.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const N=require("react"),P=require("react-dom"),d=require("prop-types"),h=require("@progress/kendo-react-common"),U=require("./events/SortableOnDragStartEvent.js"),B=require("./events/SortableOnDragOverEvent.js"),F=require("./events/SortableOnDragEndEvent.js"),k=require("./events/SortableOnNavigateEvent.js"),x=require("@progress/kendo-react-intl"),y=require("./messages/index.js"),f=require("./utils/utils.js"),q=require("./package-metadata.js");function O(v){const c=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(v){for(const t in v)if(t!=="default"){const e=Object.getOwnPropertyDescriptor(v,t);Object.defineProperty(c,t,e.get?e:{enumerable:!0,get:()=>v[t]})}}return c.default=v,Object.freeze(c)}const p=O(N),K=O(P),w=200,S="data-sortable-id",A="data-sortable-component",z={[A]:!0},R=class R extends p.Component{constructor(c){super(c),this.state={clientX:0,clientY:0,isDragging:!1,activeId:"",dragCueWidth:0,dragCueHeight:0},this.isRtl=!1,this.itemRefsMap={},this.oldSizesMap={},this.animatingItemMap={},this.draggableRef=null,this.isUnmounted=!1,this.focusActiveId=!1,this.isKeyboardNavigated=!1,this.isDragPrevented=!1,this.swapItems=(t,e,s)=>{let i=t[e];return t[e]=t[s],t[s]=i,e=s,e},this.generateNewState=(t,e)=>{const{data:s}=this.props,i=[...s];if(t>e)for(let r=t-1;r>=e;r--){const o=s[r];this.isItemDisabled(o)||(t=this.swapItems(i,t,r))}else for(let r=t+1;r<=e;r++){const o=s[r];this.isItemDisabled(o)||(t=this.swapItems(i,t,r))}return i},this.closestSortableItem=t=>{let e=t;for(;e;){const s=e.getAttribute(S);if(s&&this.itemRefsMap[s]===e)return{id:s,element:e};e=e.parentElement}return{id:"",element:null}},this.isSortable=t=>!!t.hasAttribute(A),this.closestSortable=t=>{let e=t;for(;e;){if(this.isSortable(e))return e;e=e.parentElement}return null},this.isSameSortable=t=>this.closestSortable(t)===this.container,this.idComparer=(t,e)=>t+""==e+"",this.findItem=t=>{const{data:e,idField:s}=this.props;if(!(t+""))return;const i=h.getter(s);return f.find(e,n=>this.idComparer(i(n),t))},this.findIndex=t=>{const{data:e,idField:s}=this.props;return t+""?f.findIndex(e,i=>this.idComparer(i[s],t)):-1},this.isItemDisabled=t=>t&&t[this.props.disabledField||""]===!0,this.shouldResetActive=()=>{const t=h.getActiveElement(document);return t instanceof HTMLElement?!this.closestSortableItem(t).element:!1},this.widgetTarget=t=>{const e=f.closest(t,s=>f.hasClasses(s,"k-widget")||this.isSortable(s));return e&&!this.isSortable(e)},this.allowDrag=t=>t.hasAttribute(S)||!(f.isFocusable(t)||this.widgetTarget(t)),this.onDragStart=t=>{const{event:e}=t,{onDragStart:s}=this.props,i=document.elementFromPoint(e.clientX,e.clientY),{id:n,element:r}=this.closestSortableItem(i),o=this.findItem(n);if(!n||o&&this.isItemDisabled(o)||!this.allowDrag(i)||!this.isSameSortable(i)){this.isDragPrevented=!0;return}e.isTouch&&e.originalEvent.preventDefault();const a=new U.SortableOnDragStartEvent(this,this.findIndex(n),i);s&&s.call(void 0,a),this.isDragPrevented=a.isDefaultPrevented(),this.isDragPrevented?e.originalEvent.preventDefault():(this.offsetParent=f.relativeContextElement(this.container),this.setState({activeId:n,dragCueWidth:r&&r.clientWidth||0,dragCueHeight:r&&r.clientHeight||0}))},this.onDragOver=t=>{const{event:e}=t,{onDragOver:s,data:i}=this.props;if(this.isDragPrevented)return;e.originalEvent.preventDefault();const n=this.findIndex(this.state.activeId);if(n===-1){this.resetState();return}const r=document.elementFromPoint(e.clientX,e.clientY),o=this.closestSortableItem(r),a=this.findIndex(o.id),l=i[a];if(s&&a>-1&&n!==a&&!this.isItemDisabled(l)&&!this.animatingItemMap[o.id]&&this.shouldReorder(o.element,e.clientX,e.clientY)){const u=new B.SortableOnDragOverEvent(this,n,a,this.generateNewState(n,a));s.call(void 0,u)}const g=this.parentOffset();this.setState({clientX:e.clientX-g.left,clientY:e.clientY-g.top,isDragging:!0})},this.onDragEnd=t=>{const{event:e}=t,s=this.shouldResetActive();if(this.isDragPrevented)return;const{onDragEnd:i,data:n}=this.props,r=document.elementFromPoint(e.clientX,e.clientY),o=this.closestSortableItem(r);let a=this.findIndex(o.id),l=this.findIndex(this.state.activeId);const g=this.isItemDisabled(n[a]);if((a===-1||g)&&(a=l),i){let u=this.generateNewState(l,a);if(!g){const m=this.thresholdRect(o.element);if(m&&(e.clientX<m.left||e.clientX>m.right||e.clientY<m.top||e.clientY>m.bottom)){const D=l;l=a,a=D,u=this.props.data.slice()}}const I=new F.SortableOnDragEndEvent(this,l,a,u);i.call(void 0,I)}this.resetState(s)},this.shouldReorder=(t,e,s)=>{const i=this.thresholdRect(t);return i&&e>i.left&&e<i.right&&s>i.top&&s<i.bottom},this.thresholdRect=t=>{const e=this.state.activeId,s=this.container,n=(s?Array.from(s.childNodes):[]).find(m=>m instanceof HTMLElement&&m.getAttribute(S)===e);if(!t||!n)return null;const{width:r,height:o}=n.getBoundingClientRect(),a=t.getBoundingClientRect(),l=a.top+a.height/2-o/2,g=a.left+a.width/2-r/2,u=l+o,I=g+r;return{top:l,left:g,bottom:u,right:I}},this.onItemBlur=()=>{window.setTimeout(()=>{this.isUnmounted||this.shouldResetActive()&&!this.state.isDragging&&this.setState({activeId:""})})},this.onItemFocus=t=>{const{id:e,element:s}=this.closestSortableItem(t.currentTarget);!this.idComparer(e,this.state.activeId)&&this.isSameSortable(t.target)&&s===t.target&&this.setState({activeId:e})},this.onKeyDown=t=>{const{data:e,idField:s,onNavigate:i,navigation:n}=this.props,{activeId:r}=this.state;if(!n||!r||!this.isSameSortable(t.target))return;const o=this.isRtl,a=e.filter(b=>!this.isItemDisabled(b)),l=f.findIndex(a,b=>this.idComparer(b[s],r)),g=a.length-1;let u=l;switch(t.keyCode===h.Keys.left&&(o?t.keyCode=h.Keys.down:t.keyCode=h.Keys.up),t.keyCode===h.Keys.right&&(o?t.keyCode=h.Keys.up:t.keyCode=h.Keys.down),t.keyCode){case h.Keys.up:l>0&&(u=l-1);break;case h.Keys.down:l<g&&(u=l+1);break}if(u===l)return;t.stopPropagation(),t.preventDefault();const I=a[u],m=I?I[s]:"",D=a[l],T=D?D[s]:"";if(t.ctrlKey){if(i){const b=this.findIndex(T),C=this.findIndex(m),M=new k.SortableOnNavigateEvent(this,b,C,this.generateNewState(b,C));this.isKeyboardNavigated=!0,i.call(void 0,M)}}else this.focusActiveId=!0,this.setState({activeId:m+""})},this.resetState=t=>{this.isDragPrevented=!1,this.setState({clientX:0,clientY:0,isDragging:!1,dragCueWidth:0,dragCueHeight:0,activeId:t?"":this.state.activeId})},this.renderData=()=>{const{data:t,itemUI:e,idField:s,tabIndex:i}=this.props;return t.map(n=>{const o=h.getter(s)(n),a=this.isItemDisabled(n),l=this.idComparer(this.state.activeId,o);return p.createElement(e,{key:o,forwardRef:g=>this.refAssign(g,o),dataItem:n,isDisabled:a,isActive:l,isDragged:l&&this.state.isDragging,isDragCue:!1,attributes:{[S]:o,"aria-disabled":a,"aria-grabbed":l&&this.state.isDragging&&!this.isDragPrevented,"aria-dropeffect":a?"none":"move",tabIndex:h.getTabIndex(i,a),onFocus:this.onItemFocus,onBlur:this.onItemBlur},style:{cursor:a?"auto":"move",MozUserSelect:"none",msUserSelect:"none",WebkitUserSelect:"none",userSelect:"none"}})})},this.renderNoData=()=>{const{emptyItemUI:t}=this.props,s=x.provideLocalizationService(this).toLanguageString(y.noData,y.messages[y.noData]);if(t)return p.createElement(t,{message:s})},this.renderDragCue=()=>{const{itemUI:t}=this.props,{isDragging:e,activeId:s,clientX:i,clientY:n}=this.state,r=this.findItem(s);if(!(!e||!r))return p.createElement(t,{dataItem:r,isDisabled:!1,isActive:!0,isDragged:!0,isDragCue:!0,style:{position:"fixed",top:n+10,left:i+10,width:this.state.dragCueWidth,height:this.state.dragCueHeight},attributes:{}})},this.refAssign=(t,e)=>{t?this.itemRefsMap[e]=t:delete this.itemRefsMap[e]},this.draggableRefAssign=t=>{this.draggableRef=t},h.validatePackage(q.packageMetadata)}get container(){return this.draggableRef&&this.draggableRef.element}getSnapshotBeforeUpdate(){const{idField:c,animation:t}=this.props;return this.oldSizesMap={},t&&this.props.data.forEach(e=>{const s=e[c],i=this.itemRefsMap[s],n=K.findDOMNode(i);n&&(this.oldSizesMap[s]=n.getBoundingClientRect())}),null}componentDidUpdate(c){const{idField:t,animation:e}=this.props;this.focusActiveId&&(this.focusActiveId=!1,this.itemRefsMap[this.state.activeId].focus()),!(!e||!this.state.isDragging&&!this.isKeyboardNavigated)&&(this.isKeyboardNavigated=!1,c.data.forEach(s=>{const i=s[t],n=this.itemRefsMap[i];if(!n)return;const r=n.getBoundingClientRect(),o=this.oldSizesMap[i],a=o.left-r.left,l=o.top-r.top;a===0&&l===0||requestAnimationFrame(()=>{this.animatingItemMap[i]=!0,n.style.transform=`translate(${a}px, ${l}px)`,n.style.transition="transform 0s",requestAnimationFrame(()=>{n.style.transform="",n.style.transition=`transform ${w}ms cubic-bezier(0.2, 0, 0, 1) 0s`,window.setTimeout(()=>this.animatingItemMap[i]=!1,w)})})}))}componentDidMount(){this.isRtl=this.container&&getComputedStyle(this.container).direction==="rtl"||!1}componentWillUnmount(){this.isUnmounted=!0}parentOffset(){const c=this.offsetParent;if(c&&c.ownerDocument&&c!==c.ownerDocument.body){const t=c.getBoundingClientRect();return{left:t.left-c.scrollLeft,top:t.top-c.scrollTop}}return{left:0,top:0}}render(){const{data:c,style:t,className:e,itemsWrapUI:s}=this.props,i=s||"div";return p.createElement(h.Draggable,{onDragStart:this.onDragStart,onDrag:this.onDragOver,onDragEnd:this.onDragEnd,ref:this.draggableRefAssign},p.createElement(i,{...z,className:e,style:{touchAction:"none",...t},onKeyDown:this.onKeyDown},c&&c.length?this.renderData():this.renderNoData(),this.renderDragCue()))}};R.defaultProps={navigation:!0,animation:!0,emptyItemUI:c=>p.createElement("div",null,c.message)},R.propTypes={idField:d.string.isRequired,disabledField:d.string,data:d.array.isRequired,tabIndex:d.number,navigation:d.bool,animation:d.bool,itemsWrapUI:d.any,itemUI:d.func.isRequired,emptyItemUI:d.func,style:d.object,className:d.string,onDragStart:d.func,onDragOver:d.func,onDragEnd:d.func,onNavigate:d.func};let E=R;x.registerForLocalization(E);exports.Sortable=E;

package/Sortable.mjs

@@ -0,0 +1,396 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use client";
+import * as u from "react";
+import * as N from "react-dom";
+import d from "prop-types";
+import { getter as R, getActiveElement as M, Keys as f, getTabIndex as U, validatePackage as P, Draggable as O } from "@progress/kendo-react-common";
+import { SortableOnDragStartEvent as B } from "./events/SortableOnDragStartEvent.mjs";
+import { SortableOnDragOverEvent as F } from "./events/SortableOnDragOverEvent.mjs";
+import { SortableOnDragEndEvent as k } from "./events/SortableOnDragEndEvent.mjs";
+import { SortableOnNavigateEvent as X } from "./events/SortableOnNavigateEvent.mjs";
+import { provideLocalizationService as Y, registerForLocalization as z } from "@progress/kendo-react-intl";
+import { noData as C, messages as W } from "./messages/index.mjs";
+import { find as K, findIndex as y, closest as L, isFocusable as H, relativeContextElement as q, hasClasses as _ } from "./utils/utils.mjs";
+import { packageMetadata as G } from "./package-metadata.mjs";
+const w = 200, b = "data-sortable-id", x = "data-sortable-component", $ = { [x]: !0 }, D = class D extends u.Component {
+  constructor(c) {
+    super(c), this.state = {
+      clientX: 0,
+      clientY: 0,
+      isDragging: !1,
+      activeId: "",
+      dragCueWidth: 0,
+      dragCueHeight: 0
+    }, this.isRtl = !1, this.itemRefsMap = {}, this.oldSizesMap = {}, this.animatingItemMap = {}, this.draggableRef = null, this.isUnmounted = !1, this.focusActiveId = !1, this.isKeyboardNavigated = !1, this.isDragPrevented = !1, this.swapItems = (t, e, i) => {
+      let s = t[e];
+      return t[e] = t[i], t[i] = s, e = i, e;
+    }, this.generateNewState = (t, e) => {
+      const { data: i } = this.props, s = [...i];
+      if (t > e)
+        for (let r = t - 1; r >= e; r--) {
+          const o = i[r];
+          this.isItemDisabled(o) || (t = this.swapItems(s, t, r));
+        }
+      else
+        for (let r = t + 1; r <= e; r++) {
+          const o = i[r];
+          this.isItemDisabled(o) || (t = this.swapItems(s, t, r));
+        }
+      return s;
+    }, this.closestSortableItem = (t) => {
+      let e = t;
+      for (; e; ) {
+        const i = e.getAttribute(b);
+        if (i && this.itemRefsMap[i] === e)
+          return {
+            id: i,
+            element: e
+          };
+        e = e.parentElement;
+      }
+      return {
+        id: "",
+        element: null
+      };
+    }, this.isSortable = (t) => !!t.hasAttribute(x), this.closestSortable = (t) => {
+      let e = t;
+      for (; e; ) {
+        if (this.isSortable(e))
+          return e;
+        e = e.parentElement;
+      }
+      return null;
+    }, this.isSameSortable = (t) => this.closestSortable(t) === this.container, this.idComparer = (t, e) => t + "" == e + "", this.findItem = (t) => {
+      const { data: e, idField: i } = this.props;
+      if (!(t + ""))
+        return;
+      const s = R(i);
+      return K(e, (n) => this.idComparer(s(n), t));
+    }, this.findIndex = (t) => {
+      const { data: e, idField: i } = this.props;
+      return t + "" ? y(e, (s) => this.idComparer(s[i], t)) : -1;
+    }, this.isItemDisabled = (t) => t && t[this.props.disabledField || ""] === !0, this.shouldResetActive = () => {
+      const t = M(document);
+      return t instanceof HTMLElement ? !this.closestSortableItem(t).element : !1;
+    }, this.widgetTarget = (t) => {
+      const e = L(t, (i) => _(i, "k-widget") || this.isSortable(i));
+      return e && !this.isSortable(e);
+    }, this.allowDrag = (t) => t.hasAttribute(b) || !(H(t) || this.widgetTarget(t)), this.onDragStart = (t) => {
+      const { event: e } = t, { onDragStart: i } = this.props, s = document.elementFromPoint(e.clientX, e.clientY), { id: n, element: r } = this.closestSortableItem(s), o = this.findItem(n);
+      if (!n || o && this.isItemDisabled(o) || !this.allowDrag(s) || !this.isSameSortable(s)) {
+        this.isDragPrevented = !0;
+        return;
+      }
+      e.isTouch && e.originalEvent.preventDefault();
+      const a = new B(
+        this,
+        this.findIndex(n),
+        s
+      );
+      i && i.call(void 0, a), this.isDragPrevented = a.isDefaultPrevented(), this.isDragPrevented ? e.originalEvent.preventDefault() : (this.offsetParent = q(this.container), this.setState({
+        activeId: n,
+        dragCueWidth: r && r.clientWidth || 0,
+        dragCueHeight: r && r.clientHeight || 0
+      }));
+    }, this.onDragOver = (t) => {
+      const { event: e } = t, { onDragOver: i, data: s } = this.props;
+      if (this.isDragPrevented)
+        return;
+      e.originalEvent.preventDefault();
+      const n = this.findIndex(this.state.activeId);
+      if (n === -1) {
+        this.resetState();
+        return;
+      }
+      const r = document.elementFromPoint(e.clientX, e.clientY), o = this.closestSortableItem(r), a = this.findIndex(o.id), l = s[a];
+      if (i && a > -1 && n !== a && !this.isItemDisabled(l) && !this.animatingItemMap[o.id] && this.shouldReorder(o.element, e.clientX, e.clientY)) {
+        const m = new F(
+          this,
+          n,
+          a,
+          this.generateNewState(n, a)
+        );
+        i.call(void 0, m);
+      }
+      const h = this.parentOffset();
+      this.setState({
+        clientX: e.clientX - h.left,
+        clientY: e.clientY - h.top,
+        isDragging: !0
+      });
+    }, this.onDragEnd = (t) => {
+      const { event: e } = t, i = this.shouldResetActive();
+      if (this.isDragPrevented)
+        return;
+      const { onDragEnd: s, data: n } = this.props, r = document.elementFromPoint(e.clientX, e.clientY), o = this.closestSortableItem(r);
+      let a = this.findIndex(o.id), l = this.findIndex(this.state.activeId);
+      const h = this.isItemDisabled(n[a]);
+      if ((a === -1 || h) && (a = l), s) {
+        let m = this.generateNewState(l, a);
+        if (!h) {
+          const g = this.thresholdRect(o.element);
+          if (g && (e.clientX < g.left || e.clientX > g.right || e.clientY < g.top || e.clientY > g.bottom)) {
+            const v = l;
+            l = a, a = v, m = this.props.data.slice();
+          }
+        }
+        const p = new k(
+          this,
+          l,
+          a,
+          m
+        );
+        s.call(void 0, p);
+      }
+      this.resetState(i);
+    }, this.shouldReorder = (t, e, i) => {
+      const s = this.thresholdRect(t);
+      return s && e > s.left && e < s.right && i > s.top && i < s.bottom;
+    }, this.thresholdRect = (t) => {
+      const e = this.state.activeId, i = this.container, n = (i ? Array.from(i.childNodes) : []).find(
+        (g) => g instanceof HTMLElement && g.getAttribute(b) === e
+      );
+      if (!t || !n)
+        return null;
+      const { width: r, height: o } = n.getBoundingClientRect(), a = t.getBoundingClientRect(), l = a.top + a.height / 2 - o / 2, h = a.left + a.width / 2 - r / 2, m = l + o, p = h + r;
+      return { top: l, left: h, bottom: m, right: p };
+    }, this.onItemBlur = () => {
+      window.setTimeout(() => {
+        this.isUnmounted || this.shouldResetActive() && !this.state.isDragging && this.setState({
+          activeId: ""
+          // what happends on destroyed component
+        });
+      });
+    }, this.onItemFocus = (t) => {
+      const { id: e, element: i } = this.closestSortableItem(t.currentTarget);
+      !this.idComparer(e, this.state.activeId) && this.isSameSortable(t.target) && i === t.target && this.setState({
+        activeId: e
+      });
+    }, this.onKeyDown = (t) => {
+      const { data: e, idField: i, onNavigate: s, navigation: n } = this.props, { activeId: r } = this.state;
+      if (!n || !r || !this.isSameSortable(t.target))
+        return;
+      const o = this.isRtl, a = e.filter((I) => !this.isItemDisabled(I)), l = y(a, (I) => this.idComparer(I[i], r)), h = a.length - 1;
+      let m = l;
+      switch (t.keyCode === f.left && (o ? t.keyCode = f.down : t.keyCode = f.up), t.keyCode === f.right && (o ? t.keyCode = f.up : t.keyCode = f.down), t.keyCode) {
+        case f.up:
+          l > 0 && (m = l - 1);
+          break;
+        case f.down:
+          l < h && (m = l + 1);
+          break;
+      }
+      if (m === l)
+        return;
+      t.stopPropagation(), t.preventDefault();
+      const p = a[m], g = p ? p[i] : "", v = a[l], A = v ? v[i] : "";
+      if (t.ctrlKey) {
+        if (s) {
+          const I = this.findIndex(A), E = this.findIndex(g), T = new X(
+            this,
+            I,
+            E,
+            this.generateNewState(I, E)
+          );
+          this.isKeyboardNavigated = !0, s.call(void 0, T);
+        }
+      } else
+        this.focusActiveId = !0, this.setState({
+          activeId: g + ""
+        });
+    }, this.resetState = (t) => {
+      this.isDragPrevented = !1, this.setState({
+        clientX: 0,
+        clientY: 0,
+        isDragging: !1,
+        dragCueWidth: 0,
+        dragCueHeight: 0,
+        activeId: t ? "" : this.state.activeId
+      });
+    }, this.renderData = () => {
+      const {
+        data: t,
+        itemUI: e,
+        idField: i,
+        tabIndex: s
+      } = this.props;
+      return t.map((n) => {
+        const o = R(i)(n), a = this.isItemDisabled(n), l = this.idComparer(this.state.activeId, o);
+        return /* @__PURE__ */ u.createElement(
+          e,
+          {
+            key: o,
+            forwardRef: (h) => this.refAssign(h, o),
+            dataItem: n,
+            isDisabled: a,
+            isActive: l,
+            isDragged: l && this.state.isDragging,
+            isDragCue: !1,
+            attributes: {
+              [b]: o,
+              "aria-disabled": a,
+              "aria-grabbed": l && this.state.isDragging && !this.isDragPrevented,
+              "aria-dropeffect": a ? "none" : "move",
+              tabIndex: U(s, a),
+              onFocus: this.onItemFocus,
+              onBlur: this.onItemBlur
+            },
+            style: {
+              cursor: a ? "auto" : "move",
+              MozUserSelect: "none",
+              msUserSelect: "none",
+              WebkitUserSelect: "none",
+              userSelect: "none"
+            }
+          }
+        );
+      });
+    }, this.renderNoData = () => {
+      const { emptyItemUI: t } = this.props, i = Y(this).toLanguageString(C, W[C]);
+      if (t)
+        return /* @__PURE__ */ u.createElement(t, { message: i });
+    }, this.renderDragCue = () => {
+      const { itemUI: t } = this.props, { isDragging: e, activeId: i, clientX: s, clientY: n } = this.state, r = this.findItem(i);
+      if (!(!e || !r))
+        return /* @__PURE__ */ u.createElement(
+          t,
+          {
+            dataItem: r,
+            isDisabled: !1,
+            isActive: !0,
+            isDragged: !0,
+            isDragCue: !0,
+            style: {
+              position: "fixed",
+              top: n + 10,
+              left: s + 10,
+              width: this.state.dragCueWidth,
+              height: this.state.dragCueHeight
+            },
+            attributes: {}
+          }
+        );
+    }, this.refAssign = (t, e) => {
+      t ? this.itemRefsMap[e] = t : delete this.itemRefsMap[e];
+    }, this.draggableRefAssign = (t) => {
+      this.draggableRef = t;
+    }, P(G);
+  }
+  get container() {
+    return this.draggableRef && this.draggableRef.element;
+  }
+  /**
+   * @hidden
+   */
+  getSnapshotBeforeUpdate() {
+    const { idField: c, animation: t } = this.props;
+    return this.oldSizesMap = {}, t && this.props.data.forEach((e) => {
+      const i = e[c], s = this.itemRefsMap[i], n = N.findDOMNode(s);
+      n && (this.oldSizesMap[i] = n.getBoundingClientRect());
+    }), null;
+  }
+  /**
+   * @hidden
+   */
+  componentDidUpdate(c) {
+    const { idField: t, animation: e } = this.props;
+    this.focusActiveId && (this.focusActiveId = !1, this.itemRefsMap[this.state.activeId].focus()), !(!e || !this.state.isDragging && !this.isKeyboardNavigated) && (this.isKeyboardNavigated = !1, c.data.forEach((i) => {
+      const s = i[t], n = this.itemRefsMap[s];
+      if (!n)
+        return;
+      const r = n.getBoundingClientRect(), o = this.oldSizesMap[s], a = o.left - r.left, l = o.top - r.top;
+      a === 0 && l === 0 || requestAnimationFrame(() => {
+        this.animatingItemMap[s] = !0, n.style.transform = `translate(${a}px, ${l}px)`, n.style.transition = "transform 0s", requestAnimationFrame(() => {
+          n.style.transform = "", n.style.transition = `transform ${w}ms cubic-bezier(0.2, 0, 0, 1) 0s`, window.setTimeout(() => this.animatingItemMap[s] = !1, w);
+        });
+      });
+    }));
+  }
+  /**
+   * @hidden
+   */
+  componentDidMount() {
+    this.isRtl = this.container && getComputedStyle(this.container).direction === "rtl" || !1;
+  }
+  /**
+   * @hidden
+   */
+  componentWillUnmount() {
+    this.isUnmounted = !0;
+  }
+  /**
+   * @hidden
+   */
+  parentOffset() {
+    const c = this.offsetParent;
+    if (c && c.ownerDocument && c !== c.ownerDocument.body) {
+      const t = c.getBoundingClientRect();
+      return {
+        left: t.left - c.scrollLeft,
+        top: t.top - c.scrollTop
+      };
+    }
+    return { left: 0, top: 0 };
+  }
+  /**
+   * @hidden
+   */
+  render() {
+    const { data: c, style: t, className: e, itemsWrapUI: i } = this.props, s = i || "div";
+    return /* @__PURE__ */ u.createElement(
+      O,
+      {
+        onDragStart: this.onDragStart,
+        onDrag: this.onDragOver,
+        onDragEnd: this.onDragEnd,
+        ref: this.draggableRefAssign
+      },
+      /* @__PURE__ */ u.createElement(
+        s,
+        {
+          ...$,
+          className: e,
+          style: {
+            touchAction: "none",
+            ...t
+          },
+          onKeyDown: this.onKeyDown
+        },
+        c && c.length ? this.renderData() : this.renderNoData(),
+        this.renderDragCue()
+      )
+    );
+  }
+};
+D.defaultProps = {
+  navigation: !0,
+  animation: !0,
+  emptyItemUI: (c) => /* @__PURE__ */ u.createElement("div", null, c.message)
+}, D.propTypes = {
+  idField: d.string.isRequired,
+  disabledField: d.string,
+  data: d.array.isRequired,
+  tabIndex: d.number,
+  navigation: d.bool,
+  animation: d.bool,
+  itemsWrapUI: d.any,
+  itemUI: d.func.isRequired,
+  emptyItemUI: d.func,
+  style: d.object,
+  className: d.string,
+  onDragStart: d.func,
+  onDragOver: d.func,
+  onDragEnd: d.func,
+  onNavigate: d.func
+};
+let S = D;
+z(S);
+export {
+  S as Sortable
+};

package/dist/cdn/js/kendo-react-sortable.js

@@ -1,5 +1,8 @@
-/**-----------------------------------------------------------------------------------------
-* Copyright © 2024 Progress Software Corporation. All rights reserved.
-* Licensed under commercial license. See LICENSE.md in the package root for more information
-*-------------------------------------------------------------------------------------------*/
-(function(h,D){typeof exports=="object"&&typeof module!="undefined"?D(exports,require("react"),require("react-dom"),require("prop-types"),require("@progress/kendo-react-common"),require("@progress/kendo-react-intl")):typeof define=="function"&&define.amd?define(["exports","react","react-dom","prop-types","@progress/kendo-react-common","@progress/kendo-react-intl"],D):(h=typeof globalThis!="undefined"?globalThis:h||self,D(h.KendoReactSortable={},h.React,h.ReactDOM,h.PropTypes,h.KendoReactCommon,h.KendoReactIntl))})(this,function(h,D,F,u,g,R){"use strict";"use client";function y(r){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(r){for(const t in r)if(t!=="default"){const e=Object.getOwnPropertyDescriptor(r,t);Object.defineProperty(i,t,e.get?e:{enumerable:!0,get:()=>r[t]})}}return i.default=r,Object.freeze(i)}const I=y(D),_=y(F);class L{constructor(){this.prevented=!1}preventDefault(){this.prevented=!0}isDefaultPrevented(){return this.prevented}}class N extends L{constructor(i,t,e){super(),this.target=i,this.prevIndex=t,this.element=e}}class O{constructor(i,t,e,s){this.target=i,this.prevIndex=t,this.nextIndex=e,this.newState=s}}class A{constructor(i,t,e,s){this.target=i,this.prevIndex=t,this.nextIndex=e,this.newState=s}}class C{constructor(i,t,e,s){this.target=i,this.prevIndex=t,this.nextIndex=e,this.newState=s}}const x="sortable.noData",P={[x]:"No Data"},X=(r,i)=>{for(let t=0;t<r.length;t++)if(i(r[t]))return r[t]},M=(r,i)=>{for(let t=0;t<r.length;t++)if(i(r[t]))return t;return-1},U=r=>String(r).trim().split(" "),z=(r,i)=>{const t=U(i);return!!U(r.className).find(e=>t.indexOf(e)>=0)},Y=/^(?:a|input|select|option|textarea|button|object)$/i,q=r=>{if(r.tagName){const i=r.tagName.toLowerCase(),t=r.getAttribute("tabIndex"),e=t==="-1";let s=t!==null&&!e;return Y.test(i)&&(s=!r.disabled&&!e),s}return!1},W=(r,i)=>{for(;r&&!i(r);)r=r.parentNode;return r},k=g.hasRelativeStackingContext(),j=r=>{if(!r||!k)return null;let i=r.parentElement;for(;i;){if(window.getComputedStyle(i).transform!=="none")return i;i=i.parentElement}},H={name:"@progress/kendo-react-sortable",productName:"KendoReact",productCodes:["KENDOUIREACT","KENDOUICOMPLETE"],publishDate:0,version:"",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"},T=200,S="data-sortable-id",K="data-sortable-component",G={[K]:!0};class E extends I.Component{constructor(i){super(i),this.state={clientX:0,clientY:0,isDragging:!1,activeId:"",dragCueWidth:0,dragCueHeight:0},this.isRtl=!1,this.itemRefsMap={},this.oldSizesMap={},this.animatingItemMap={},this.draggableRef=null,this.isUnmounted=!1,this.focusActiveId=!1,this.isKeyboardNavigated=!1,this.isDragPrevented=!1,this.swapItems=(t,e,s)=>{let n=t[e];return t[e]=t[s],t[s]=n,e=s,e},this.generateNewState=(t,e)=>{const{data:s}=this.props,n=[...s];if(t>e)for(let l=t-1;l>=e;l--){const c=s[l];this.isItemDisabled(c)||(t=this.swapItems(n,t,l))}else for(let l=t+1;l<=e;l++){const c=s[l];this.isItemDisabled(c)||(t=this.swapItems(n,t,l))}return n},this.closestSortableItem=t=>{let e=t;for(;e;){const s=e.getAttribute(S);if(s&&this.itemRefsMap[s]===e)return{id:s,element:e};e=e.parentElement}return{id:"",element:null}},this.isSortable=t=>!!t.hasAttribute(K),this.closestSortable=t=>{let e=t;for(;e;){if(this.isSortable(e))return e;e=e.parentElement}return null},this.isSameSortable=t=>this.closestSortable(t)===this.container,this.idComparer=(t,e)=>t+""==e+"",this.findItem=t=>{const{data:e,idField:s}=this.props;if(!(t+""))return;const n=g.getter(s);return X(e,a=>this.idComparer(n(a),t))},this.findIndex=t=>{const{data:e,idField:s}=this.props;return t+""?M(e,n=>this.idComparer(n[s],t)):-1},this.isItemDisabled=t=>t&&t[this.props.disabledField||""]===!0,this.shouldResetActive=()=>{const t=g.getActiveElement(document);return t instanceof HTMLElement?!this.closestSortableItem(t).element:!1},this.widgetTarget=t=>{const e=W(t,s=>z(s,"k-widget")||this.isSortable(s));return e&&!this.isSortable(e)},this.allowDrag=t=>t.hasAttribute(S)||!(q(t)||this.widgetTarget(t)),this.onDragStart=t=>{const{event:e}=t,{onDragStart:s}=this.props,n=document.elementFromPoint(e.clientX,e.clientY),{id:a,element:l}=this.closestSortableItem(n),c=this.findItem(a);if(!a||c&&this.isItemDisabled(c)||!this.allowDrag(n)||!this.isSameSortable(n)){this.isDragPrevented=!0;return}e.isTouch&&e.originalEvent.preventDefault();const o=new N(this,this.findIndex(a),n);s&&s.call(void 0,o),this.isDragPrevented=o.isDefaultPrevented(),this.isDragPrevented?e.originalEvent.preventDefault():(this.offsetParent=j(this.container),this.setState({activeId:a,dragCueWidth:l&&l.clientWidth||0,dragCueHeight:l&&l.clientHeight||0}))},this.onDragOver=t=>{const{event:e}=t,{onDragOver:s,data:n}=this.props;if(this.isDragPrevented)return;e.originalEvent.preventDefault();const a=this.findIndex(this.state.activeId);if(a===-1){this.resetState();return}const l=document.elementFromPoint(e.clientX,e.clientY),c=this.closestSortableItem(l),o=this.findIndex(c.id),d=n[o];if(s&&o>-1&&a!==o&&!this.isItemDisabled(d)&&!this.animatingItemMap[c.id]&&this.shouldReorder(c.element,e.clientX,e.clientY)){const m=new O(this,a,o,this.generateNewState(a,o));s.call(void 0,m)}const f=this.parentOffset();this.setState({clientX:e.clientX-f.left,clientY:e.clientY-f.top,isDragging:!0})},this.onDragEnd=t=>{const{event:e}=t,s=this.shouldResetActive();if(this.isDragPrevented)return;const{onDragEnd:n,data:a}=this.props,l=document.elementFromPoint(e.clientX,e.clientY),c=this.closestSortableItem(l);let o=this.findIndex(c.id),d=this.findIndex(this.state.activeId);const f=this.isItemDisabled(a[o]);if((o===-1||f)&&(o=d),n){let m=this.generateNewState(d,o);if(!f){const p=this.thresholdRect(c.element);if(p&&(e.clientX<p.left||e.clientX>p.right||e.clientY<p.top||e.clientY>p.bottom)){const w=d;d=o,o=w,m=this.props.data.slice()}}const b=new A(this,d,o,m);n.call(void 0,b)}this.resetState(s)},this.shouldReorder=(t,e,s)=>{const n=this.thresholdRect(t);return n&&e>n.left&&e<n.right&&s>n.top&&s<n.bottom},this.thresholdRect=t=>{const e=this.state.activeId,s=this.container,a=(s?Array.from(s.childNodes):[]).find(p=>p instanceof HTMLElement&&p.getAttribute(S)===e);if(!t||!a)return null;const{width:l,height:c}=a.getBoundingClientRect(),o=t.getBoundingClientRect(),d=o.top+o.height/2-c/2,f=o.left+o.width/2-l/2,m=d+c,b=f+l;return{top:d,left:f,bottom:m,right:b}},this.onItemBlur=()=>{window.setTimeout(()=>{this.isUnmounted||this.shouldResetActive()&&!this.state.isDragging&&this.setState({activeId:""})})},this.onItemFocus=t=>{const{id:e,element:s}=this.closestSortableItem(t.currentTarget);!this.idComparer(e,this.state.activeId)&&this.isSameSortable(t.target)&&s===t.target&&this.setState({activeId:e})},this.onKeyDown=t=>{const{data:e,idField:s,onNavigate:n,navigation:a}=this.props,{activeId:l}=this.state;if(!a||!l||!this.isSameSortable(t.target))return;const c=this.isRtl,o=e.filter(v=>!this.isItemDisabled(v)),d=M(o,v=>this.idComparer(v[s],l)),f=o.length-1;let m=d;switch(t.keyCode===g.Keys.left&&(c?t.keyCode=g.Keys.down:t.keyCode=g.Keys.up),t.keyCode===g.Keys.right&&(c?t.keyCode=g.Keys.up:t.keyCode=g.Keys.down),t.keyCode){case g.Keys.up:d>0&&(m=d-1);break;case g.Keys.down:d<f&&(m=d+1);break}if(m===d)return;t.stopPropagation(),t.preventDefault();const b=o[m],p=b?b[s]:"",w=o[d],$=w?w[s]:"";if(t.ctrlKey){if(n){const v=this.findIndex($),B=this.findIndex(p),V=new C(this,v,B,this.generateNewState(v,B));this.isKeyboardNavigated=!0,n.call(void 0,V)}}else this.focusActiveId=!0,this.setState({activeId:p+""})},this.resetState=t=>{this.isDragPrevented=!1,this.setState({clientX:0,clientY:0,isDragging:!1,dragCueWidth:0,dragCueHeight:0,activeId:t?"":this.state.activeId})},this.renderData=()=>{const{data:t,itemUI:e,idField:s,tabIndex:n}=this.props;return t.map(a=>{const c=g.getter(s)(a),o=this.isItemDisabled(a),d=this.idComparer(this.state.activeId,c);return I.createElement(e,{key:c,forwardRef:f=>this.refAssign(f,c),dataItem:a,isDisabled:o,isActive:d,isDragged:d&&this.state.isDragging,isDragCue:!1,attributes:{[S]:c,["aria-disabled"]:o,["aria-grabbed"]:d&&this.state.isDragging&&!this.isDragPrevented,["aria-dropeffect"]:o?"none":"move",tabIndex:g.getTabIndex(n,o),onFocus:this.onItemFocus,onBlur:this.onItemBlur},style:{cursor:o?"auto":"move",MozUserSelect:"none",msUserSelect:"none",WebkitUserSelect:"none",userSelect:"none"}})})},this.renderNoData=()=>{const{emptyItemUI:t}=this.props,s=R.provideLocalizationService(this).toLanguageString(x,P[x]);if(t)return I.createElement(t,{message:s})},this.renderDragCue=()=>{const{itemUI:t}=this.props,{isDragging:e,activeId:s,clientX:n,clientY:a}=this.state,l=this.findItem(s);if(!(!e||!l))return I.createElement(t,{dataItem:l,isDisabled:!1,isActive:!0,isDragged:!0,isDragCue:!0,style:{position:"fixed",top:a+10,left:n+10,width:this.state.dragCueWidth,height:this.state.dragCueHeight},attributes:{}})},this.refAssign=(t,e)=>{t?this.itemRefsMap[e]=t:delete this.itemRefsMap[e]},this.draggableRefAssign=t=>{this.draggableRef=t},g.validatePackage(H)}get container(){return this.draggableRef&&this.draggableRef.element}getSnapshotBeforeUpdate(){const{idField:i,animation:t}=this.props;return this.oldSizesMap={},t&&this.props.data.forEach(e=>{const s=e[i],n=this.itemRefsMap[s],a=_.findDOMNode(n);a&&(this.oldSizesMap[s]=a.getBoundingClientRect())}),null}componentDidUpdate(i){const{idField:t,animation:e}=this.props;this.focusActiveId&&(this.focusActiveId=!1,this.itemRefsMap[this.state.activeId].focus()),!(!e||!this.state.isDragging&&!this.isKeyboardNavigated)&&(this.isKeyboardNavigated=!1,i.data.forEach(s=>{const n=s[t],a=this.itemRefsMap[n];if(!a)return;const l=a.getBoundingClientRect(),c=this.oldSizesMap[n],o=c.left-l.left,d=c.top-l.top;o===0&&d===0||requestAnimationFrame(()=>{this.animatingItemMap[n]=!0,a.style.transform=`translate(${o}px, ${d}px)`,a.style.transition="transform 0s",requestAnimationFrame(()=>{a.style.transform="",a.style.transition=`transform ${T}ms cubic-bezier(0.2, 0, 0, 1) 0s`,window.setTimeout(()=>this.animatingItemMap[n]=!1,T)})})}))}componentDidMount(){this.isRtl=this.container&&getComputedStyle(this.container).direction==="rtl"||!1}componentWillUnmount(){this.isUnmounted=!0}parentOffset(){const i=this.offsetParent;if(i&&i.ownerDocument&&i!==i.ownerDocument.body){const t=i.getBoundingClientRect();return{left:t.left-i.scrollLeft,top:t.top-i.scrollTop}}return{left:0,top:0}}render(){const{data:i,style:t,className:e,itemsWrapUI:s}=this.props,n=s||"div";return I.createElement(g.Draggable,{onDragStart:this.onDragStart,onDrag:this.onDragOver,onDragEnd:this.onDragEnd,ref:this.draggableRefAssign},I.createElement(n,{...G,className:e,style:{touchAction:"none",...t},onKeyDown:this.onKeyDown},i&&i.length?this.renderData():this.renderNoData(),this.renderDragCue()))}}E.defaultProps={navigation:!0,animation:!0,emptyItemUI:r=>I.createElement("div",null,r.message)},E.propTypes={idField:u.string.isRequired,disabledField:u.string,data:u.array.isRequired,tabIndex:u.number,navigation:u.bool,animation:u.bool,itemsWrapUI:u.any,itemUI:u.func.isRequired,emptyItemUI:u.func,style:u.object,className:u.string,onDragStart:u.func,onDragOver:u.func,onDragEnd:u.func,onNavigate:u.func},R.registerForLocalization(E),h.Sortable=E,h.SortableOnDragEndEvent=A,h.SortableOnDragOverEvent=O,h.SortableOnDragStartEvent=N,h.SortableOnNavigateEvent=C,Object.defineProperty(h,Symbol.toStringTag,{value:"Module"})});
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("react"),require("react-dom"),require("prop-types"),require("@progress/kendo-react-common"),require("@progress/kendo-react-intl")):"function"==typeof define&&define.amd?define(["exports","react","react-dom","prop-types","@progress/kendo-react-common","@progress/kendo-react-intl"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).KendoReactSortable={},t.React,t.ReactDOM,t.PropTypes,t.KendoReactCommon,t.KendoReactIntl)}(this,(function(t,e,i,s,n,r){"use strict";function a(t){var e=Object.create(null);return t&&Object.keys(t).forEach((function(i){if("default"!==i){var s=Object.getOwnPropertyDescriptor(t,i);Object.defineProperty(e,i,s.get?s:{enumerable:!0,get:function(){return t[i]}})}})),e.default=t,Object.freeze(e)}var o=a(e),d=a(i);let l=class{constructor(){this.prevented=!1}preventDefault(){this.prevented=!0}isDefaultPrevented(){return this.prevented}};class h extends l{constructor(t,e,i){super(),this.target=t,this.prevIndex=e,this.element=i}}let c=class{constructor(t,e,i,s){this.target=t,this.prevIndex=e,this.nextIndex=i,this.newState=s}},g=class{constructor(t,e,i,s){this.target=t,this.prevIndex=e,this.nextIndex=i,this.newState=s}};class u{constructor(t,e,i,s){this.target=t,this.prevIndex=e,this.nextIndex=i,this.newState=s}}const m="sortable.noData",p={[m]:"No Data"},f=(t,e)=>{for(let i=0;i<t.length;i++)if(e(t[i]))return i;return-1},v=t=>String(t).trim().split(" "),b=/^(?:a|input|select|option|textarea|button|object)$/i,I=n.hasRelativeStackingContext(),D={name:"@progress/kendo-react-sortable",productName:"KendoReact",productCodes:["KENDOUIREACT","KENDOUICOMPLETE"],publishDate:0,version:"",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"},S="data-sortable-id",y="data-sortable-component",w={[y]:!0},R=class extends o.Component{constructor(t){super(t),this.state={clientX:0,clientY:0,isDragging:!1,activeId:"",dragCueWidth:0,dragCueHeight:0},this.isRtl=!1,this.itemRefsMap={},this.oldSizesMap={},this.animatingItemMap={},this.draggableRef=null,this.isUnmounted=!1,this.focusActiveId=!1,this.isKeyboardNavigated=!1,this.isDragPrevented=!1,this.swapItems=(t,e,i)=>{let s=t[e];return t[e]=t[i],t[i]=s,e=i},this.generateNewState=(t,e)=>{const{data:i}=this.props,s=[...i];if(t>e)for(let n=t-1;n>=e;n--){const e=i[n];this.isItemDisabled(e)||(t=this.swapItems(s,t,n))}else for(let n=t+1;n<=e;n++){const e=i[n];this.isItemDisabled(e)||(t=this.swapItems(s,t,n))}return s},this.closestSortableItem=t=>{let e=t;for(;e;){const t=e.getAttribute(S);if(t&&this.itemRefsMap[t]===e)return{id:t,element:e};e=e.parentElement}return{id:"",element:null}},this.isSortable=t=>!!t.hasAttribute(y),this.closestSortable=t=>{let e=t;for(;e;){if(this.isSortable(e))return e;e=e.parentElement}return null},this.isSameSortable=t=>this.closestSortable(t)===this.container,this.idComparer=(t,e)=>t+""==e+"",this.findItem=t=>{const{data:e,idField:i}=this.props;if(!(t+""))return;const s=n.getter(i);return((t,e)=>{for(let i=0;i<t.length;i++)if(e(t[i]))return t[i]})(e,(e=>this.idComparer(s(e),t)))},this.findIndex=t=>{const{data:e,idField:i}=this.props;return t+""?f(e,(e=>this.idComparer(e[i],t))):-1},this.isItemDisabled=t=>t&&!0===t[this.props.disabledField||""],this.shouldResetActive=()=>{const t=n.getActiveElement(document);return t instanceof HTMLElement&&!this.closestSortableItem(t).element},this.widgetTarget=t=>{const e=((t,e)=>{for(;t&&!e(t);)t=t.parentNode;return t})(t,(t=>((t,e)=>{const i=v(e);return!!v(t.className).find((t=>i.indexOf(t)>=0))})(t,"k-widget")||this.isSortable(t)));return e&&!this.isSortable(e)},this.allowDrag=t=>t.hasAttribute(S)||!((t=>{if(t.tagName){const e=t.tagName.toLowerCase(),i=t.getAttribute("tabIndex"),s="-1"===i;let n=null!==i&&!s;return b.test(e)&&(n=!t.disabled&&!s),n}return!1})(t)||this.widgetTarget(t)),this.onDragStart=t=>{const{event:e}=t,{onDragStart:i}=this.props,s=document.elementFromPoint(e.clientX,e.clientY),{id:n,element:r}=this.closestSortableItem(s),a=this.findItem(n);if(!n||a&&this.isItemDisabled(a)||!this.allowDrag(s)||!this.isSameSortable(s))return void(this.isDragPrevented=!0);e.isTouch&&e.originalEvent.preventDefault();const o=new h(this,this.findIndex(n),s);i&&i.call(void 0,o),this.isDragPrevented=o.isDefaultPrevented(),this.isDragPrevented?e.originalEvent.preventDefault():(this.offsetParent=(t=>{if(!t||!I)return null;let e=t.parentElement;for(;e;){if("none"!==window.getComputedStyle(e).transform)return e;e=e.parentElement}})(this.container),this.setState({activeId:n,dragCueWidth:r&&r.clientWidth||0,dragCueHeight:r&&r.clientHeight||0}))},this.onDragOver=t=>{const{event:e}=t,{onDragOver:i,data:s}=this.props;if(this.isDragPrevented)return;e.originalEvent.preventDefault();const n=this.findIndex(this.state.activeId);if(-1===n)return void this.resetState();const r=document.elementFromPoint(e.clientX,e.clientY),a=this.closestSortableItem(r),o=this.findIndex(a.id),d=s[o];if(i&&o>-1&&n!==o&&!this.isItemDisabled(d)&&!this.animatingItemMap[a.id]&&this.shouldReorder(a.element,e.clientX,e.clientY)){const t=new c(this,n,o,this.generateNewState(n,o));i.call(void 0,t)}const l=this.parentOffset();this.setState({clientX:e.clientX-l.left,clientY:e.clientY-l.top,isDragging:!0})},this.onDragEnd=t=>{const{event:e}=t,i=this.shouldResetActive();if(this.isDragPrevented)return;const{onDragEnd:s,data:n}=this.props,r=document.elementFromPoint(e.clientX,e.clientY),a=this.closestSortableItem(r);let o=this.findIndex(a.id),d=this.findIndex(this.state.activeId);const l=this.isItemDisabled(n[o]);if((-1===o||l)&&(o=d),s){let t=this.generateNewState(d,o);if(!l){const i=this.thresholdRect(a.element);if(i&&(e.clientX<i.left||e.clientX>i.right||e.clientY<i.top||e.clientY>i.bottom)){const e=d;d=o,o=e,t=this.props.data.slice()}}const i=new g(this,d,o,t);s.call(void 0,i)}this.resetState(i)},this.shouldReorder=(t,e,i)=>{const s=this.thresholdRect(t);return s&&e>s.left&&e<s.right&&i>s.top&&i<s.bottom},this.thresholdRect=t=>{const e=this.state.activeId,i=this.container,s=(i?Array.from(i.childNodes):[]).find((t=>t instanceof HTMLElement&&t.getAttribute(S)===e));if(!t||!s)return null;const{width:n,height:r}=s.getBoundingClientRect(),a=t.getBoundingClientRect(),o=a.top+a.height/2-r/2,d=a.left+a.width/2-n/2;return{top:o,left:d,bottom:o+r,right:d+n}},this.onItemBlur=()=>{window.setTimeout((()=>{this.isUnmounted||this.shouldResetActive()&&!this.state.isDragging&&this.setState({activeId:""})}))},this.onItemFocus=t=>{const{id:e,element:i}=this.closestSortableItem(t.currentTarget);!this.idComparer(e,this.state.activeId)&&this.isSameSortable(t.target)&&i===t.target&&this.setState({activeId:e})},this.onKeyDown=t=>{const{data:e,idField:i,onNavigate:s,navigation:r}=this.props,{activeId:a}=this.state;if(!r||!a||!this.isSameSortable(t.target))return;const o=this.isRtl,d=e.filter((t=>!this.isItemDisabled(t))),l=f(d,(t=>this.idComparer(t[i],a))),h=d.length-1;let c=l;switch(t.keyCode===n.Keys.left&&(t.keyCode=o?n.Keys.down:n.Keys.up),t.keyCode===n.Keys.right&&(t.keyCode=o?n.Keys.up:n.Keys.down),t.keyCode){case n.Keys.up:l>0&&(c=l-1);break;case n.Keys.down:l<h&&(c=l+1)}if(c===l)return;t.stopPropagation(),t.preventDefault();const g=d[c],m=g?g[i]:"",p=d[l],v=p?p[i]:"";if(t.ctrlKey){if(s){const t=this.findIndex(v),e=this.findIndex(m),i=new u(this,t,e,this.generateNewState(t,e));this.isKeyboardNavigated=!0,s.call(void 0,i)}}else this.focusActiveId=!0,this.setState({activeId:m+""})},this.resetState=t=>{this.isDragPrevented=!1,this.setState({clientX:0,clientY:0,isDragging:!1,dragCueWidth:0,dragCueHeight:0,activeId:t?"":this.state.activeId})},this.renderData=()=>{const{data:t,itemUI:e,idField:i,tabIndex:s}=this.props;return t.map((t=>{const r=n.getter(i)(t),a=this.isItemDisabled(t),d=this.idComparer(this.state.activeId,r);return o.createElement(e,{key:r,forwardRef:t=>this.refAssign(t,r),dataItem:t,isDisabled:a,isActive:d,isDragged:d&&this.state.isDragging,isDragCue:!1,attributes:{[S]:r,"aria-disabled":a,"aria-grabbed":d&&this.state.isDragging&&!this.isDragPrevented,"aria-dropeffect":a?"none":"move",tabIndex:n.getTabIndex(s,a),onFocus:this.onItemFocus,onBlur:this.onItemBlur},style:{cursor:a?"auto":"move",MozUserSelect:"none",msUserSelect:"none",WebkitUserSelect:"none",userSelect:"none"}})}))},this.renderNoData=()=>{const{emptyItemUI:t}=this.props,e=r.provideLocalizationService(this).toLanguageString(m,p[m]);if(t)return o.createElement(t,{message:e})},this.renderDragCue=()=>{const{itemUI:t}=this.props,{isDragging:e,activeId:i,clientX:s,clientY:n}=this.state,r=this.findItem(i);if(e&&r)return o.createElement(t,{dataItem:r,isDisabled:!1,isActive:!0,isDragged:!0,isDragCue:!0,style:{position:"fixed",top:n+10,left:s+10,width:this.state.dragCueWidth,height:this.state.dragCueHeight},attributes:{}})},this.refAssign=(t,e)=>{t?this.itemRefsMap[e]=t:delete this.itemRefsMap[e]},this.draggableRefAssign=t=>{this.draggableRef=t},n.validatePackage(D)}get container(){return this.draggableRef&&this.draggableRef.element}getSnapshotBeforeUpdate(){const{idField:t,animation:e}=this.props;return this.oldSizesMap={},e&&this.props.data.forEach((e=>{const i=e[t],s=this.itemRefsMap[i],n=d.findDOMNode(s);n&&(this.oldSizesMap[i]=n.getBoundingClientRect())})),null}componentDidUpdate(t){const{idField:e,animation:i}=this.props;this.focusActiveId&&(this.focusActiveId=!1,this.itemRefsMap[this.state.activeId].focus()),i&&(this.state.isDragging||this.isKeyboardNavigated)&&(this.isKeyboardNavigated=!1,t.data.forEach((t=>{const i=t[e],s=this.itemRefsMap[i];if(!s)return;const n=s.getBoundingClientRect(),r=this.oldSizesMap[i],a=r.left-n.left,o=r.top-n.top;0===a&&0===o||requestAnimationFrame((()=>{this.animatingItemMap[i]=!0,s.style.transform=`translate(${a}px, ${o}px)`,s.style.transition="transform 0s",requestAnimationFrame((()=>{s.style.transform="",s.style.transition="transform 200ms cubic-bezier(0.2, 0, 0, 1) 0s",window.setTimeout((()=>this.animatingItemMap[i]=!1),200)}))}))})))}componentDidMount(){this.isRtl=this.container&&"rtl"===getComputedStyle(this.container).direction||!1}componentWillUnmount(){this.isUnmounted=!0}parentOffset(){const t=this.offsetParent;if(t&&t.ownerDocument&&t!==t.ownerDocument.body){const e=t.getBoundingClientRect();return{left:e.left-t.scrollLeft,top:e.top-t.scrollTop}}return{left:0,top:0}}render(){const{data:t,style:e,className:i,itemsWrapUI:s}=this.props,r=s||"div";return o.createElement(n.Draggable,{onDragStart:this.onDragStart,onDrag:this.onDragOver,onDragEnd:this.onDragEnd,ref:this.draggableRefAssign},o.createElement(r,{...w,className:i,style:{touchAction:"none",...e},onKeyDown:this.onKeyDown},t&&t.length?this.renderData():this.renderNoData(),this.renderDragCue()))}};R.defaultProps={navigation:!0,animation:!0,emptyItemUI:t=>o.createElement("div",null,t.message)},R.propTypes={idField:s.string.isRequired,disabledField:s.string,data:s.array.isRequired,tabIndex:s.number,navigation:s.bool,animation:s.bool,itemsWrapUI:s.any,itemUI:s.func.isRequired,emptyItemUI:s.func,style:s.object,className:s.string,onDragStart:s.func,onDragOver:s.func,onDragEnd:s.func,onNavigate:s.func};let C=R;r.registerForLocalization(C),t.Sortable=C,t.SortableOnDragEndEvent=g,t.SortableOnDragOverEvent=c,t.SortableOnDragStartEvent=h,t.SortableOnNavigateEvent=u}));

package/events/PreventableEvent.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});class e{constructor(){this.prevented=!1}preventDefault(){this.prevented=!0}isDefaultPrevented(){return this.prevented}}exports.PreventableEvent=e;

package/events/PreventableEvent.mjs

@@ -0,0 +1,33 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use client";
+class t {
+  constructor() {
+    this.prevented = !1;
+  }
+  /* eslint-disable max-len */
+  /**
+   * Prevents the default action for a specified event.
+   * In this way, the source component suppresses the built-in behavior that follows the event.
+   */
+  preventDefault() {
+    this.prevented = !0;
+  }
+  /**
+   * Returns `true` if the event was prevented by any of its subscribers.
+   *
+   * @returns - Returns `true` if the default action was prevented.
+   * Otherwise, returns `false`.
+   */
+  isDefaultPrevented() {
+    return this.prevented;
+  }
+}
+export {
+  t as PreventableEvent
+};

package/events/SortableOnDragEndEvent.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});class s{constructor(t,e,n,r){this.target=t,this.prevIndex=e,this.nextIndex=n,this.newState=r}}exports.SortableOnDragEndEvent=s;

package/events/SortableOnDragEndEvent.mjs

@@ -0,0 +1,19 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use client";
+class a {
+  /**
+   * @hidden
+   */
+  constructor(t, e, n, s) {
+    this.target = t, this.prevIndex = e, this.nextIndex = n, this.newState = s;
+  }
+}
+export {
+  a as SortableOnDragEndEvent
+};

package/events/SortableOnDragOverEvent.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});class s{constructor(e,t,r,n){this.target=e,this.prevIndex=t,this.nextIndex=r,this.newState=n}}exports.SortableOnDragOverEvent=s;

package/events/SortableOnDragOverEvent.mjs

@@ -0,0 +1,19 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use client";
+class a {
+  /**
+   * @hidden
+   */
+  constructor(t, e, n, r) {
+    this.target = t, this.prevIndex = e, this.nextIndex = n, this.newState = r;
+  }
+}
+export {
+  a as SortableOnDragOverEvent
+};

package/events/SortableOnDragStartEvent.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("./PreventableEvent.js");class a extends n.PreventableEvent{constructor(e,t,r){super(),this.target=e,this.prevIndex=t,this.element=r}}exports.SortableOnDragStartEvent=a;

package/events/SortableOnDragStartEvent.mjs

@@ -0,0 +1,20 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use client";
+import { PreventableEvent as n } from "./PreventableEvent.mjs";
+class o extends n {
+  /**
+   * @hidden
+   */
+  constructor(e, t, r) {
+    super(), this.target = e, this.prevIndex = t, this.element = r;
+  }
+}
+export {
+  o as SortableOnDragStartEvent
+};

package/events/SortableOnNavigateEvent.js

@@ -0,0 +1,8 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});class i{constructor(t,e,n,a){this.target=t,this.prevIndex=e,this.nextIndex=n,this.newState=a}}exports.SortableOnNavigateEvent=i;

package/events/SortableOnNavigateEvent.mjs

@@ -0,0 +1,19 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2024 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+"use client";
+class i {
+  /**
+   * @hidden
+   */
+  constructor(t, e, n, s) {
+    this.target = t, this.prevIndex = e, this.nextIndex = n, this.newState = s;
+  }
+}
+export {
+  i as SortableOnNavigateEvent
+};