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

package/Sortable.js

@@ -5,4 +5,4 @@
  * 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 M=require("react"),d=require("prop-types"),h=require("@progress/kendo-react-common"),N=require("./events/SortableOnDragStartEvent.js"),P=require("./events/SortableOnDragOverEvent.js"),U=require("./events/SortableOnDragEndEvent.js"),B=require("./events/SortableOnNavigateEvent.js"),x=require("@progress/kendo-react-intl"),R=require("./messages/index.js"),f=require("./utils/utils.js"),F=require("./package-metadata.js");function k(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=k(M),w=200,S="data-sortable-id",A="data-sortable-component",q={[A]:!0},y=class y 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,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(S);if(i&&this.itemRefsMap[i]===e)return{id:i,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:i}=this.props;if(!(t+""))return;const s=h.getter(i);return f.find(e,a=>this.idComparer(s(a),t))},this.findIndex=t=>{const{data:e,idField:i}=this.props;return t+""?f.findIndex(e,s=>this.idComparer(s[i],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,i=>f.hasClasses(i,"k-widget")||this.isSortable(i));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:i}=this.props,s=document.elementFromPoint(e.clientX,e.clientY),{id:a,element:r}=this.closestSortableItem(s),o=this.findItem(a);if(!a||o&&this.isItemDisabled(o)||!this.allowDrag(s)||!this.isSameSortable(s)){this.isDragPrevented=!0;return}e.isTouch&&e.originalEvent.preventDefault();const n=new N.SortableOnDragStartEvent(this,this.findIndex(a),s);i&&i.call(void 0,n),this.isDragPrevented=n.isDefaultPrevented(),this.isDragPrevented?e.originalEvent.preventDefault():(this.offsetParent=f.relativeContextElement(this.container),this.setState({activeId:a,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 a=this.findIndex(this.state.activeId);if(a===-1){this.resetState();return}const r=document.elementFromPoint(e.clientX,e.clientY),o=this.closestSortableItem(r),n=this.findIndex(o.id),l=s[n];if(i&&n>-1&&a!==n&&!this.isItemDisabled(l)&&!this.animatingItemMap[o.id]&&this.shouldReorder(o.element,e.clientX,e.clientY)){const u=new P.SortableOnDragOverEvent(this,a,n,this.generateNewState(a,n));i.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,i=this.shouldResetActive();if(this.isDragPrevented)return;const{onDragEnd:s,data:a}=this.props,r=document.elementFromPoint(e.clientX,e.clientY),o=this.closestSortableItem(r);let n=this.findIndex(o.id),l=this.findIndex(this.state.activeId);const g=this.isItemDisabled(a[n]);if((n===-1||g)&&(n=l),s){let u=this.generateNewState(l,n);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=n,n=D,u=this.props.data.slice()}}const I=new U.SortableOnDragEndEvent(this,l,n,u);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,a=(i?Array.from(i.childNodes):[]).find(m=>m instanceof HTMLElement&&m.getAttribute(S)===e);if(!t||!a)return null;const{width:r,height:o}=a.getBoundingClientRect(),n=t.getBoundingClientRect(),l=n.top+n.height/2-o/2,g=n.left+n.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: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:a}=this.props,{activeId:r}=this.state;if(!a||!r||!this.isSameSortable(t.target))return;const o=this.isRtl,n=e.filter(b=>!this.isItemDisabled(b)),l=f.findIndex(n,b=>this.idComparer(b[i],r)),g=n.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=n[u],m=I?I[i]:"",D=n[l],T=D?D[i]:"";if(t.ctrlKey){if(s){const b=this.findIndex(T),C=this.findIndex(m),O=new B.SortableOnNavigateEvent(this,b,C,this.generateNewState(b,C));this.isKeyboardNavigated=!0,s.call(void 0,O)}}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(a=>{const o=h.getter(i)(a),n=this.isItemDisabled(a),l=this.idComparer(this.state.activeId,o);return p.createElement(e,{key:o,forwardRef:g=>this.refAssign(g,o),dataItem:a,isDisabled:n,isActive:l,isDragged:l&&this.state.isDragging,isDragCue:!1,attributes:{[S]:o,"aria-disabled":n,"aria-grabbed":l&&this.state.isDragging&&!this.isDragPrevented,"aria-dropeffect":n?"none":"move",tabIndex:h.getTabIndex(s,n),onFocus:this.onItemFocus,onBlur:this.onItemBlur},style:{cursor:n?"auto":"move",MozUserSelect:"none",msUserSelect:"none",WebkitUserSelect:"none",userSelect:"none"}})})},this.renderNoData=()=>{const{emptyItemUI:t}=this.props,i=x.provideLocalizationService(this).toLanguageString(R.noData,R.messages[R.noData]);if(t)return p.createElement(t,{message:i})},this.renderDragCue=()=>{const{itemUI:t}=this.props,{isDragging:e,activeId:i,clientX:s,clientY:a}=this.state,r=this.findItem(i);if(!(!e||!r))return p.createElement(t,{dataItem:r,isDisabled:!1,isActive:!0,isDragged:!0,isDragCue:!0,style:{position:"fixed",top:a+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},h.validatePackage(F.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 i=e[c],s=this.itemRefsMap[i];s&&(this.oldSizesMap[i]=s.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(i=>{const s=i[t],a=this.itemRefsMap[s];if(!a)return;const r=a.getBoundingClientRect(),o=this.oldSizesMap[s],n=o.left-r.left,l=o.top-r.top;n===0&&l===0||requestAnimationFrame(()=>{this.animatingItemMap[s]=!0,a.style.transform=`translate(${n}px, ${l}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[s]=!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:i}=this.props,s=i||"div";return p.createElement(h.Draggable,{onDragStart:this.onDragStart,onDrag:this.onDragOver,onDragEnd:this.onDragEnd,ref:this.draggableRefAssign},p.createElement(s,{...q,className:e,style:{touchAction:"none",...t},onKeyDown:this.onKeyDown},c&&c.length?this.renderData():this.renderNoData(),this.renderDragCue()))}};y.defaultProps={navigation:!0,animation:!0,emptyItemUI:c=>p.createElement("div",null,c.message)},y.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=y;x.registerForLocalization(E);exports.Sortable=E;
+"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const N=require("react"),g=require("prop-types"),m=require("@progress/kendo-react-common"),P=require("./events/SortableOnDragStartEvent.js"),M=require("./events/SortableOnDragOverEvent.js"),U=require("./events/SortableOnDragEndEvent.js"),F=require("./events/SortableOnNavigateEvent.js"),T=require("@progress/kendo-react-intl"),R=require("./messages/index.js"),p=require("./utils/utils.js"),B=require("./package-metadata.js");function q(b){const c=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(b){for(const t in b)if(t!=="default"){const e=Object.getOwnPropertyDescriptor(b,t);Object.defineProperty(c,t,e.get?e:{enumerable:!0,get:()=>b[t]})}}return c.default=b,Object.freeze(c)}const v=q(N),A=200,D="data-sortable-id",C="data-sortable-component",w="[data-sortable-id]:not(.k-disabled)",k={[C]:!0},E=class E extends v.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)=>{const 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 n=t-1;n>=e;n--){const o=i[n];this.isItemDisabled(o)||(t=this.swapItems(s,t,n))}else for(let n=t+1;n<=e;n++){const o=i[n];this.isItemDisabled(o)||(t=this.swapItems(s,t,n))}return s},this.closestSortableItem=t=>{let e=t;for(;e;){const i=e.getAttribute(D);if(i&&this.itemRefsMap[i]===e)return{id:i,element:e};e=e.parentElement}return{id:"",element:null}},this.isSortable=t=>!!t.hasAttribute(C),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=m.getter(i);return p.find(e,a=>this.idComparer(s(a),t))},this.findIndex=t=>{const{data:e,idField:i}=this.props;return t+""?p.findIndex(e,s=>this.idComparer(s[i],t)):-1},this.isItemDisabled=t=>t&&t[this.props.disabledField||""]===!0,this.shouldResetActive=()=>{const t=m.getActiveElement(document);return t instanceof HTMLElement?!this.closestSortableItem(t).element:!1},this.widgetTarget=t=>{const e=p.closest(t,i=>p.hasClasses(i,"k-widget")||this.isSortable(i));return e&&!this.isSortable(e)},this.allowDrag=t=>t.hasAttribute(D)||!(p.isFocusable(t)||this.widgetTarget(t)),this.onDragStart=t=>{const{event:e}=t,{onDragStart:i}=this.props,s=document.elementFromPoint(e.clientX,e.clientY),{id:a,element:n}=this.closestSortableItem(s),o=this.findItem(a);if(!a||o&&this.isItemDisabled(o)||!this.allowDrag(s)||!this.isSameSortable(s)){this.isDragPrevented=!0;return}e.isTouch&&e.originalEvent.preventDefault();const r=new P.SortableOnDragStartEvent(this,this.findIndex(a),s);i&&i.call(void 0,r),this.isDragPrevented=r.isDefaultPrevented(),this.isDragPrevented?e.originalEvent.preventDefault():(this.offsetParent=p.relativeContextElement(this.container),this.setState({activeId:a,dragCueWidth:n&&n.clientWidth||0,dragCueHeight:n&&n.clientHeight||0}))},this.onDragOver=t=>{const{event:e}=t,{onDragOver:i,data:s}=this.props;if(this.isDragPrevented)return;e.originalEvent.preventDefault();const a=this.findIndex(this.state.activeId);if(a===-1){this.resetState();return}const n=document.elementFromPoint(e.clientX,e.clientY),o=this.closestSortableItem(n),r=this.findIndex(o.id),l=s[r];if(i&&r>-1&&a!==r&&!this.isItemDisabled(l)&&!this.animatingItemMap[o.id]&&this.shouldReorder(o.element,e.clientX,e.clientY)){const h=new M.SortableOnDragOverEvent(this,a,r,this.generateNewState(a,r));i.call(void 0,h)}const d=this.parentOffset();this.setState({clientX:e.clientX-d.left,clientY:e.clientY-d.top,isDragging:!0})},this.onDragEnd=t=>{const{event:e}=t,i=this.shouldResetActive();if(this.isDragPrevented)return;const{onDragEnd:s,data:a}=this.props,n=document.elementFromPoint(e.clientX,e.clientY),o=this.closestSortableItem(n);let r=this.findIndex(o.id),l=this.findIndex(this.state.activeId);const d=this.isItemDisabled(a[r]);if((r===-1||d)&&(r=l),s){let h=this.generateNewState(l,r);if(!d){const u=this.thresholdRect(o.element);if(u&&(e.clientX<u.left||e.clientX>u.right||e.clientY<u.top||e.clientY>u.bottom)){const I=l;l=r,r=I,h=this.props.data.slice()}}const f=new U.SortableOnDragEndEvent(this,l,r,h);s.call(void 0,f)}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,a=(i?Array.from(i.childNodes):[]).find(u=>u instanceof HTMLElement&&u.getAttribute(D)===e);if(!t||!a)return null;const{width:n,height:o}=a.getBoundingClientRect(),r=t.getBoundingClientRect(),l=r.top+r.height/2-o/2,d=r.left+r.width/2-n/2,h=l+o,f=d+n;return{top:l,left:d,bottom:h,right:f}},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.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,navigatable:a}=this.props;return t.map(n=>{const r=m.getter(i)(n),l=this.isItemDisabled(n),d=this.idComparer(this.state.activeId,r),h=a?d?0:-1:s;return v.createElement(e,{key:r,forwardRef:f=>this.refAssign(f,r),dataItem:n,isDisabled:l,isActive:d,isDragged:d&&this.state.isDragging,isDragCue:!1,attributes:{[D]:r,"aria-disabled":l,"aria-grabbed":d&&this.state.isDragging&&!this.isDragPrevented,"aria-dropeffect":l?"none":"move",tabIndex:m.getTabIndex(h,l),onFocus:this.onItemFocus,onBlur:this.onItemBlur},style:{cursor:l?"auto":"move",MozUserSelect:"none",msUserSelect:"none",WebkitUserSelect:"none",userSelect:"none"}})})},this.renderNoData=()=>{const{emptyItemUI:t}=this.props,i=T.provideLocalizationService(this).toLanguageString(R.noData,R.messages[R.noData]);if(t)return v.createElement(t,{message:i})},this.renderDragCue=()=>{const{itemUI:t}=this.props,{isDragging:e,activeId:i,clientX:s,clientY:a}=this.state,n=this.findItem(i);if(!(!e||!n))return v.createElement(t,{dataItem:n,isDisabled:!1,isActive:!0,isDragged:!0,isDragCue:!0,style:{position:"fixed",top:a+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},this.onKeyDown=t=>{var r,l,d;const{data:e,idField:i}=this.props,{activeId:s}=this.state,a=e.filter(h=>!this.isItemDisabled(h)),n=p.findIndex(a,h=>this.idComparer(h[i],s)),o=n<0?0:n;t.key===m.KEYS.tab&&m.getActiveElement(document)!==((r=this.draggableRef)==null?void 0:r.element)&&(t.preventDefault(),t.stopPropagation()),this.navigation&&((l=this.draggableRef)!=null&&l.element)&&this.navigation.triggerKeyboardEvent({target:(d=this.draggableRef)==null?void 0:d.element.querySelectorAll(w)[o],key:t.key,nativeEvent:{type:t.type},originalEvent:t})},this.handleNext=(t,e,i)=>{var s;m.getActiveElement(document)!==((s=this.draggableRef)==null?void 0:s.element)&&(i.originalEvent.metaKey?this.moveItem(t,e,i,"next"):e.focusNext(t))},this.handlePrev=(t,e,i)=>{var s;m.getActiveElement(document)!==((s=this.draggableRef)==null?void 0:s.element)&&(i.originalEvent.metaKey?this.moveItem(t,e,i,"prev"):e.focusPrevious(t))},this.moveItem=(t,e,i,s)=>{var a;if(m.getActiveElement(document)!==((a=this.draggableRef)==null?void 0:a.element)){const{onNavigate:n,data:o,idField:r}=this.props,l=this.findIndex(this.state.activeId);if(n){let d,h;s==="next"?(d=o[l+1],h=d&&d.disabled?o[l+2]:o[l+1]):(d=o[l-1],h=d&&d.disabled?o[l-2]:o[l-1]);const f=h&&h[r],u=o[l],I=u?u[r]:"",y=this.findIndex(I),x=this.findIndex(f||I),O=new F.SortableOnNavigateEvent(this,y,x,this.generateNewState(y,x));this.isKeyboardNavigated=!0,n.call(void 0,O)}}},m.validatePackage(B.packageMetadata),this.onKeyDown=this.onKeyDown.bind(this)}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 i=e[c],s=this.itemRefsMap[i];s&&(this.oldSizesMap[i]=s.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(i=>{const s=i[t],a=this.itemRefsMap[s];if(!a)return;const n=a.getBoundingClientRect(),o=this.oldSizesMap[s],r=o.left-n.left,l=o.top-n.top;r===0&&l===0||requestAnimationFrame(()=>{this.animatingItemMap[s]=!0,a.style.transform=`translate(${r}px, ${l}px)`,a.style.transition="transform 0s",requestAnimationFrame(()=>{a.style.transform="",a.style.transition=`transform ${A}ms cubic-bezier(0.2, 0, 0, 1) 0s`,window.setTimeout(()=>this.animatingItemMap[s]=!1,A)})})}))}componentDidMount(){var c,t;(c=this.draggableRef)!=null&&c.element&&(this.navigation=new m.Navigation({tabIndex:0,root:{current:(t=this.draggableRef)==null?void 0:t.element},rovingTabIndex:!0,selectors:[w],keyboardEvents:{keydown:{ArrowDown:this.handleNext,ArrowRight:this.handleNext,ArrowUp:this.handlePrev,ArrowLeft:this.handlePrev,Enter:(e,i,s)=>{i.focusElement(i.first,e)},Escape:(e,i,s)=>{var a,n;e.setAttribute("tabindex","-1"),(n=(a=this.draggableRef)==null?void 0:a.element)==null||n.focus(),this.setState({activeId:""})}}}})),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:i,tabIndex:s,navigatable:a}=this.props,n=i||"div";return v.createElement(m.Draggable,{onDragStart:this.onDragStart,onDrag:this.onDragOver,onDragEnd:this.onDragEnd,ref:this.draggableRefAssign},v.createElement(n,{onKeyDown:o=>a&&this.onKeyDown(o),...k,className:e,style:{touchAction:"none",...t},tabIndex:a?s||0:void 0},c&&c.length?this.renderData():this.renderNoData(),this.renderDragCue()))}};E.defaultProps={navigation:!0,animation:!0,emptyItemUI:c=>v.createElement("div",null,c.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};let S=E;T.registerForLocalization(S);exports.Sortable=S;

package/Sortable.mjs

@@ -7,17 +7,17 @@
  */
 "use client";
 import * as u from "react";
-import d from "prop-types";
-import { getter as R, getActiveElement as N, Keys as f, getTabIndex as M, validatePackage as U, Draggable as P } from "@progress/kendo-react-common";
-import { SortableOnDragStartEvent as B } from "./events/SortableOnDragStartEvent.mjs";
-import { SortableOnDragOverEvent as F } from "./events/SortableOnDragOverEvent.mjs";
-import { SortableOnDragEndEvent as O } from "./events/SortableOnDragEndEvent.mjs";
-import { SortableOnNavigateEvent as k } from "./events/SortableOnNavigateEvent.mjs";
-import { provideLocalizationService as X, registerForLocalization as Y } from "@progress/kendo-react-intl";
-import { noData as C, messages as z } from "./messages/index.mjs";
-import { find as W, findIndex as y, closest as K, isFocusable as L, relativeContextElement as H, hasClasses as q } from "./utils/utils.mjs";
-import { packageMetadata as _ } from "./package-metadata.mjs";
-const w = 200, b = "data-sortable-id", x = "data-sortable-component", G = { [x]: !0 }, D = class D extends u.Component {
+import m from "prop-types";
+import { getter as R, getActiveElement as p, getTabIndex as N, KEYS as P, validatePackage as U, Navigation as M, Draggable as O } from "@progress/kendo-react-common";
+import { SortableOnDragStartEvent as F } from "./events/SortableOnDragStartEvent.mjs";
+import { SortableOnDragOverEvent as B } from "./events/SortableOnDragOverEvent.mjs";
+import { SortableOnDragEndEvent as K } from "./events/SortableOnDragEndEvent.mjs";
+import { SortableOnNavigateEvent as Y } from "./events/SortableOnNavigateEvent.mjs";
+import { provideLocalizationService as k, registerForLocalization as L } from "@progress/kendo-react-intl";
+import { noData as x, messages as X } from "./messages/index.mjs";
+import { find as z, findIndex as y, closest as W, isFocusable as H, relativeContextElement as _, hasClasses as q } from "./utils/utils.mjs";
+import { packageMetadata as G } from "./package-metadata.mjs";
+const A = 200, I = "data-sortable-id", T = "data-sortable-component", w = "[data-sortable-id]:not(.k-disabled)", $ = { [T]: !0 }, b = class b extends u.Component {
   constructor(c) {
     super(c), this.state = {
       clientX: 0,
@@ -27,25 +27,25 @@ const w = 200, b = "data-sortable-id", x = "data-sortable-component", G = { [x]:
       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];
+      const 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));
+        for (let n = t - 1; n >= e; n--) {
+          const o = i[n];
+          this.isItemDisabled(o) || (t = this.swapItems(s, t, n));
         }
       else
-        for (let r = t + 1; r <= e; r++) {
-          const o = i[r];
-          this.isItemDisabled(o) || (t = this.swapItems(s, t, r));
+        for (let n = t + 1; n <= e; n++) {
+          const o = i[n];
+          this.isItemDisabled(o) || (t = this.swapItems(s, t, n));
         }
       return s;
     }, this.closestSortableItem = (t) => {
       let e = t;
       for (; e; ) {
-        const i = e.getAttribute(b);
+        const i = e.getAttribute(I);
         if (i && this.itemRefsMap[i] === e)
           return {
             id: i,
@@ -57,7 +57,7 @@ const w = 200, b = "data-sortable-id", x = "data-sortable-component", G = { [x]:
         id: "",
         element: null
       };
-    }, this.isSortable = (t) => !!t.hasAttribute(x), this.closestSortable = (t) => {
+    }, this.isSortable = (t) => !!t.hasAttribute(T), this.closestSortable = (t) => {
       let e = t;
       for (; e; ) {
         if (this.isSortable(e))
@@ -70,32 +70,32 @@ const w = 200, b = "data-sortable-id", x = "data-sortable-component", G = { [x]:
       if (!(t + ""))
         return;
       const s = R(i);
-      return W(e, (a) => this.idComparer(s(a), t));
+      return z(e, (a) => this.idComparer(s(a), 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 = N(document);
+      const t = p(document);
       return t instanceof HTMLElement ? !this.closestSortableItem(t).element : !1;
     }, this.widgetTarget = (t) => {
-      const e = K(t, (i) => q(i, "k-widget") || this.isSortable(i));
+      const e = W(t, (i) => q(i, "k-widget") || this.isSortable(i));
       return e && !this.isSortable(e);
-    }, this.allowDrag = (t) => t.hasAttribute(b) || !(L(t) || this.widgetTarget(t)), this.onDragStart = (t) => {
-      const { event: e } = t, { onDragStart: i } = this.props, s = document.elementFromPoint(e.clientX, e.clientY), { id: a, element: r } = this.closestSortableItem(s), o = this.findItem(a);
+    }, this.allowDrag = (t) => t.hasAttribute(I) || !(H(t) || this.widgetTarget(t)), this.onDragStart = (t) => {
+      const { event: e } = t, { onDragStart: i } = this.props, s = document.elementFromPoint(e.clientX, e.clientY), { id: a, element: n } = this.closestSortableItem(s), o = this.findItem(a);
       if (!a || o && this.isItemDisabled(o) || !this.allowDrag(s) || !this.isSameSortable(s)) {
         this.isDragPrevented = !0;
         return;
       }
       e.isTouch && e.originalEvent.preventDefault();
-      const n = new B(
+      const r = new F(
         this,
         this.findIndex(a),
         s
       );
-      i && i.call(void 0, n), this.isDragPrevented = n.isDefaultPrevented(), this.isDragPrevented ? e.originalEvent.preventDefault() : (this.offsetParent = H(this.container), this.setState({
+      i && i.call(void 0, r), this.isDragPrevented = r.isDefaultPrevented(), this.isDragPrevented ? e.originalEvent.preventDefault() : (this.offsetParent = _(this.container), this.setState({
         activeId: a,
-        dragCueWidth: r && r.clientWidth || 0,
-        dragCueHeight: r && r.clientHeight || 0
+        dragCueWidth: n && n.clientWidth || 0,
+        dragCueHeight: n && n.clientHeight || 0
       }));
     }, this.onDragOver = (t) => {
       const { event: e } = t, { onDragOver: i, data: s } = this.props;
@@ -107,45 +107,45 @@ const w = 200, b = "data-sortable-id", x = "data-sortable-component", G = { [x]:
         this.resetState();
         return;
       }
-      const r = document.elementFromPoint(e.clientX, e.clientY), o = this.closestSortableItem(r), n = this.findIndex(o.id), l = s[n];
-      if (i && n > -1 && a !== n && !this.isItemDisabled(l) && !this.animatingItemMap[o.id] && this.shouldReorder(o.element, e.clientX, e.clientY)) {
-        const m = new F(
+      const n = document.elementFromPoint(e.clientX, e.clientY), o = this.closestSortableItem(n), r = this.findIndex(o.id), l = s[r];
+      if (i && r > -1 && a !== r && !this.isItemDisabled(l) && !this.animatingItemMap[o.id] && this.shouldReorder(o.element, e.clientX, e.clientY)) {
+        const h = new B(
           this,
           a,
-          n,
-          this.generateNewState(a, n)
+          r,
+          this.generateNewState(a, r)
         );
-        i.call(void 0, m);
+        i.call(void 0, h);
       }
-      const h = this.parentOffset();
+      const d = this.parentOffset();
       this.setState({
-        clientX: e.clientX - h.left,
-        clientY: e.clientY - h.top,
+        clientX: e.clientX - d.left,
+        clientY: e.clientY - d.top,
         isDragging: !0
       });
     }, this.onDragEnd = (t) => {
       const { event: e } = t, i = this.shouldResetActive();
       if (this.isDragPrevented)
         return;
-      const { onDragEnd: s, data: a } = this.props, r = document.elementFromPoint(e.clientX, e.clientY), o = this.closestSortableItem(r);
-      let n = this.findIndex(o.id), l = this.findIndex(this.state.activeId);
-      const h = this.isItemDisabled(a[n]);
-      if ((n === -1 || h) && (n = l), s) {
-        let m = this.generateNewState(l, n);
-        if (!h) {
+      const { onDragEnd: s, data: a } = this.props, n = document.elementFromPoint(e.clientX, e.clientY), o = this.closestSortableItem(n);
+      let r = this.findIndex(o.id), l = this.findIndex(this.state.activeId);
+      const d = this.isItemDisabled(a[r]);
+      if ((r === -1 || d) && (r = l), s) {
+        let h = this.generateNewState(l, r);
+        if (!d) {
           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 = n, n = v, m = this.props.data.slice();
+            l = r, r = v, h = this.props.data.slice();
           }
         }
-        const p = new O(
+        const f = new K(
           this,
           l,
-          n,
-          m
+          r,
+          h
         );
-        s.call(void 0, p);
+        s.call(void 0, f);
       }
       this.resetState(i);
     }, this.shouldReorder = (t, e, i) => {
@@ -153,12 +153,12 @@ const w = 200, b = "data-sortable-id", x = "data-sortable-component", G = { [x]:
       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, a = (i ? Array.from(i.childNodes) : []).find(
-        (g) => g instanceof HTMLElement && g.getAttribute(b) === e
+        (g) => g instanceof HTMLElement && g.getAttribute(I) === e
       );
       if (!t || !a)
         return null;
-      const { width: r, height: o } = a.getBoundingClientRect(), n = t.getBoundingClientRect(), l = n.top + n.height / 2 - o / 2, h = n.left + n.width / 2 - r / 2, m = l + o, p = h + r;
-      return { top: l, left: h, bottom: m, right: p };
+      const { width: n, height: o } = a.getBoundingClientRect(), r = t.getBoundingClientRect(), l = r.top + r.height / 2 - o / 2, d = r.left + r.width / 2 - n / 2, h = l + o, f = d + n;
+      return { top: l, left: d, bottom: h, right: f };
     }, this.onItemBlur = () => {
       window.setTimeout(() => {
         this.isUnmounted || this.shouldResetActive() && !this.state.isDragging && this.setState({
@@ -171,38 +171,6 @@ const w = 200, b = "data-sortable-id", x = "data-sortable-component", G = { [x]:
       !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: a } = this.props, { activeId: r } = this.state;
-      if (!a || !r || !this.isSameSortable(t.target))
-        return;
-      const o = this.isRtl, n = e.filter((I) => !this.isItemDisabled(I)), l = y(n, (I) => this.idComparer(I[i], r)), h = n.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 = n[m], g = p ? p[i] : "", v = n[l], A = v ? v[i] : "";
-      if (t.ctrlKey) {
-        if (s) {
-          const I = this.findIndex(A), E = this.findIndex(g), T = new k(
-            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,
@@ -213,35 +181,30 @@ const w = 200, b = "data-sortable-id", x = "data-sortable-component", G = { [x]:
         activeId: t ? "" : this.state.activeId
       });
     }, this.renderData = () => {
-      const {
-        data: t,
-        itemUI: e,
-        idField: i,
-        tabIndex: s
-      } = this.props;
-      return t.map((a) => {
-        const o = R(i)(a), n = this.isItemDisabled(a), l = this.idComparer(this.state.activeId, o);
+      const { data: t, itemUI: e, idField: i, tabIndex: s, navigatable: a } = this.props;
+      return t.map((n) => {
+        const r = R(i)(n), l = this.isItemDisabled(n), d = this.idComparer(this.state.activeId, r), h = a ? d ? 0 : -1 : s;
         return /* @__PURE__ */ u.createElement(
           e,
           {
-            key: o,
-            forwardRef: (h) => this.refAssign(h, o),
-            dataItem: a,
-            isDisabled: n,
-            isActive: l,
-            isDragged: l && this.state.isDragging,
+            key: r,
+            forwardRef: (f) => this.refAssign(f, r),
+            dataItem: n,
+            isDisabled: l,
+            isActive: d,
+            isDragged: d && this.state.isDragging,
             isDragCue: !1,
             attributes: {
-              [b]: o,
-              "aria-disabled": n,
-              "aria-grabbed": l && this.state.isDragging && !this.isDragPrevented,
-              "aria-dropeffect": n ? "none" : "move",
-              tabIndex: M(s, n),
+              [I]: r,
+              "aria-disabled": l,
+              "aria-grabbed": d && this.state.isDragging && !this.isDragPrevented,
+              "aria-dropeffect": l ? "none" : "move",
+              tabIndex: N(h, l),
               onFocus: this.onItemFocus,
               onBlur: this.onItemBlur
             },
             style: {
-              cursor: n ? "auto" : "move",
+              cursor: l ? "auto" : "move",
               MozUserSelect: "none",
               msUserSelect: "none",
               WebkitUserSelect: "none",
@@ -251,16 +214,16 @@ const w = 200, b = "data-sortable-id", x = "data-sortable-component", G = { [x]:
         );
       });
     }, this.renderNoData = () => {
-      const { emptyItemUI: t } = this.props, i = X(this).toLanguageString(C, z[C]);
+      const { emptyItemUI: t } = this.props, i = k(this).toLanguageString(x, X[x]);
       if (t)
         return /* @__PURE__ */ u.createElement(t, { message: i });
     }, this.renderDragCue = () => {
-      const { itemUI: t } = this.props, { isDragging: e, activeId: i, clientX: s, clientY: a } = this.state, r = this.findItem(i);
-      if (!(!e || !r))
+      const { itemUI: t } = this.props, { isDragging: e, activeId: i, clientX: s, clientY: a } = this.state, n = this.findItem(i);
+      if (!(!e || !n))
         return /* @__PURE__ */ u.createElement(
           t,
           {
-            dataItem: r,
+            dataItem: n,
             isDisabled: !1,
             isActive: !0,
             isDragged: !0,
@@ -279,7 +242,38 @@ const w = 200, b = "data-sortable-id", x = "data-sortable-component", G = { [x]:
       t ? this.itemRefsMap[e] = t : delete this.itemRefsMap[e];
     }, this.draggableRefAssign = (t) => {
       this.draggableRef = t;
-    }, U(_);
+    }, this.onKeyDown = (t) => {
+      var r, l, d;
+      const { data: e, idField: i } = this.props, { activeId: s } = this.state, a = e.filter((h) => !this.isItemDisabled(h)), n = y(a, (h) => this.idComparer(h[i], s)), o = n < 0 ? 0 : n;
+      t.key === P.tab && p(document) !== ((r = this.draggableRef) == null ? void 0 : r.element) && (t.preventDefault(), t.stopPropagation()), this.navigation && ((l = this.draggableRef) != null && l.element) && this.navigation.triggerKeyboardEvent({
+        target: (d = this.draggableRef) == null ? void 0 : d.element.querySelectorAll(w)[o],
+        key: t.key,
+        nativeEvent: { type: t.type },
+        originalEvent: t
+      });
+    }, this.handleNext = (t, e, i) => {
+      var s;
+      p(document) !== ((s = this.draggableRef) == null ? void 0 : s.element) && (i.originalEvent.metaKey ? this.moveItem(t, e, i, "next") : e.focusNext(t));
+    }, this.handlePrev = (t, e, i) => {
+      var s;
+      p(document) !== ((s = this.draggableRef) == null ? void 0 : s.element) && (i.originalEvent.metaKey ? this.moveItem(t, e, i, "prev") : e.focusPrevious(t));
+    }, this.moveItem = (t, e, i, s) => {
+      var a;
+      if (p(document) !== ((a = this.draggableRef) == null ? void 0 : a.element)) {
+        const { onNavigate: n, data: o, idField: r } = this.props, l = this.findIndex(this.state.activeId);
+        if (n) {
+          let d, h;
+          s === "next" ? (d = o[l + 1], h = d && d.disabled ? o[l + 2] : o[l + 1]) : (d = o[l - 1], h = d && d.disabled ? o[l - 2] : o[l - 1]);
+          const f = h && h[r], g = o[l], v = g ? g[r] : "", S = this.findIndex(v), E = this.findIndex(f || v), C = new Y(
+            this,
+            S,
+            E,
+            this.generateNewState(S, E)
+          );
+          this.isKeyboardNavigated = !0, n.call(void 0, C);
+        }
+      }
+    }, U(G), this.onKeyDown = this.onKeyDown.bind(this);
   }
   get container() {
     return this.draggableRef && this.draggableRef.element;
@@ -303,10 +297,10 @@ const w = 200, b = "data-sortable-id", x = "data-sortable-component", G = { [x]:
       const s = i[t], a = this.itemRefsMap[s];
       if (!a)
         return;
-      const r = a.getBoundingClientRect(), o = this.oldSizesMap[s], n = o.left - r.left, l = o.top - r.top;
-      n === 0 && l === 0 || requestAnimationFrame(() => {
-        this.animatingItemMap[s] = !0, a.style.transform = `translate(${n}px, ${l}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[s] = !1, w);
+      const n = a.getBoundingClientRect(), o = this.oldSizesMap[s], r = o.left - n.left, l = o.top - n.top;
+      r === 0 && l === 0 || requestAnimationFrame(() => {
+        this.animatingItemMap[s] = !0, a.style.transform = `translate(${r}px, ${l}px)`, a.style.transition = "transform 0s", requestAnimationFrame(() => {
+          a.style.transform = "", a.style.transition = `transform ${A}ms cubic-bezier(0.2, 0, 0, 1) 0s`, window.setTimeout(() => this.animatingItemMap[s] = !1, A);
         });
       });
     }));
@@ -315,7 +309,28 @@ const w = 200, b = "data-sortable-id", x = "data-sortable-component", G = { [x]:
    * @hidden
    */
   componentDidMount() {
-    this.isRtl = this.container && getComputedStyle(this.container).direction === "rtl" || !1;
+    var c, t;
+    (c = this.draggableRef) != null && c.element && (this.navigation = new M({
+      tabIndex: 0,
+      root: { current: (t = this.draggableRef) == null ? void 0 : t.element },
+      rovingTabIndex: !0,
+      selectors: [w],
+      keyboardEvents: {
+        keydown: {
+          ArrowDown: this.handleNext,
+          ArrowRight: this.handleNext,
+          ArrowUp: this.handlePrev,
+          ArrowLeft: this.handlePrev,
+          Enter: (e, i, s) => {
+            i.focusElement(i.first, e);
+          },
+          Escape: (e, i, s) => {
+            var a, n;
+            e.setAttribute("tabindex", "-1"), (n = (a = this.draggableRef) == null ? void 0 : a.element) == null || n.focus(), this.setState({ activeId: "" });
+          }
+        }
+      }
+    })), this.isRtl = this.container && getComputedStyle(this.container).direction === "rtl" || !1;
   }
   /**
    * @hidden
@@ -337,13 +352,10 @@ const w = 200, b = "data-sortable-id", x = "data-sortable-component", G = { [x]:
     }
     return { left: 0, top: 0 };
   }
-  /**
-   * @hidden
-   */
   render() {
-    const { data: c, style: t, className: e, itemsWrapUI: i } = this.props, s = i || "div";
+    const { data: c, style: t, className: e, itemsWrapUI: i, tabIndex: s, navigatable: a } = this.props, n = i || "div";
     return /* @__PURE__ */ u.createElement(
-      P,
+      O,
       {
         onDragStart: this.onDragStart,
         onDrag: this.onDragOver,
@@ -351,15 +363,16 @@ const w = 200, b = "data-sortable-id", x = "data-sortable-component", G = { [x]:
         ref: this.draggableRefAssign
       },
       /* @__PURE__ */ u.createElement(
-        s,
+        n,
         {
-          ...G,
+          onKeyDown: (o) => a && this.onKeyDown(o),
+          ...$,
           className: e,
           style: {
             touchAction: "none",
             ...t
           },
-          onKeyDown: this.onKeyDown
+          tabIndex: a ? s || 0 : void 0
         },
         c && c.length ? this.renderData() : this.renderNoData(),
         this.renderDragCue()
@@ -367,29 +380,29 @@ const w = 200, b = "data-sortable-id", x = "data-sortable-component", G = { [x]:
     );
   }
 };
-D.defaultProps = {
+b.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
+}, b.propTypes = {
+  idField: m.string.isRequired,
+  disabledField: m.string,
+  data: m.array.isRequired,
+  tabIndex: m.number,
+  navigation: m.bool,
+  animation: m.bool,
+  itemsWrapUI: m.any,
+  itemUI: m.func.isRequired,
+  emptyItemUI: m.func,
+  style: m.object,
+  className: m.string,
+  onDragStart: m.func,
+  onDragOver: m.func,
+  onDragEnd: m.func,
+  onNavigate: m.func
 };
-let S = D;
-Y(S);
+let D = b;
+L(D);
 export {
-  S as Sortable
+  D as Sortable
 };

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

@@ -5,4 +5,4 @@
  * 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("prop-types"),require("@progress/kendo-react-common"),require("@progress/kendo-react-intl")):"function"==typeof define&&define.amd?define(["exports","react","prop-types","@progress/kendo-react-common","@progress/kendo-react-intl"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).KendoReactSortable={},t.React,t.PropTypes,t.KendoReactCommon,t.KendoReactIntl)}(this,(function(t,e,i,s,n){"use strict";function r(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 a=r(e);let o=class{constructor(){this.prevented=!1}preventDefault(){this.prevented=!0}isDefaultPrevented(){return this.prevented}};class l extends o{constructor(t,e,i){super(),this.target=t,this.prevIndex=e,this.element=i}}let d=class{constructor(t,e,i,s){this.target=t,this.prevIndex=e,this.nextIndex=i,this.newState=s}},h=class{constructor(t,e,i,s){this.target=t,this.prevIndex=e,this.nextIndex=i,this.newState=s}};class c{constructor(t,e,i,s){this.target=t,this.prevIndex=e,this.nextIndex=i,this.newState=s}}const g="sortable.noData",u={[g]:"No Data"},m=(t,e)=>{for(let i=0;i<t.length;i++)if(e(t[i]))return i;return-1},p=t=>String(t).trim().split(" "),f=/^(?:a|input|select|option|textarea|button|object)$/i,v=s.hasRelativeStackingContext(),b={name:"@progress/kendo-react-sortable",productName:"KendoReact",productCodes:["KENDOUIREACT","KENDOUICOMPLETE"],publishDate:0,version:"",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"},I="data-sortable-id",D="data-sortable-component",S={[D]:!0},y=class extends a.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(I);if(t&&this.itemRefsMap[t]===e)return{id:t,element:e};e=e.parentElement}return{id:"",element:null}},this.isSortable=t=>!!t.hasAttribute(D),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 n=s.getter(i);return((t,e)=>{for(let i=0;i<t.length;i++)if(e(t[i]))return t[i]})(e,(e=>this.idComparer(n(e),t)))},this.findIndex=t=>{const{data:e,idField:i}=this.props;return t+""?m(e,(e=>this.idComparer(e[i],t))):-1},this.isItemDisabled=t=>t&&!0===t[this.props.disabledField||""],this.shouldResetActive=()=>{const t=s.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=p(e);return!!p(t.className).find((t=>i.indexOf(t)>=0))})(t,"k-widget")||this.isSortable(t)));return e&&!this.isSortable(e)},this.allowDrag=t=>t.hasAttribute(I)||!((t=>{if(t.tagName){const e=t.tagName.toLowerCase(),i=t.getAttribute("tabIndex"),s="-1"===i;let n=null!==i&&!s;return f.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 l(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||!v)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),l=s[o];if(i&&o>-1&&n!==o&&!this.isItemDisabled(l)&&!this.animatingItemMap[a.id]&&this.shouldReorder(a.element,e.clientX,e.clientY)){const t=new d(this,n,o,this.generateNewState(n,o));i.call(void 0,t)}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),a=this.closestSortableItem(r);let o=this.findIndex(a.id),l=this.findIndex(this.state.activeId);const d=this.isItemDisabled(n[o]);if((-1===o||d)&&(o=l),s){let t=this.generateNewState(l,o);if(!d){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=l;l=o,o=e,t=this.props.data.slice()}}const i=new h(this,l,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(I)===e));if(!t||!s)return null;const{width:n,height:r}=s.getBoundingClientRect(),a=t.getBoundingClientRect(),o=a.top+a.height/2-r/2,l=a.left+a.width/2-n/2;return{top:o,left:l,bottom:o+r,right:l+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:n,navigation:r}=this.props,{activeId:a}=this.state;if(!r||!a||!this.isSameSortable(t.target))return;const o=this.isRtl,l=e.filter((t=>!this.isItemDisabled(t))),d=m(l,(t=>this.idComparer(t[i],a))),h=l.length-1;let g=d;switch(t.keyCode===s.Keys.left&&(t.keyCode=o?s.Keys.down:s.Keys.up),t.keyCode===s.Keys.right&&(t.keyCode=o?s.Keys.up:s.Keys.down),t.keyCode){case s.Keys.up:d>0&&(g=d-1);break;case s.Keys.down:d<h&&(g=d+1)}if(g===d)return;t.stopPropagation(),t.preventDefault();const u=l[g],p=u?u[i]:"",f=l[d],v=f?f[i]:"";if(t.ctrlKey){if(n){const t=this.findIndex(v),e=this.findIndex(p),i=new c(this,t,e,this.generateNewState(t,e));this.isKeyboardNavigated=!0,n.call(void 0,i)}}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:i,tabIndex:n}=this.props;return t.map((t=>{const r=s.getter(i)(t),o=this.isItemDisabled(t),l=this.idComparer(this.state.activeId,r);return a.createElement(e,{key:r,forwardRef:t=>this.refAssign(t,r),dataItem:t,isDisabled:o,isActive:l,isDragged:l&&this.state.isDragging,isDragCue:!1,attributes:{[I]:r,"aria-disabled":o,"aria-grabbed":l&&this.state.isDragging&&!this.isDragPrevented,"aria-dropeffect":o?"none":"move",tabIndex:s.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,e=n.provideLocalizationService(this).toLanguageString(g,u[g]);if(t)return a.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 a.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},s.validatePackage(b)}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];s&&(this.oldSizesMap[i]=s.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:n}=this.props,r=n||"div";return a.createElement(s.Draggable,{onDragStart:this.onDragStart,onDrag:this.onDragOver,onDragEnd:this.onDragEnd,ref:this.draggableRefAssign},a.createElement(r,{...S,className:i,style:{touchAction:"none",...e},onKeyDown:this.onKeyDown},t&&t.length?this.renderData():this.renderNoData(),this.renderDragCue()))}};y.defaultProps={navigation:!0,animation:!0,emptyItemUI:t=>a.createElement("div",null,t.message)},y.propTypes={idField:i.string.isRequired,disabledField:i.string,data:i.array.isRequired,tabIndex:i.number,navigation:i.bool,animation:i.bool,itemsWrapUI:i.any,itemUI:i.func.isRequired,emptyItemUI:i.func,style:i.object,className:i.string,onDragStart:i.func,onDragOver:i.func,onDragEnd:i.func,onNavigate:i.func};let w=y;n.registerForLocalization(w),t.Sortable=w,t.SortableOnDragEndEvent=h,t.SortableOnDragOverEvent=d,t.SortableOnDragStartEvent=l,t.SortableOnNavigateEvent=c}));
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("react"),require("prop-types"),require("@progress/kendo-react-common"),require("@progress/kendo-react-intl")):"function"==typeof define&&define.amd?define(["exports","react","prop-types","@progress/kendo-react-common","@progress/kendo-react-intl"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).KendoReactSortable={},t.React,t.PropTypes,t.KendoReactCommon,t.KendoReactIntl)}(this,(function(t,e,i,s,n){"use strict";function r(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 a=r(e);let o=class{constructor(){this.prevented=!1}preventDefault(){this.prevented=!0}isDefaultPrevented(){return this.prevented}};class l extends o{constructor(t,e,i){super(),this.target=t,this.prevIndex=e,this.element=i}}let d=class{constructor(t,e,i,s){this.target=t,this.prevIndex=e,this.nextIndex=i,this.newState=s}},h=class{constructor(t,e,i,s){this.target=t,this.prevIndex=e,this.nextIndex=i,this.newState=s}};class c{constructor(t,e,i,s){this.target=t,this.prevIndex=e,this.nextIndex=i,this.newState=s}}const g="sortable.noData",u={[g]:"No Data"},m=(t,e)=>{for(let i=0;i<t.length;i++)if(e(t[i]))return i;return-1},f=t=>String(t).trim().split(" "),p=/^(?:a|input|select|option|textarea|button|object)$/i,v=s.hasRelativeStackingContext(),b={name:"@progress/kendo-react-sortable",productName:"KendoReact",productCodes:["KENDOUIREACT","KENDOUICOMPLETE"],publishDate:0,version:"",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"},I="data-sortable-id",D="data-sortable-component",S="[data-sortable-id]:not(.k-disabled)",y={[D]:!0},R=class extends a.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)=>{const 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(I);if(t&&this.itemRefsMap[t]===e)return{id:t,element:e};e=e.parentElement}return{id:"",element:null}},this.isSortable=t=>!!t.hasAttribute(D),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 n=s.getter(i);return((t,e)=>{for(let i=0;i<t.length;i++)if(e(t[i]))return t[i]})(e,(e=>this.idComparer(n(e),t)))},this.findIndex=t=>{const{data:e,idField:i}=this.props;return t+""?m(e,(e=>this.idComparer(e[i],t))):-1},this.isItemDisabled=t=>t&&!0===t[this.props.disabledField||""],this.shouldResetActive=()=>{const t=s.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=f(e);return!!f(t.className).find((t=>i.indexOf(t)>=0))})(t,"k-widget")||this.isSortable(t)));return e&&!this.isSortable(e)},this.allowDrag=t=>t.hasAttribute(I)||!((t=>{if(t.tagName){const e=t.tagName.toLowerCase(),i=t.getAttribute("tabIndex"),s="-1"===i;let n=null!==i&&!s;return p.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 l(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||!v)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),l=s[o];if(i&&o>-1&&n!==o&&!this.isItemDisabled(l)&&!this.animatingItemMap[a.id]&&this.shouldReorder(a.element,e.clientX,e.clientY)){const t=new d(this,n,o,this.generateNewState(n,o));i.call(void 0,t)}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),a=this.closestSortableItem(r);let o=this.findIndex(a.id),l=this.findIndex(this.state.activeId);const d=this.isItemDisabled(n[o]);if((-1===o||d)&&(o=l),s){let t=this.generateNewState(l,o);if(!d){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=l;l=o,o=e,t=this.props.data.slice()}}const i=new h(this,l,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(I)===e));if(!t||!s)return null;const{width:n,height:r}=s.getBoundingClientRect(),a=t.getBoundingClientRect(),o=a.top+a.height/2-r/2,l=a.left+a.width/2-n/2;return{top:o,left:l,bottom:o+r,right:l+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.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:n,navigatable:r}=this.props;return t.map((t=>{const o=s.getter(i)(t),l=this.isItemDisabled(t),d=this.idComparer(this.state.activeId,o),h=r?d?0:-1:n;return a.createElement(e,{key:o,forwardRef:t=>this.refAssign(t,o),dataItem:t,isDisabled:l,isActive:d,isDragged:d&&this.state.isDragging,isDragCue:!1,attributes:{[I]:o,"aria-disabled":l,"aria-grabbed":d&&this.state.isDragging&&!this.isDragPrevented,"aria-dropeffect":l?"none":"move",tabIndex:s.getTabIndex(h,l),onFocus:this.onItemFocus,onBlur:this.onItemBlur},style:{cursor:l?"auto":"move",MozUserSelect:"none",msUserSelect:"none",WebkitUserSelect:"none",userSelect:"none"}})}))},this.renderNoData=()=>{const{emptyItemUI:t}=this.props,e=n.provideLocalizationService(this).toLanguageString(g,u[g]);if(t)return a.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 a.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},this.onKeyDown=t=>{var e,i,n;const{data:r,idField:a}=this.props,{activeId:o}=this.state,l=r.filter((t=>!this.isItemDisabled(t))),d=m(l,(t=>this.idComparer(t[a],o))),h=d<0?0:d;t.key===s.KEYS.tab&&s.getActiveElement(document)!==(null==(e=this.draggableRef)?void 0:e.element)&&(t.preventDefault(),t.stopPropagation()),this.navigation&&null!=(i=this.draggableRef)&&i.element&&this.navigation.triggerKeyboardEvent({target:null==(n=this.draggableRef)?void 0:n.element.querySelectorAll(S)[h],key:t.key,nativeEvent:{type:t.type},originalEvent:t})},this.handleNext=(t,e,i)=>{var n;s.getActiveElement(document)!==(null==(n=this.draggableRef)?void 0:n.element)&&(i.originalEvent.metaKey?this.moveItem(t,e,i,"next"):e.focusNext(t))},this.handlePrev=(t,e,i)=>{var n;s.getActiveElement(document)!==(null==(n=this.draggableRef)?void 0:n.element)&&(i.originalEvent.metaKey?this.moveItem(t,e,i,"prev"):e.focusPrevious(t))},this.moveItem=(t,e,i,n)=>{var r;if(s.getActiveElement(document)!==(null==(r=this.draggableRef)?void 0:r.element)){const{onNavigate:t,data:e,idField:i}=this.props,s=this.findIndex(this.state.activeId);if(t){let r,a;"next"===n?(r=e[s+1],a=r&&r.disabled?e[s+2]:e[s+1]):(r=e[s-1],a=r&&r.disabled?e[s-2]:e[s-1]);const o=a&&a[i],l=e[s],d=l?l[i]:"",h=this.findIndex(d),g=this.findIndex(o||d),u=new c(this,h,g,this.generateNewState(h,g));this.isKeyboardNavigated=!0,t.call(void 0,u)}}},s.validatePackage(b),this.onKeyDown=this.onKeyDown.bind(this)}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];s&&(this.oldSizesMap[i]=s.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(){var t,e;null!=(t=this.draggableRef)&&t.element&&(this.navigation=new s.Navigation({tabIndex:0,root:{current:null==(e=this.draggableRef)?void 0:e.element},rovingTabIndex:!0,selectors:[S],keyboardEvents:{keydown:{ArrowDown:this.handleNext,ArrowRight:this.handleNext,ArrowUp:this.handlePrev,ArrowLeft:this.handlePrev,Enter:(t,e,i)=>{e.focusElement(e.first,t)},Escape:(t,e,i)=>{var s,n;t.setAttribute("tabindex","-1"),null==(n=null==(s=this.draggableRef)?void 0:s.element)||n.focus(),this.setState({activeId:""})}}}})),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:n,tabIndex:r,navigatable:o}=this.props,l=n||"div";return a.createElement(s.Draggable,{onDragStart:this.onDragStart,onDrag:this.onDragOver,onDragEnd:this.onDragEnd,ref:this.draggableRefAssign},a.createElement(l,{onKeyDown:t=>o&&this.onKeyDown(t),...y,className:i,style:{touchAction:"none",...e},tabIndex:o?r||0:void 0},t&&t.length?this.renderData():this.renderNoData(),this.renderDragCue()))}};R.defaultProps={navigation:!0,animation:!0,emptyItemUI:t=>a.createElement("div",null,t.message)},R.propTypes={idField:i.string.isRequired,disabledField:i.string,data:i.array.isRequired,tabIndex:i.number,navigation:i.bool,animation:i.bool,itemsWrapUI:i.any,itemUI:i.func.isRequired,emptyItemUI:i.func,style:i.object,className:i.string,onDragStart:i.func,onDragOver:i.func,onDragEnd:i.func,onNavigate:i.func};let w=R;n.registerForLocalization(w),t.Sortable=w,t.SortableOnDragEndEvent=h,t.SortableOnDragOverEvent=d,t.SortableOnDragStartEvent=l,t.SortableOnNavigateEvent=c}));

package/index.d.mts

@@ -9,6 +9,7 @@ import { DraggableDragEvent } from '@progress/kendo-react-common';
 import { DraggableDragStartEvent } from '@progress/kendo-react-common';
 import { DraggableReleaseEvent } from '@progress/kendo-react-common';
 import { JSX as JSX_2 } from 'react/jsx-runtime';
+import { Navigation } from '@progress/kendo-react-common';
 import PropTypes from 'prop-types';
 import * as React_2 from 'react';
 
@@ -88,6 +89,7 @@ export declare class Sortable extends React_2.Component<SortableProps, SortableS
     private focusActiveId;
     private isKeyboardNavigated;
     private isDragPrevented;
+    private navigation?;
     constructor(props: SortableProps);
     /**
      * @hidden
@@ -197,10 +199,6 @@ export declare class Sortable extends React_2.Component<SortableProps, SortableS
      * @hidden
      */
     onItemFocus: (event: React_2.FocusEvent<HTMLDivElement>) => void;
-    /**
-     * @hidden
-     */
-    onKeyDown: (event: React_2.KeyboardEvent<HTMLDivElement>) => void;
     /**
      * @hidden
      */
@@ -228,6 +226,13 @@ export declare class Sortable extends React_2.Component<SortableProps, SortableS
     /**
      * @hidden
      */
+    onKeyDown: (event: React_2.KeyboardEvent<HTMLDivElement>) => void;
+    /**
+     * @hidden
+     */
+    handleNext: (t: HTMLElement, nav: Navigation, ev: React_2.KeyboardEvent<HTMLElement>) => void;
+    handlePrev: (t: HTMLElement, nav: Navigation, ev: React_2.KeyboardEvent<HTMLElement>) => void;
+    moveItem: (t: HTMLElement, nav: Navigation, ev: React_2.KeyboardEvent<HTMLElement>, direction: 'next' | 'prev') => void;
     render(): JSX_2.Element;
 }
 
@@ -455,6 +460,11 @@ export declare interface SortableProps extends SortableDefaultProps {
      * Fires when the user is navigates within the Srotable by using the keyboard.
      */
     onNavigate?: (event: SortableOnNavigateEvent) => void;
+    /**
+     * If set to `true`, the user can use dedicated shortcuts to interact with the Srotable.
+     * By default, navigation is disabled.
+     */
+    navigatable?: boolean;
 }
 
 /**

package/index.d.ts

@@ -9,6 +9,7 @@ import { DraggableDragEvent } from '@progress/kendo-react-common';
 import { DraggableDragStartEvent } from '@progress/kendo-react-common';
 import { DraggableReleaseEvent } from '@progress/kendo-react-common';
 import { JSX as JSX_2 } from 'react/jsx-runtime';
+import { Navigation } from '@progress/kendo-react-common';
 import PropTypes from 'prop-types';
 import * as React_2 from 'react';
 
@@ -88,6 +89,7 @@ export declare class Sortable extends React_2.Component<SortableProps, SortableS
     private focusActiveId;
     private isKeyboardNavigated;
     private isDragPrevented;
+    private navigation?;
     constructor(props: SortableProps);
     /**
      * @hidden
@@ -197,10 +199,6 @@ export declare class Sortable extends React_2.Component<SortableProps, SortableS
      * @hidden
      */
     onItemFocus: (event: React_2.FocusEvent<HTMLDivElement>) => void;
-    /**
-     * @hidden
-     */
-    onKeyDown: (event: React_2.KeyboardEvent<HTMLDivElement>) => void;
     /**
      * @hidden
      */
@@ -228,6 +226,13 @@ export declare class Sortable extends React_2.Component<SortableProps, SortableS
     /**
      * @hidden
      */
+    onKeyDown: (event: React_2.KeyboardEvent<HTMLDivElement>) => void;
+    /**
+     * @hidden
+     */
+    handleNext: (t: HTMLElement, nav: Navigation, ev: React_2.KeyboardEvent<HTMLElement>) => void;
+    handlePrev: (t: HTMLElement, nav: Navigation, ev: React_2.KeyboardEvent<HTMLElement>) => void;
+    moveItem: (t: HTMLElement, nav: Navigation, ev: React_2.KeyboardEvent<HTMLElement>, direction: 'next' | 'prev') => void;
     render(): JSX_2.Element;
 }
 
@@ -455,6 +460,11 @@ export declare interface SortableProps extends SortableDefaultProps {
      * Fires when the user is navigates within the Srotable by using the keyboard.
      */
     onNavigate?: (event: SortableOnNavigateEvent) => void;
+    /**
+     * If set to `true`, the user can use dedicated shortcuts to interact with the Srotable.
+     * By default, navigation is disabled.
+     */
+    navigatable?: boolean;
 }
 
 /**

package/package-metadata.mjs

@@ -10,7 +10,7 @@ const e = {
   name: "@progress/kendo-react-sortable",
   productName: "KendoReact",
   productCodes: ["KENDOUIREACT", "KENDOUICOMPLETE"],
-  publishDate: 1720780136,
+  publishDate: 1722844072,
   version: "",
   licensingDocsUrl: "https://www.telerik.com/kendo-react-ui/components/my-license/"
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-react-sortable",
-  "version": "8.2.0-develop.9",
+  "version": "8.2.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",
@@ -23,8 +23,8 @@
   "sideEffects": false,
   "peerDependencies": {
     "@progress/kendo-licensing": "^1.3.4",
-    "@progress/kendo-react-common": "8.2.0-develop.9",
-    "@progress/kendo-react-intl": "8.2.0-develop.9",
+    "@progress/kendo-react-common": "8.2.0",
+    "@progress/kendo-react-intl": "8.2.0",
     "react": "^16.8.2 || ^17.0.0 || ^18.0.0",
     "react-dom": "^16.8.2 || ^17.0.0 || ^18.0.0"
   },