@progress/kendo-react-sortable 7.0.0-develop.9 → 7.0.0

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

@@ -2,4 +2,4 @@
 * Copyright © 2023 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<"u"?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<"u"?globalThis:h||self,D(h.KendoReactSortable={},h.React,h.ReactDOM,h.PropTypes,h.KendoReactCommon,h.KendoReactIntl))})(this,function(h,D,B,F,u,T){"use strict";function w(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=w(D),_=w(B),g=w(F);class L{constructor(){this.prevented=!1}preventDefault(){this.prevented=!0}isDefaultPrevented(){return this.prevented}}class R extends L{constructor(i,t,e){super(),this.target=i,this.prevIndex=t,this.element=e}}class N{constructor(i,t,e,s){this.target=i,this.prevIndex=t,this.nextIndex=e,this.newState=s}}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}}const x="sortable.noData",X={[x]:"No Data"},z=(r,i)=>{for(let t=0;t<r.length;t++)if(i(r[t]))return r[t]},C=(r,i)=>{for(let t=0;t<r.length;t++)if(i(r[t]))return t;return-1},M=r=>String(r).trim().split(" "),Y=(r,i)=>{const t=M(i);return!!M(r.className).find(e=>t.indexOf(e)>=0)},q=/^(?:a|input|select|option|textarea|button|object)$/i,W=r=>{if(r.tagName){const i=r.tagName.toLowerCase(),t=r.getAttribute("tabIndex"),e=t==="-1";let s=t!==null&&!e;return q.test(i)&&(s=!r.disabled&&!e),s}return!1},k=(r,i)=>{for(;r&&!i(r);)r=r.parentNode;return r},j=u.hasRelativeStackingContext(),H=r=>{if(!r||!j)return null;let i=r.parentElement;for(;i;){if(window.getComputedStyle(i).transform!=="none")return i;i=i.parentElement}},G={name:"@progress/kendo-react-sortable",productName:"KendoReact",productCodes:["KENDOUIREACT","KENDOUICOMPLETE"],publishDate:0,version:"",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"},P=200,S="data-sortable-id",U="data-sortable-component",$={[U]:!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(U),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=u.getter(s);return z(e,a=>this.idComparer(n(a),t))},this.findIndex=t=>{const{data:e,idField:s}=this.props;return t+""?C(e,n=>this.idComparer(n[s],t)):-1},this.isItemDisabled=t=>t&&t[this.props.disabledField||""]===!0,this.shouldResetActive=()=>{const t=u.getActiveElement(document);return t instanceof HTMLElement?!this.closestSortableItem(t).element:!1},this.widgetTarget=t=>{const e=k(t,s=>Y(s,"k-widget")||this.isSortable(s));return e&&!this.isSortable(e)},this.allowDrag=t=>t.hasAttribute(S)||!(W(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 R(this,this.findIndex(a),n);s&&s.call(void 0,o),this.isDragPrevented=o.isDefaultPrevented(),this.isDragPrevented?e.originalEvent.preventDefault():(this.offsetParent=H(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 p=new N(this,a,o,this.generateNewState(a,o));s.call(void 0,p)}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 p=this.generateNewState(d,o);if(!f){const m=this.thresholdRect(c.element);if(m&&(e.clientX<m.left||e.clientX>m.right||e.clientY<m.top||e.clientY>m.bottom)){const y=d;d=o,o=y,p=this.props.data.slice()}}const b=new O(this,d,o,p);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(m=>m instanceof HTMLElement&&m.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,p=d+c,b=f+l;return{top:d,left:f,bottom:p,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=C(o,v=>this.idComparer(v[s],l)),f=o.length-1;let p=d;switch(t.keyCode===u.Keys.left&&(c?t.keyCode=u.Keys.down:t.keyCode=u.Keys.up),t.keyCode===u.Keys.right&&(c?t.keyCode=u.Keys.up:t.keyCode=u.Keys.down),t.keyCode){case u.Keys.up:d>0&&(p=d-1);break;case u.Keys.down:d<f&&(p=d+1);break}if(p===d)return;t.stopPropagation(),t.preventDefault();const b=o[p],m=b?b[s]:"",y=o[d],V=y?y[s]:"";if(t.ctrlKey){if(n){const v=this.findIndex(V),K=this.findIndex(m),J=new A(this,v,K,this.generateNewState(v,K));this.isKeyboardNavigated=!0,n.call(void 0,J)}}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:n}=this.props;return t.map(a=>{const c=u.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:u.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=T.provideLocalizationService(this).toLanguageString(x,X[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},u.validatePackage(G)}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 ${P}ms cubic-bezier(0.2, 0, 0, 1) 0s`,window.setTimeout(()=>this.animatingItemMap[n]=!1,P)})})}))}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(u.Draggable,{onDragStart:this.onDragStart,onDrag:this.onDragOver,onDragEnd:this.onDragEnd,ref:this.draggableRefAssign},I.createElement(n,{...$,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:g.string.isRequired,disabledField:g.string,data:g.array.isRequired,tabIndex:g.number,navigation:g.bool,animation:g.bool,itemsWrapUI:g.any,itemUI:g.func.isRequired,emptyItemUI:g.func,style:g.object,className:g.string,onDragStart:g.func,onDragOver:g.func,onDragEnd:g.func,onNavigate:g.func},T.registerForLocalization(E),h.Sortable=E,h.SortableOnDragEndEvent=O,h.SortableOnDragOverEvent=N,h.SortableOnDragStartEvent=R,h.SortableOnNavigateEvent=A,Object.defineProperty(h,Symbol.toStringTag,{value:"Module"})});
+(function(h,D){typeof exports=="object"&&typeof module<"u"?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<"u"?globalThis:h||self,D(h.KendoReactSortable={},h.React,h.ReactDOM,h.PropTypes,h.KendoReactCommon,h.KendoReactIntl))})(this,function(h,D,B,F,u,T){"use strict";"use client";function w(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=w(D),_=w(B),g=w(F);class L{constructor(){this.prevented=!1}preventDefault(){this.prevented=!0}isDefaultPrevented(){return this.prevented}}class R extends L{constructor(i,t,e){super(),this.target=i,this.prevIndex=t,this.element=e}}class N{constructor(i,t,e,s){this.target=i,this.prevIndex=t,this.nextIndex=e,this.newState=s}}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}}const x="sortable.noData",X={[x]:"No Data"},z=(r,i)=>{for(let t=0;t<r.length;t++)if(i(r[t]))return r[t]},C=(r,i)=>{for(let t=0;t<r.length;t++)if(i(r[t]))return t;return-1},M=r=>String(r).trim().split(" "),Y=(r,i)=>{const t=M(i);return!!M(r.className).find(e=>t.indexOf(e)>=0)},q=/^(?:a|input|select|option|textarea|button|object)$/i,W=r=>{if(r.tagName){const i=r.tagName.toLowerCase(),t=r.getAttribute("tabIndex"),e=t==="-1";let s=t!==null&&!e;return q.test(i)&&(s=!r.disabled&&!e),s}return!1},k=(r,i)=>{for(;r&&!i(r);)r=r.parentNode;return r},j=u.hasRelativeStackingContext(),H=r=>{if(!r||!j)return null;let i=r.parentElement;for(;i;){if(window.getComputedStyle(i).transform!=="none")return i;i=i.parentElement}},G={name:"@progress/kendo-react-sortable",productName:"KendoReact",productCodes:["KENDOUIREACT","KENDOUICOMPLETE"],publishDate:0,version:"",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"},P=200,S="data-sortable-id",U="data-sortable-component",$={[U]:!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(U),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=u.getter(s);return z(e,a=>this.idComparer(n(a),t))},this.findIndex=t=>{const{data:e,idField:s}=this.props;return t+""?C(e,n=>this.idComparer(n[s],t)):-1},this.isItemDisabled=t=>t&&t[this.props.disabledField||""]===!0,this.shouldResetActive=()=>{const t=u.getActiveElement(document);return t instanceof HTMLElement?!this.closestSortableItem(t).element:!1},this.widgetTarget=t=>{const e=k(t,s=>Y(s,"k-widget")||this.isSortable(s));return e&&!this.isSortable(e)},this.allowDrag=t=>t.hasAttribute(S)||!(W(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 R(this,this.findIndex(a),n);s&&s.call(void 0,o),this.isDragPrevented=o.isDefaultPrevented(),this.isDragPrevented?e.originalEvent.preventDefault():(this.offsetParent=H(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 p=new N(this,a,o,this.generateNewState(a,o));s.call(void 0,p)}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 p=this.generateNewState(d,o);if(!f){const m=this.thresholdRect(c.element);if(m&&(e.clientX<m.left||e.clientX>m.right||e.clientY<m.top||e.clientY>m.bottom)){const y=d;d=o,o=y,p=this.props.data.slice()}}const b=new O(this,d,o,p);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(m=>m instanceof HTMLElement&&m.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,p=d+c,b=f+l;return{top:d,left:f,bottom:p,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=C(o,v=>this.idComparer(v[s],l)),f=o.length-1;let p=d;switch(t.keyCode===u.Keys.left&&(c?t.keyCode=u.Keys.down:t.keyCode=u.Keys.up),t.keyCode===u.Keys.right&&(c?t.keyCode=u.Keys.up:t.keyCode=u.Keys.down),t.keyCode){case u.Keys.up:d>0&&(p=d-1);break;case u.Keys.down:d<f&&(p=d+1);break}if(p===d)return;t.stopPropagation(),t.preventDefault();const b=o[p],m=b?b[s]:"",y=o[d],V=y?y[s]:"";if(t.ctrlKey){if(n){const v=this.findIndex(V),K=this.findIndex(m),J=new A(this,v,K,this.generateNewState(v,K));this.isKeyboardNavigated=!0,n.call(void 0,J)}}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:n}=this.props;return t.map(a=>{const c=u.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:u.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=T.provideLocalizationService(this).toLanguageString(x,X[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},u.validatePackage(G)}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 ${P}ms cubic-bezier(0.2, 0, 0, 1) 0s`,window.setTimeout(()=>this.animatingItemMap[n]=!1,P)})})}))}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(u.Draggable,{onDragStart:this.onDragStart,onDrag:this.onDragOver,onDragEnd:this.onDragEnd,ref:this.draggableRefAssign},I.createElement(n,{...$,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:g.string.isRequired,disabledField:g.string,data:g.array.isRequired,tabIndex:g.number,navigation:g.bool,animation:g.bool,itemsWrapUI:g.any,itemUI:g.func.isRequired,emptyItemUI:g.func,style:g.object,className:g.string,onDragStart:g.func,onDragOver:g.func,onDragEnd:g.func,onNavigate:g.func},T.registerForLocalization(E),h.Sortable=E,h.SortableOnDragEndEvent=O,h.SortableOnDragOverEvent=N,h.SortableOnDragStartEvent=R,h.SortableOnNavigateEvent=A,Object.defineProperty(h,Symbol.toStringTag,{value:"Module"})});

package/index.js

@@ -2,4 +2,4 @@
 * Copyright © 2023 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------*/
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const B=require("react"),F=require("react-dom"),K=require("prop-types"),u=require("@progress/kendo-react-common"),N=require("@progress/kendo-react-intl");function R(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 p=R(B),_=R(F),h=R(K);class L{constructor(){this.prevented=!1}preventDefault(){this.prevented=!0}isDefaultPrevented(){return this.prevented}}class T 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 M{constructor(i,t,e,s){this.target=i,this.prevIndex=t,this.nextIndex=e,this.newState=s}}const E="sortable.noData",X={[E]:"No Data"},z=(r,i)=>{for(let t=0;t<r.length;t++)if(i(r[t]))return r[t]},C=(r,i)=>{for(let t=0;t<r.length;t++)if(i(r[t]))return t;return-1},x=r=>String(r).trim().split(" "),Y=(r,i)=>{const t=x(i);return!!x(r.className).find(e=>t.indexOf(e)>=0)},q=/^(?:a|input|select|option|textarea|button|object)$/i,W=r=>{if(r.tagName){const i=r.tagName.toLowerCase(),t=r.getAttribute("tabIndex"),e=t==="-1";let s=t!==null&&!e;return q.test(i)&&(s=!r.disabled&&!e),s}return!1},H=(r,i)=>{for(;r&&!i(r);)r=r.parentNode;return r},j=u.hasRelativeStackingContext(),G=r=>{if(!r||!j)return null;let i=r.parentElement;for(;i;){if(window.getComputedStyle(i).transform!=="none")return i;i=i.parentElement}},$={name:"@progress/kendo-react-sortable",productName:"KendoReact",productCodes:["KENDOUIREACT","KENDOUICOMPLETE"],publishDate:0,version:"",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"},w=200,D="data-sortable-id",P="data-sortable-component",V={[P]:!0};class S extends p.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(D);if(s&&this.itemRefsMap[s]===e)return{id:s,element:e};e=e.parentElement}return{id:"",element:null}},this.isSortable=t=>!!t.hasAttribute(P),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=u.getter(s);return z(e,a=>this.idComparer(n(a),t))},this.findIndex=t=>{const{data:e,idField:s}=this.props;return t+""?C(e,n=>this.idComparer(n[s],t)):-1},this.isItemDisabled=t=>t&&t[this.props.disabledField||""]===!0,this.shouldResetActive=()=>{const t=u.getActiveElement(document);return t instanceof HTMLElement?!this.closestSortableItem(t).element:!1},this.widgetTarget=t=>{const e=H(t,s=>Y(s,"k-widget")||this.isSortable(s));return e&&!this.isSortable(e)},this.allowDrag=t=>t.hasAttribute(D)||!(W(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 T(this,this.findIndex(a),n);s&&s.call(void 0,o),this.isDragPrevented=o.isDefaultPrevented(),this.isDragPrevented?e.originalEvent.preventDefault():(this.offsetParent=G(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 f=new O(this,a,o,this.generateNewState(a,o));s.call(void 0,f)}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: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 g=this.isItemDisabled(a[o]);if((o===-1||g)&&(o=d),n){let f=this.generateNewState(d,o);if(!g){const m=this.thresholdRect(c.element);if(m&&(e.clientX<m.left||e.clientX>m.right||e.clientY<m.top||e.clientY>m.bottom)){const v=d;d=o,o=v,f=this.props.data.slice()}}const I=new A(this,d,o,f);n.call(void 0,I)}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(m=>m instanceof HTMLElement&&m.getAttribute(D)===e);if(!t||!a)return null;const{width:l,height:c}=a.getBoundingClientRect(),o=t.getBoundingClientRect(),d=o.top+o.height/2-c/2,g=o.left+o.width/2-l/2,f=d+c,I=g+l;return{top:d,left:g,bottom:f,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:n,navigation:a}=this.props,{activeId:l}=this.state;if(!a||!l||!this.isSameSortable(t.target))return;const c=this.isRtl,o=e.filter(b=>!this.isItemDisabled(b)),d=C(o,b=>this.idComparer(b[s],l)),g=o.length-1;let f=d;switch(t.keyCode===u.Keys.left&&(c?t.keyCode=u.Keys.down:t.keyCode=u.Keys.up),t.keyCode===u.Keys.right&&(c?t.keyCode=u.Keys.up:t.keyCode=u.Keys.down),t.keyCode){case u.Keys.up:d>0&&(f=d-1);break;case u.Keys.down:d<g&&(f=d+1);break}if(f===d)return;t.stopPropagation(),t.preventDefault();const I=o[f],m=I?I[s]:"",v=o[d],U=v?v[s]:"";if(t.ctrlKey){if(n){const b=this.findIndex(U),y=this.findIndex(m),k=new M(this,b,y,this.generateNewState(b,y));this.isKeyboardNavigated=!0,n.call(void 0,k)}}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:n}=this.props;return t.map(a=>{const c=u.getter(s)(a),o=this.isItemDisabled(a),d=this.idComparer(this.state.activeId,c);return p.createElement(e,{key:c,forwardRef:g=>this.refAssign(g,c),dataItem:a,isDisabled:o,isActive:d,isDragged:d&&this.state.isDragging,isDragCue:!1,attributes:{[D]:c,["aria-disabled"]:o,["aria-grabbed"]:d&&this.state.isDragging&&!this.isDragPrevented,["aria-dropeffect"]:o?"none":"move",tabIndex:u.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=N.provideLocalizationService(this).toLanguageString(E,X[E]);if(t)return p.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 p.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},u.validatePackage($)}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 ${w}ms cubic-bezier(0.2, 0, 0, 1) 0s`,window.setTimeout(()=>this.animatingItemMap[n]=!1,w)})})}))}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 p.createElement(u.Draggable,{onDragStart:this.onDragStart,onDrag:this.onDragOver,onDragEnd:this.onDragEnd,ref:this.draggableRefAssign},p.createElement(n,{...V,className:e,style:{touchAction:"none",...t},onKeyDown:this.onKeyDown},i&&i.length?this.renderData():this.renderNoData(),this.renderDragCue()))}}S.defaultProps={navigation:!0,animation:!0,emptyItemUI:r=>p.createElement("div",null,r.message)};S.propTypes={idField:h.string.isRequired,disabledField:h.string,data:h.array.isRequired,tabIndex:h.number,navigation:h.bool,animation:h.bool,itemsWrapUI:h.any,itemUI:h.func.isRequired,emptyItemUI:h.func,style:h.object,className:h.string,onDragStart:h.func,onDragOver:h.func,onDragEnd:h.func,onNavigate:h.func};N.registerForLocalization(S);exports.Sortable=S;exports.SortableOnDragEndEvent=A;exports.SortableOnDragOverEvent=O;exports.SortableOnDragStartEvent=T;exports.SortableOnNavigateEvent=M;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const B=require("react"),F=require("react-dom"),K=require("prop-types"),u=require("@progress/kendo-react-common"),N=require("@progress/kendo-react-intl");function R(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 p=R(B),_=R(F),h=R(K);class L{constructor(){this.prevented=!1}preventDefault(){this.prevented=!0}isDefaultPrevented(){return this.prevented}}class T 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 M{constructor(i,t,e,s){this.target=i,this.prevIndex=t,this.nextIndex=e,this.newState=s}}const E="sortable.noData",X={[E]:"No Data"},z=(r,i)=>{for(let t=0;t<r.length;t++)if(i(r[t]))return r[t]},C=(r,i)=>{for(let t=0;t<r.length;t++)if(i(r[t]))return t;return-1},x=r=>String(r).trim().split(" "),Y=(r,i)=>{const t=x(i);return!!x(r.className).find(e=>t.indexOf(e)>=0)},q=/^(?:a|input|select|option|textarea|button|object)$/i,W=r=>{if(r.tagName){const i=r.tagName.toLowerCase(),t=r.getAttribute("tabIndex"),e=t==="-1";let s=t!==null&&!e;return q.test(i)&&(s=!r.disabled&&!e),s}return!1},H=(r,i)=>{for(;r&&!i(r);)r=r.parentNode;return r},j=u.hasRelativeStackingContext(),G=r=>{if(!r||!j)return null;let i=r.parentElement;for(;i;){if(window.getComputedStyle(i).transform!=="none")return i;i=i.parentElement}},$={name:"@progress/kendo-react-sortable",productName:"KendoReact",productCodes:["KENDOUIREACT","KENDOUICOMPLETE"],publishDate:0,version:"",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"},w=200,D="data-sortable-id",P="data-sortable-component",V={[P]:!0};class S extends p.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(D);if(s&&this.itemRefsMap[s]===e)return{id:s,element:e};e=e.parentElement}return{id:"",element:null}},this.isSortable=t=>!!t.hasAttribute(P),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=u.getter(s);return z(e,a=>this.idComparer(n(a),t))},this.findIndex=t=>{const{data:e,idField:s}=this.props;return t+""?C(e,n=>this.idComparer(n[s],t)):-1},this.isItemDisabled=t=>t&&t[this.props.disabledField||""]===!0,this.shouldResetActive=()=>{const t=u.getActiveElement(document);return t instanceof HTMLElement?!this.closestSortableItem(t).element:!1},this.widgetTarget=t=>{const e=H(t,s=>Y(s,"k-widget")||this.isSortable(s));return e&&!this.isSortable(e)},this.allowDrag=t=>t.hasAttribute(D)||!(W(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 T(this,this.findIndex(a),n);s&&s.call(void 0,o),this.isDragPrevented=o.isDefaultPrevented(),this.isDragPrevented?e.originalEvent.preventDefault():(this.offsetParent=G(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 f=new O(this,a,o,this.generateNewState(a,o));s.call(void 0,f)}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: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 g=this.isItemDisabled(a[o]);if((o===-1||g)&&(o=d),n){let f=this.generateNewState(d,o);if(!g){const m=this.thresholdRect(c.element);if(m&&(e.clientX<m.left||e.clientX>m.right||e.clientY<m.top||e.clientY>m.bottom)){const v=d;d=o,o=v,f=this.props.data.slice()}}const I=new A(this,d,o,f);n.call(void 0,I)}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(m=>m instanceof HTMLElement&&m.getAttribute(D)===e);if(!t||!a)return null;const{width:l,height:c}=a.getBoundingClientRect(),o=t.getBoundingClientRect(),d=o.top+o.height/2-c/2,g=o.left+o.width/2-l/2,f=d+c,I=g+l;return{top:d,left:g,bottom:f,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:n,navigation:a}=this.props,{activeId:l}=this.state;if(!a||!l||!this.isSameSortable(t.target))return;const c=this.isRtl,o=e.filter(b=>!this.isItemDisabled(b)),d=C(o,b=>this.idComparer(b[s],l)),g=o.length-1;let f=d;switch(t.keyCode===u.Keys.left&&(c?t.keyCode=u.Keys.down:t.keyCode=u.Keys.up),t.keyCode===u.Keys.right&&(c?t.keyCode=u.Keys.up:t.keyCode=u.Keys.down),t.keyCode){case u.Keys.up:d>0&&(f=d-1);break;case u.Keys.down:d<g&&(f=d+1);break}if(f===d)return;t.stopPropagation(),t.preventDefault();const I=o[f],m=I?I[s]:"",v=o[d],U=v?v[s]:"";if(t.ctrlKey){if(n){const b=this.findIndex(U),y=this.findIndex(m),k=new M(this,b,y,this.generateNewState(b,y));this.isKeyboardNavigated=!0,n.call(void 0,k)}}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:n}=this.props;return t.map(a=>{const c=u.getter(s)(a),o=this.isItemDisabled(a),d=this.idComparer(this.state.activeId,c);return p.createElement(e,{key:c,forwardRef:g=>this.refAssign(g,c),dataItem:a,isDisabled:o,isActive:d,isDragged:d&&this.state.isDragging,isDragCue:!1,attributes:{[D]:c,["aria-disabled"]:o,["aria-grabbed"]:d&&this.state.isDragging&&!this.isDragPrevented,["aria-dropeffect"]:o?"none":"move",tabIndex:u.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=N.provideLocalizationService(this).toLanguageString(E,X[E]);if(t)return p.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 p.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},u.validatePackage($)}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 ${w}ms cubic-bezier(0.2, 0, 0, 1) 0s`,window.setTimeout(()=>this.animatingItemMap[n]=!1,w)})})}))}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 p.createElement(u.Draggable,{onDragStart:this.onDragStart,onDrag:this.onDragOver,onDragEnd:this.onDragEnd,ref:this.draggableRefAssign},p.createElement(n,{...V,className:e,style:{touchAction:"none",...t},onKeyDown:this.onKeyDown},i&&i.length?this.renderData():this.renderNoData(),this.renderDragCue()))}}S.defaultProps={navigation:!0,animation:!0,emptyItemUI:r=>p.createElement("div",null,r.message)};S.propTypes={idField:h.string.isRequired,disabledField:h.string,data:h.array.isRequired,tabIndex:h.number,navigation:h.bool,animation:h.bool,itemsWrapUI:h.any,itemUI:h.func.isRequired,emptyItemUI:h.func,style:h.object,className:h.string,onDragStart:h.func,onDragOver:h.func,onDragEnd:h.func,onNavigate:h.func};N.registerForLocalization(S);exports.Sortable=S;exports.SortableOnDragEndEvent=A;exports.SortableOnDragOverEvent=O;exports.SortableOnDragStartEvent=T;exports.SortableOnNavigateEvent=M;

package/index.mjs

@@ -2,6 +2,7 @@
 * Copyright © 2023 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------*/
+"use client";
 import * as p from "react";
 import * as U from "react-dom";
 import * as h from "prop-types";
@@ -99,7 +100,7 @@ const S = "sortable.noData", W = {
   name: "@progress/kendo-react-sortable",
   productName: "KendoReact",
   productCodes: ["KENDOUIREACT", "KENDOUICOMPLETE"],
-  publishDate: 1701354751,
+  publishDate: 1702304871,
   version: "",
   licensingDocsUrl: "https://www.telerik.com/kendo-react-ui/components/my-license/"
 }, y = 200, D = "data-sortable-id", A = "data-sortable-component", Z = { [A]: !0 };

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "@progress/kendo-react-sortable",
-  "version": "7.0.0-develop.9",
+  "version": "7.0.0",
   "description": "React Sortable provides a sortable drag-and-drop functionality to elements within a list. KendoReact Sortable package",
   "author": "Progress",
   "license": "SEE LICENSE IN LICENSE.md",
   "homepage": "https://www.telerik.com/kendo-react-ui",
   "main": "./index.js",
+  "module": "./index.mjs",
   "types": "./index.d.ts",
   "exports": {
     ".": {
@@ -16,8 +17,8 @@
   "sideEffects": false,
   "peerDependencies": {
     "@progress/kendo-licensing": "^1.3.0",
-    "@progress/kendo-react-common": "7.0.0-develop.9",
-    "@progress/kendo-react-intl": "7.0.0-develop.9",
+    "@progress/kendo-react-common": "7.0.0",
+    "@progress/kendo-react-intl": "7.0.0",
     "react": "^16.8.2 || ^17.0.0 || ^18.0.0",
     "react-dom": "^16.8.2 || ^17.0.0 || ^18.0.0"
   },