@progress/kendo-react-sortable 7.0.3-develop.9 → 7.1.0-develop.1

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

@@ -2,4 +2,4 @@
 * 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<"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,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"})});
+(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"})});

package/index.mjs

@@ -100,7 +100,7 @@ const S = "sortable.noData", W = {
   name: "@progress/kendo-react-sortable",
   productName: "KendoReact",
   productCodes: ["KENDOUIREACT", "KENDOUICOMPLETE"],
-  publishDate: 1704453907,
+  publishDate: 1705312580,
   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,6 +1,6 @@
 {
   "name": "@progress/kendo-react-sortable",
-  "version": "7.0.3-develop.9",
+  "version": "7.1.0-develop.1",
   "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",
@@ -23,8 +23,8 @@
   "sideEffects": false,
   "peerDependencies": {
     "@progress/kendo-licensing": "^1.3.4",
-    "@progress/kendo-react-common": "7.0.3-develop.9",
-    "@progress/kendo-react-intl": "7.0.3-develop.9",
+    "@progress/kendo-react-common": "7.1.0-develop.1",
+    "@progress/kendo-react-intl": "7.1.0-develop.1",
     "react": "^16.8.2 || ^17.0.0 || ^18.0.0",
     "react-dom": "^16.8.2 || ^17.0.0 || ^18.0.0"
   },