@progress/kendo-react-grid/components/GridDraggableRowsContainer.js

React Data Grid (Table) provides 100+ ready-to-use data grid features. KendoReact Grid package

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2026 Progress Software Corporation. All rights reserved.
 * 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 W=require("react"),X=require("../utils/GridContext.js"),R=require("@progress/kendo-react-common"),n=require("./utils.js"),J=require("react-dom"),I=require("@progress/kendo-svg-icons"),K=require("../utils/index.js");function Q(u){const o=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(u){for(const f in u)if(f!=="default"){const D=Object.getOwnPropertyDescriptor(u,f);Object.defineProperty(o,f,D.get?D:{enumerable:!0,get:()=>u[f]})}}return o.default=u,Object.freeze(o)}const e=Q(W),O={zIndex:"19000",position:"absolute",display:"none",visibility:"hidden"},T={zIndex:"20000",display:"flex",position:"fixed",visibility:"hidden",pointerEvents:"none"},U=u=>{const{rowReorderSettings:o,columns:f,unstyled:D}=u,{rowReorder:k,reorderRowDragTargetRef:d,reorderRowDropTargetRef:c,activeDragRowDataItemRef:g,tableBodyElementRef:N}=e.useContext(X.GridContext),[P,v]=e.useState(!1),[q,M]=e.useState(I.cancelIcon),C=e.useRef(null),p=e.useRef(null),s=e.useRef(null),E=e.useRef(null),m=e.useRef(!1),y=e.useRef(null),h=e.useRef(null),S=typeof o=="object"?o.enabled:o;e.useEffect(()=>{N.current=C.current},[]);const j=t=>{var l;const r=t.originalEvent.target;r.closest(".k-drag-cell")&&(E.current=t.offsetY,m.current=!0,d.current=r.closest(".k-table-row"),h.current=(l=d.current)==null?void 0:l.parentElement)},Y=t=>{!m.current||!S||!g.current||(d.current&&(d.current.style.userSelect="none"),v(!0))},B=t=>{if(!m.current&&!p.current)return;const{clientX:r,clientY:i}=t,l=E.current,b={x:r,y:i-l};p.current&&(p.current.style.left=`${b.x}px`,p.current.style.top=`${b.y}px`,p.current.style.visibility="visible"),G(t)},F=t=>{var i;if(!S||!g.current)return;v(!1);const r=Number((i=c.current)==null?void 0:i.getAttribute("absolute-row-index"));k(t,r,y.current),m.current=!1,h.current=null};R.useDraggable(C,{onPress:j,onDragStart:Y,onDrag:B,onDragEnd:F});const G=t=>{y.current=H(t),$()},$=()=>{var l;if(y.current===n.dropDirection.forbidden||!c.current){z();return}V();const t=n.getOffset(c.current);let r=t.top;const i=t.left+(((l=s.current)==null?void 0:l.offsetWidth)||0)/2;y.current===n.dropDirection.after&&(r+=c.current.offsetHeight),s.current&&(s.current.style.top=`${r}px`,s.current.style.left=`${i}px`,s.current.style.visibility="visible")},z=()=>{s.current&&(s.current.style.display="none")},V=()=>{s.current&&(s.current.style.display="")},_=()=>{if(g.current){if(o.dragClue){if(typeof o.dragClue=="string")return o.dragClue}else{const t=f.find(i=>!i.hidden&&i.columnType==="data");return g.current[t.field]}return o.dragClue(g.current)}},H=t=>{var w;if(c.current===d.current||!c.current||((w=c.current)==null?void 0:w.parentElement)!==h.current)return n.dropDirection.forbidden;const r=c.current.getBoundingClientRect(),l=r.height/2,b=t.clientY,x=r.top;let a=null;b<x+l?a=n.dropDirection.before:b>=x+r.height-l&&(a=n.dropDirection.after),(a===n.dropDirection.before&&c.current===d.current.nextElementSibling||a===n.dropDirection.after&&c.current===d.current.previousElementSibling)&&(a=n.dropDirection.forbidden);const L=a===n.dropDirection.forbidden?I.cancelIcon:I.insertMiddleIcon;return M(L),a},A=e.useMemo(_,[g.current]);return e.createElement(e.Fragment,null,P&&J.createPortal(e.createElement(e.Fragment,null,e.createElement("div",{ref:s,style:O,className:R.classNames(D.rowReorder({dropIndicatorMain:!0,dropIndicatorDirection:!0}))},e.createElement("div",{className:"k-drop-hint-start"}),e.createElement("div",{className:"k-drop-hint-line"})),e.createElement("div",{ref:p,style:T,className:R.classNames(D.rowReorder({dragClueMain:!0,dragClueOperation:!0}))},e.createElement(R.SvgIcon,{className:"k-drag-status",icon:q}),A)),document.body),K.cloneReactElement(u.children,{ref:C}))};exports.GridReorderableRowsContainer=U;exports.dropIndicatorStyles=O;exports.hintClueStyles=T;