@progress/kendo-react-sortable 13.3.0 → 13.4.0-develop.2

package/Sortable.d.ts

@@ -0,0 +1,223 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { default as PropTypes } from 'prop-types';
+import { DraggableDragEvent, DraggableDragStartEvent, DraggableReleaseEvent, Navigation } from '@progress/kendo-react-common';
+import { SortableProps } from './interfaces/SortableProps.js';
+import { SortableDefaultProps } from './interfaces/SortableDefaultProps.js';
+import * as React from 'react';
+/**
+ * @hidden
+ */
+interface SortableState {
+    clientX: number;
+    clientY: number;
+    isDragging: boolean;
+    activeId: string;
+    dragCueWidth: number;
+    dragCueHeight: number;
+}
+export declare class Sortable extends React.Component<SortableProps, SortableState> {
+    /**
+     * @hidden
+     */
+    static defaultProps: SortableDefaultProps;
+    /**
+     * @hidden
+     */
+    static propTypes: {
+        idField: PropTypes.Validator<string>;
+        disabledField: PropTypes.Requireable<string>;
+        data: PropTypes.Validator<any[]>;
+        tabIndex: PropTypes.Requireable<number>;
+        navigation: PropTypes.Requireable<boolean>;
+        animation: PropTypes.Requireable<boolean>;
+        itemsWrapUI: PropTypes.Requireable<any>;
+        itemUI: PropTypes.Validator<(...args: any[]) => any>;
+        emptyItemUI: PropTypes.Requireable<(...args: any[]) => any>;
+        style: PropTypes.Requireable<object>;
+        className: PropTypes.Requireable<string>;
+        onDragStart: PropTypes.Requireable<(...args: any[]) => any>;
+        onDragOver: PropTypes.Requireable<(...args: any[]) => any>;
+        onDragEnd: PropTypes.Requireable<(...args: any[]) => any>;
+        onNavigate: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+    /**
+     * @hidden
+     */
+    state: {
+        clientX: number;
+        clientY: number;
+        isDragging: boolean;
+        activeId: string;
+        dragCueWidth: number;
+        dragCueHeight: number;
+    };
+    private isRtl;
+    private get container();
+    private itemRefsMap;
+    private oldSizesMap;
+    private animatingItemMap;
+    private draggableRef;
+    private offsetParent;
+    private isUnmounted;
+    private focusActiveId;
+    private isKeyboardNavigated;
+    private isDragPrevented;
+    private navigation?;
+    private readonly showLicenseWatermark;
+    private readonly licenseMessage?;
+    constructor(props: SortableProps);
+    /**
+     * @hidden
+     */
+    getSnapshotBeforeUpdate(): null;
+    /**
+     * @hidden
+     */
+    componentDidUpdate(previousProps: SortableProps): void;
+    /**
+     * @hidden
+     */
+    componentDidMount(): void;
+    /**
+     * @hidden
+     */
+    componentWillUnmount(): void;
+    /**
+     * @hidden
+     */
+    windowTimeout: (id: any) => void;
+    /**
+     * @hidden
+     */
+    swapItems: (newState: object[], source: number, destination: number) => number;
+    /**
+     * @hidden
+     */
+    generateNewState: (prevIndex: number, nextIndex: number) => object[];
+    /**
+     * @hidden
+     */
+    closestSortableItem: (target: HTMLElement | null) => {
+        element: HTMLElement | null;
+        id: string;
+    };
+    /**
+     * @hidden
+     */
+    isSortable: (target: HTMLElement) => boolean;
+    /**
+     * @hidden
+     */
+    closestSortable: (target: HTMLElement | null) => HTMLElement | null;
+    /**
+     * @hidden
+     */
+    isSameSortable: (element: HTMLElement) => boolean;
+    /**
+     * @hidden
+     */
+    idComparer: (id1: any, id2: any) => boolean;
+    /**
+     * @hidden
+     */
+    findItem: (id: string) => object | undefined;
+    /**
+     * @hidden
+     */
+    findIndex: (id: string) => number;
+    /**
+     * @hidden
+     */
+    isItemDisabled: (item: any) => boolean;
+    /**
+     * @hidden
+     */
+    shouldResetActive: () => boolean;
+    /**
+     * @hidden
+     */
+    parentOffset(): any;
+    /**
+     * @hidden
+     */
+    widgetTarget: (target: any) => boolean;
+    /**
+     * @hidden
+     */
+    allowDrag: (target: HTMLElement) => boolean;
+    /**
+     * @hidden
+     */
+    onDragStart: (eventData: DraggableDragStartEvent) => void;
+    /**
+     * @hidden
+     */
+    onDragOver: (eventData: DraggableDragEvent) => void;
+    /**
+     * @hidden
+     */
+    onDragEnd: (eventData: DraggableReleaseEvent) => void;
+    /**
+     * @hidden
+     */
+    shouldReorder: (draggerOverElement: HTMLElement | null, clientX: number, clientY: number) => boolean | null;
+    /**
+     * @hidden
+     */
+    thresholdRect: (draggerOverElement: HTMLElement | null) => {
+        top: number;
+        left: number;
+        bottom: number;
+        right: number;
+    } | null;
+    /**
+     * @hidden
+     */
+    onItemBlur: () => void;
+    /**
+     * @hidden
+     */
+    onItemFocus: (event: React.FocusEvent<HTMLDivElement>) => void;
+    /**
+     * @hidden
+     */
+    resetState: (resetActive?: boolean) => void;
+    /**
+     * @hidden
+     */
+    renderData: () => React.JSX.Element[];
+    /**
+     * @hidden
+     */
+    renderNoData: () => React.JSX.Element | undefined;
+    /**
+     * @hidden
+     */
+    renderDragCue: () => React.JSX.Element | undefined;
+    /**
+     * @hidden
+     */
+    refAssign: (element: any, id: any) => void;
+    /**
+     * @hidden
+     */
+    draggableRefAssign: (ref: any) => void;
+    /**
+     * @hidden
+     */
+    onKeyDown: (event: React.KeyboardEvent<HTMLDivElement>) => void;
+    /**
+     * @hidden
+     */
+    handleNext: (t: HTMLElement, nav: Navigation, ev: React.KeyboardEvent<HTMLElement>) => void;
+    handlePrev: (t: HTMLElement, nav: Navigation, ev: React.KeyboardEvent<HTMLElement>) => void;
+    moveItem: (t: HTMLElement, nav: Navigation, ev: React.KeyboardEvent<HTMLElement>, direction: 'next' | 'prev') => void;
+    render(): React.JSX.Element;
+}
+export {};

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=Object.freeze({name:"@progress/kendo-react-sortable",productName:"KendoReact",productCode:"KENDOUIREACT",productCodes:["KENDOUIREACT"],publishDate:0,version:"13.3.0",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.licenseMessage=s.getLicenseMessage(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",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,{message:this.licenseMessage})))}};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=Object.freeze({name:"@progress/kendo-react-sortable",productName:"KendoReact",productCode:"KENDOUIREACT",productCodes:["KENDOUIREACT"],publishDate:0,version:"13.4.0-develop.2",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.licenseMessage=s.getLicenseMessage(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",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,{message:this.licenseMessage})))}};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/events/BaseEvent.d.ts

@@ -0,0 +1,16 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+/**
+ * @hidden
+ */
+export interface BaseEvent<T extends React.Component> {
+    /**
+     * An event target.
+     */
+    target: T;
+}

package/events/PreventableEvent.d.ts

@@ -0,0 +1,25 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+/**
+ * @hidden
+ */
+export declare abstract class PreventableEvent {
+    private prevented;
+    /**
+     * Prevents the default action for a specified event.
+     * In this way, the source component suppresses the built-in behavior that follows the event.
+     */
+    preventDefault(): void;
+    /**
+     * Returns `true` if the event was prevented by any of its subscribers.
+     *
+     * @returns - Returns `true` if the default action was prevented.
+     * Otherwise, returns `false`.
+     */
+    isDefaultPrevented(): boolean;
+}

package/events/SortableOnDragEndEvent.d.ts

@@ -0,0 +1,34 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { BaseEvent } from './BaseEvent.js';
+import { Sortable } from '../Sortable.js';
+/**
+ * The `SortableOnDragEndEvent` event.
+ */
+export declare class SortableOnDragEndEvent implements BaseEvent<Sortable> {
+    /**
+     * The Sortable component.
+     */
+    target: Sortable;
+    /**
+     * The previous index of the dragged item.
+     */
+    prevIndex: number;
+    /**
+     * The new index of the dragged item.
+     */
+    nextIndex: number;
+    /**
+     * The new state of the Sortable data.
+     */
+    newState: Array<object>;
+    /**
+     * @hidden
+     */
+    constructor(target: Sortable, prevIndex: number, nextIndex: number, newState: Array<object>);
+}

package/events/SortableOnDragOverEvent.d.ts

@@ -0,0 +1,34 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { BaseEvent } from './BaseEvent.js';
+import { Sortable } from '../Sortable.js';
+/**
+ * The `SortableOnDragOverEvent` event.
+ */
+export declare class SortableOnDragOverEvent implements BaseEvent<Sortable> {
+    /**
+     * The Sortable component.
+     */
+    target: Sortable;
+    /**
+     * The previous index of the dragged item.
+     */
+    prevIndex: number;
+    /**
+     * The new index of the dragged item.
+     */
+    nextIndex: number;
+    /**
+     * The new state of the Sortable data.
+     */
+    newState: Array<object>;
+    /**
+     * @hidden
+     */
+    constructor(target: Sortable, prevIndex: number, nextIndex: number, newState: Array<object>);
+}

package/events/SortableOnDragStartEvent.d.ts

@@ -0,0 +1,31 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { BaseEvent } from './BaseEvent.js';
+import { Sortable } from '../Sortable.js';
+import { PreventableEvent } from './PreventableEvent.js';
+/**
+ * The `SortableOnDragStartEvent` event.
+ */
+export declare class SortableOnDragStartEvent extends PreventableEvent implements BaseEvent<Sortable> {
+    /**
+     * The Sortable component.
+     */
+    target: Sortable;
+    /**
+     * The target element.
+     */
+    element: HTMLElement;
+    /**
+     * The previous index of the dragged item.
+     */
+    prevIndex: number;
+    /**
+     * @hidden
+     */
+    constructor(target: Sortable, prevIndex: number, element: HTMLElement);
+}

package/events/SortableOnNavigateEvent.d.ts

@@ -0,0 +1,34 @@
+/**
+ * @license
+ *-------------------------------------------------------------------------------------------
+ * Copyright © 2026 Progress Software Corporation. All rights reserved.
+ * Licensed under commercial license. See LICENSE.md in the package root for more information
+ *-------------------------------------------------------------------------------------------
+ */
+import { BaseEvent } from './BaseEvent.js';
+import { Sortable } from '../Sortable.js';
+/**
+ * The `SortableOnNavigateEvent` event.
+ */
+export declare class SortableOnNavigateEvent implements BaseEvent<Sortable> {
+    /**
+     * The Sortable component.
+     */
+    target: Sortable;
+    /**
+     * The previous index of the dragged item.
+     */
+    prevIndex: number;
+    /**
+     * The new index of the dragged item.
+     */
+    nextIndex: number;
+    /**
+     * The new state of the Sortable data.
+     */
+    newState: Array<object>;
+    /**
+     * @hidden
+     */
+    constructor(target: Sortable, prevIndex: number, nextIndex: number, newState: Array<object>);
+}