@progress/kendo-react-sortable 10.1.1-develop.1 → 10.2.0-develop.10

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

@@ -12,4 +12,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);class o{constructor(){this.prevented=!1}preventDefault(){this.prevented=!0}isDefaultPrevented(){return this.prevented}}let l=class extends o{constructor(t,e,i){super(),this.target=t,this.prevIndex=e,this.element=i}},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}},c=class{constructor(t,e,i,s){this.target=t,this.prevIndex=e,this.nextIndex=i,this.newState=s}};const g="sortable.noData",m={[g]:"No Data"},u=(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",productCode:"KENDOUIREACT",productCodes:["KENDOUIREACT"],publishDate:0,version:"10.1.1-develop.1",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)",w={[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.showLicenseWatermark=!1,this.windowTimeout=t=>{window.setTimeout((()=>this.animatingItemMap[t]=!1),200)},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+""?u(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.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,m[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=u(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),m=new c(this,h,g,this.generateNewState(h,g));this.isKeyboardNavigated=!0,t.call(void 0,m)}}},this.showLicenseWatermark=!s.validatePackage(b,{component:"Sortable"}),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",this.windowTimeout(i)}))}))})))}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),...w,className:i,style:{position:"relative",touchAction:"none",...e},tabIndex:o?r||0:void 0},t&&t.length?this.renderData():this.renderNoData(),this.renderDragCue(),this.showLicenseWatermark&&a.createElement(s.WatermarkOverlay,null)))}};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 R=y;n.registerForLocalization(R),t.Sortable=R,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);class o{constructor(){this.prevented=!1}preventDefault(){this.prevented=!0}isDefaultPrevented(){return this.prevented}}let l=class extends o{constructor(t,e,i){super(),this.target=t,this.prevIndex=e,this.element=i}},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}},c=class{constructor(t,e,i,s){this.target=t,this.prevIndex=e,this.nextIndex=i,this.newState=s}};const g="sortable.noData",m={[g]:"No Data"},u=(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",productCode:"KENDOUIREACT",productCodes:["KENDOUIREACT"],publishDate:0,version:"10.2.0-develop.10",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)",w={[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.showLicenseWatermark=!1,this.windowTimeout=t=>{window.setTimeout((()=>this.animatingItemMap[t]=!1),200)},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+""?u(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.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,m[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=u(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),m=new c(this,h,g,this.generateNewState(h,g));this.isKeyboardNavigated=!0,t.call(void 0,m)}}},this.showLicenseWatermark=!s.validatePackage(b,{component:"Sortable"}),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",this.windowTimeout(i)}))}))})))}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),...w,className:i,style:{position:"relative",touchAction:"none",...e},tabIndex:o?r||0:void 0},t&&t.length?this.renderData():this.renderNoData(),this.renderDragCue(),this.showLicenseWatermark&&a.createElement(s.WatermarkOverlay,null)))}};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 R=y;n.registerForLocalization(R),t.Sortable=R,t.SortableOnDragEndEvent=h,t.SortableOnDragOverEvent=d,t.SortableOnDragStartEvent=l,t.SortableOnNavigateEvent=c}));

package/index.d.mts

@@ -9,7 +9,7 @@ import { default as default_2 } from 'prop-types';
 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 { JSX } from 'react/jsx-runtime';
 import { Navigation } from '@progress/kendo-react-common';
 import * as React_2 from 'react';
 
@@ -211,15 +211,15 @@ export declare class Sortable extends React_2.Component<SortableProps, SortableS
     /**
      * @hidden
      */
-    renderData: () => JSX_2.Element[];
+    renderData: () => JSX.Element[];
     /**
      * @hidden
      */
-    renderNoData: () => JSX_2.Element | undefined;
+    renderNoData: () => JSX.Element | undefined;
     /**
      * @hidden
      */
-    renderDragCue: () => JSX_2.Element | undefined;
+    renderDragCue: () => JSX.Element | undefined;
     /**
      * @hidden
      */
@@ -238,7 +238,7 @@ export declare class Sortable extends React_2.Component<SortableProps, SortableS
     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;
+    render(): JSX.Element;
 }
 
 /**
@@ -419,6 +419,12 @@ export declare class SortableOnNavigateEvent implements BaseEvent<Sortable> {
 export declare interface SortableProps extends SortableDefaultProps {
     /**
      * (Required) The Sortable items UI.
+     *
+     * @example
+     * ```jsx
+     * const ItemUI = (props) => <div>{props.dataItem.text}</div>;
+     * <Sortable itemUI={ItemUI} />
+     * ```
      */
     itemUI: React.ComponentType<SortableItemUIProps>;
     /**
@@ -426,48 +432,98 @@ export declare interface SortableProps extends SortableDefaultProps {
      *
      * Use it to override the sortable items container component.
      *
-     * @default 'div''
+     * @default 'div'
      */
     itemsWrapUI?: React.ForwardRefExoticComponent<any>;
     /**
      * (Required) The field which uniquely identifies the Sortable items.
+     *
+     * @example
+     * ```jsx
+     * <Sortable idField="id" />
+     * ```
      */
     idField: string;
     /**
      * The field which enables or disables an item.
+     *
+     * @example
+     * ```jsx
+     * <Sortable disabledField="isDisabled" />
+     * ```
      */
     disabledField?: string;
     /**
      * (Required) The data items of the Sortable.
+     *
+     * @example
+     * ```jsx
+     * <Sortable data={[{ id: 1, text: 'Item 1' }, { id: 2, text: 'Item 2' }]} />
+     * ```
      */
     data: Array<object>;
     /**
      * Defines the CSS styles which are applied to the Sortable element.
+     *
+     * @example
+     * ```jsx
+     * <Sortable style={{ border: '1px solid black' }} />
+     * ```
      */
     style?: React.CSSProperties;
     /**
      * Defines the CSS class which is applied to the Sortable element.
+     *
+     * @example
+     * ```jsx
+     * <Sortable className="custom-sortable" />
+     * ```
      */
     className?: string;
     /**
      * Fires when the user starts dragging an item. This event is preventable.
+     *
+     * @example
+     * ```jsx
+     * <Sortable onDragStart={(event) => console.log(event)} />
+     * ```
      */
     onDragStart?: (event: SortableOnDragStartEvent) => void;
     /**
      * Fires when the user is dragging an item over another Sortable item.
+     *
+     * @example
+     * ```jsx
+     * <Sortable onDragOver={(event) => console.log(event)} />
+     * ```
      */
     onDragOver?: (event: SortableOnDragOverEvent) => void;
     /**
      * Fires when the user stops dragging an item.
+     *
+     * @example
+     * ```jsx
+     * <Sortable onDragEnd={(event) => console.log(event)} />
+     * ```
      */
     onDragEnd?: (event: SortableOnDragEndEvent) => void;
     /**
-     * Fires when the user is navigates within the Srotable by using the keyboard.
+     * Fires when the user navigates within the Sortable by using the keyboard.
+     *
+     * @example
+     * ```jsx
+     * <Sortable onNavigate={(event) => console.log(event)} />
+     * ```
      */
     onNavigate?: (event: SortableOnNavigateEvent) => void;
     /**
-     * If set to `true`, the user can use dedicated shortcuts to interact with the Srotable.
+     * If set to `true`, the user can use dedicated shortcuts to interact with the Sortable.
      * By default, navigation is disabled.
+     *
+     * @example
+     * ```jsx
+     * <Sortable navigatable={true} />
+     * ```
      */
     navigatable?: boolean;
 }

package/index.d.ts

@@ -9,7 +9,7 @@ import { default as default_2 } from 'prop-types';
 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 { JSX } from 'react/jsx-runtime';
 import { Navigation } from '@progress/kendo-react-common';
 import * as React_2 from 'react';
 
@@ -211,15 +211,15 @@ export declare class Sortable extends React_2.Component<SortableProps, SortableS
     /**
      * @hidden
      */
-    renderData: () => JSX_2.Element[];
+    renderData: () => JSX.Element[];
     /**
      * @hidden
      */
-    renderNoData: () => JSX_2.Element | undefined;
+    renderNoData: () => JSX.Element | undefined;
     /**
      * @hidden
      */
-    renderDragCue: () => JSX_2.Element | undefined;
+    renderDragCue: () => JSX.Element | undefined;
     /**
      * @hidden
      */
@@ -238,7 +238,7 @@ export declare class Sortable extends React_2.Component<SortableProps, SortableS
     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;
+    render(): JSX.Element;
 }
 
 /**
@@ -419,6 +419,12 @@ export declare class SortableOnNavigateEvent implements BaseEvent<Sortable> {
 export declare interface SortableProps extends SortableDefaultProps {
     /**
      * (Required) The Sortable items UI.
+     *
+     * @example
+     * ```jsx
+     * const ItemUI = (props) => <div>{props.dataItem.text}</div>;
+     * <Sortable itemUI={ItemUI} />
+     * ```
      */
     itemUI: React.ComponentType<SortableItemUIProps>;
     /**
@@ -426,48 +432,98 @@ export declare interface SortableProps extends SortableDefaultProps {
      *
      * Use it to override the sortable items container component.
      *
-     * @default 'div''
+     * @default 'div'
      */
     itemsWrapUI?: React.ForwardRefExoticComponent<any>;
     /**
      * (Required) The field which uniquely identifies the Sortable items.
+     *
+     * @example
+     * ```jsx
+     * <Sortable idField="id" />
+     * ```
      */
     idField: string;
     /**
      * The field which enables or disables an item.
+     *
+     * @example
+     * ```jsx
+     * <Sortable disabledField="isDisabled" />
+     * ```
      */
     disabledField?: string;
     /**
      * (Required) The data items of the Sortable.
+     *
+     * @example
+     * ```jsx
+     * <Sortable data={[{ id: 1, text: 'Item 1' }, { id: 2, text: 'Item 2' }]} />
+     * ```
      */
     data: Array<object>;
     /**
      * Defines the CSS styles which are applied to the Sortable element.
+     *
+     * @example
+     * ```jsx
+     * <Sortable style={{ border: '1px solid black' }} />
+     * ```
      */
     style?: React.CSSProperties;
     /**
      * Defines the CSS class which is applied to the Sortable element.
+     *
+     * @example
+     * ```jsx
+     * <Sortable className="custom-sortable" />
+     * ```
      */
     className?: string;
     /**
      * Fires when the user starts dragging an item. This event is preventable.
+     *
+     * @example
+     * ```jsx
+     * <Sortable onDragStart={(event) => console.log(event)} />
+     * ```
      */
     onDragStart?: (event: SortableOnDragStartEvent) => void;
     /**
      * Fires when the user is dragging an item over another Sortable item.
+     *
+     * @example
+     * ```jsx
+     * <Sortable onDragOver={(event) => console.log(event)} />
+     * ```
      */
     onDragOver?: (event: SortableOnDragOverEvent) => void;
     /**
      * Fires when the user stops dragging an item.
+     *
+     * @example
+     * ```jsx
+     * <Sortable onDragEnd={(event) => console.log(event)} />
+     * ```
      */
     onDragEnd?: (event: SortableOnDragEndEvent) => void;
     /**
-     * Fires when the user is navigates within the Srotable by using the keyboard.
+     * Fires when the user navigates within the Sortable by using the keyboard.
+     *
+     * @example
+     * ```jsx
+     * <Sortable onNavigate={(event) => console.log(event)} />
+     * ```
      */
     onNavigate?: (event: SortableOnNavigateEvent) => void;
     /**
-     * If set to `true`, the user can use dedicated shortcuts to interact with the Srotable.
+     * If set to `true`, the user can use dedicated shortcuts to interact with the Sortable.
      * By default, navigation is disabled.
+     *
+     * @example
+     * ```jsx
+     * <Sortable navigatable={true} />
+     * ```
      */
     navigatable?: boolean;
 }

package/package-metadata.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e={name:"@progress/kendo-react-sortable",productName:"KendoReact",productCode:"KENDOUIREACT",productCodes:["KENDOUIREACT"],publishDate: 1743150000,version:"10.1.1-develop.1",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"};exports.packageMetadata=e;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e={name:"@progress/kendo-react-sortable",productName:"KendoReact",productCode:"KENDOUIREACT",productCodes:["KENDOUIREACT"],publishDate: 1745313691,version:"10.2.0-develop.10",licensingDocsUrl:"https://www.telerik.com/kendo-react-ui/components/my-license/"};exports.packageMetadata=e;

package/package-metadata.mjs

@@ -10,8 +10,8 @@ const e = {
   productName: "KendoReact",
   productCode: "KENDOUIREACT",
   productCodes: ["KENDOUIREACT"],
-  publishDate: 1743150000,
-  version: "10.1.1-develop.1",
+  publishDate: 1745313691,
+  version: "10.2.0-develop.10",
   licensingDocsUrl: "https://www.telerik.com/kendo-react-ui/components/my-license/"
 };
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-react-sortable",
-  "version": "10.1.1-develop.1",
+  "version": "10.2.0-develop.10",
   "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",
@@ -26,8 +26,8 @@
   "sideEffects": false,
   "peerDependencies": {
     "@progress/kendo-licensing": "^1.5.1",
-    "@progress/kendo-react-common": "10.1.1-develop.1",
-    "@progress/kendo-react-intl": "10.1.1-develop.1",
+    "@progress/kendo-react-common": "10.2.0-develop.10",
+    "@progress/kendo-react-intl": "10.2.0-develop.10",
     "react": "^16.8.2 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc",
     "react-dom": "^16.8.2 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
   },
@@ -52,7 +52,7 @@
     "package": {
       "productName": "KendoReact",
       "productCode": "KENDOUIREACT",
-      "publishDate": 1743150000,
+      "publishDate": 1745313691,
       "licensingDocsUrl": "https://www.telerik.com/kendo-react-ui/components/my-license/"
     }
   },