@progress/kendo-react-common 16.1.0-develop.9 → 16.2.0-develop.1

package/hooks/useDraggable.d.ts

@@ -36,6 +36,30 @@ export interface DraggableOptions {
      * Defaults to `false`.
      */
     mouseOnly?: boolean;
+    /**
+     * Set the `autoTouchAction` property to `false` to prevent the draggable from
+     * setting `touch-action: none` on the element (unless `pressHoldDelay > 0`, which
+     * requires `touch-action: none` so press-and-hold tracking is not interrupted by
+     * `pointercancel`). This allows native touch scrolling while keeping pointer event
+     * handling for mouse-based drag selection.
+     *
+     * @hidden
+     *
+     * Defaults to `true`.
+     */
+    autoTouchAction?: boolean;
+    /**
+     * Delay in milliseconds before enabling drag on touch devices.
+     * Useful to distinguish intentional drag gestures from quick scroll gestures.
+     * The pointer must stay down for this duration before drag selection starts; movement
+     * during the delay is treated as a scroll preview and is superseded by drag-select once
+     * the delay elapses, so the user doesn't need to hold still.
+     * Only applies to touch devices when `autoTouchAction` is `false`.
+     *
+     * @hidden
+     * @default 0
+     */
+    pressHoldDelay?: number;
     /**
      * Set the `autoScroll` property to `false` to disable automatic container scroll when close to the edge.
      * For more information, refer to the [Auto Scroll](https://www.telerik.com/kendo-react-ui/components/common/drag-and-drop/auto-scroll) article.

package/hooks/useDraggable.js

@@ -6,4 +6,4 @@
  *-------------------------------------------------------------------------------------------
  */
 "use client";
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const Te=require("react"),w=require("@progress/kendo-draggable-common"),i=require("../noop.js"),ve=require("./useInheritedState.js"),je=require("../drag-n-drop/context/index.js"),qe=require("./use-isomorphic-layout-effect.js");function Ae(o){const m=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(o){for(const d in o)if(d!=="default"){const h=Object.getOwnPropertyDescriptor(o,d);Object.defineProperty(m,d,h.get?h:{enumerable:!0,get:()=>o[d]})}}return m.default=o,Object.freeze(m)}const t=Ae(Te),_e=2e3;function Ue(o,m,d={}){const{onPress:h=i.noop,onRelease:Y=i.noop,onDragStart:Z=i.noop,onDrag:$=i.noop,onDragEnd:ee=i.noop}=m,{hint:a=null,mouseOnly:P=!1,autoScroll:s=!0,scrollContainer:u=null,context:Ce=je.DragAndDropContext}=d,[f,be]=t.useState(!1),[E,Ee]=t.useState(!1),{drop:ke,setDrop:ye,drag:Se,setDrag:De,drops:k,drags:y,registerDrag:S,deregisterDrag:D}=t.useContext(Ce),[x]=ve.useInheritedState([ke,ye]),[I,O]=ve.useInheritedState([Se,De]),p=t.useRef({x:0,y:0}),M=t.useRef(void 0),L=t.useRef(!1),te=t.useRef(void 0),v=t.useRef(null),T=t.useRef(!1),j=t.useRef({x:0,y:0}),q=t.useRef({x:0,y:0}),C=t.useRef({x:0,y:0}),A=t.useRef({x:0,y:0}),_=t.useRef({x:0,y:0}),U=t.useRef({x:0,y:0}),Oe=!!(typeof window!="undefined"&&window.PointerEvent),ne=!P&&Oe,l=t.useCallback(()=>o.current&&o.current.element?o.current.element:o.current,[o]),Le=t.useCallback(()=>a&&a.current&&a.current.element?a.current.element:a?a.current:null,[a]),re=t.useCallback(()=>u&&u.current&&u.current.element?u.current.element:u?u.current:null,[u]),oe=t.useCallback(()=>typeof s=="object"&&s.boundaryElementRef&&s.boundaryElementRef.current&&s.boundaryElementRef.current.element?s.boundaryElementRef.current.element:typeof s=="object"&&s.boundaryElementRef&&s.boundaryElementRef.current?s.boundaryElementRef.current:null,[s]),b=t.useRef(null);t.useImperativeHandle(b,()=>({get element(){return l()},get hint(){return Le()},onPress:Re,onDragStart:Pe,onDrag:xe,onDragEnd:Ie,onRelease:we,data:o.current}));const R=t.useCallback(()=>{const e=l();return e&&e.ownerDocument||document},[l]),g=t.useCallback(()=>{const e=R();return e&&e.defaultView||window},[R]),se=t.useCallback(()=>({get drag(){return I?I.current:null},get drop(){return x?x.current:null},get drags(){return(y!=null?y:[]).map(e=>e.current)},get drops(){return(k!=null?k:[]).map(e=>e.current)},pressed:!!f,ignoreMouse:L.current,scrollOffset:_.current,offset:j.current,pageOffset:q.current,initialScrollOffset:U.current,clientOffset:C.current,initialClientOffset:A.current,velocity:p.current,autoScroll:!!(typeof s=="object"?s.enabled!==!1:s),scrollableParent:oe(),autoScrollDirection:typeof s=="object"?s.direction:{horizontal:!0,vertical:!0},isScrolling:E}),[I,x,y,k,f,L,_,j,q,U,C,A,p,s,E,oe]),ce=t.useCallback(e=>{be(e)},[]),le=t.useCallback(e=>{Ee(e)},[]),ae=t.useCallback(e=>{p.current=e},[]),ue=t.useCallback(e=>{j.current=e},[]),ie=t.useCallback(e=>{C.current=e},[]),de=t.useCallback(e=>{q.current=e},[]),fe=t.useCallback(e=>{A.current=e},[]),ge=t.useCallback(e=>{_.current=e},[]),me=t.useCallback(e=>{U.current=e},[]),Re=t.useCallback(e=>{h(e)},[h]),we=t.useCallback(e=>{Y(e)},[Y]),Pe=t.useCallback(e=>{O(b,{target:o.current,event:e}),Z(e)},[O,o,Z]),xe=t.useCallback(e=>{$(e)},[$]),Ie=t.useCallback(e=>{T.current||(O(null,{target:o.current,event:e}),ee(e))},[ee,O,o]),n=t.useCallback(e=>{w.dispatchDragAndDrop(se(),{event:e,payload:b.current},{onVelocityChange:ae,onOffsetChange:ue,onClientOffsetChange:ie,onPageOffsetChange:de,onInitialClientOffsetChange:fe,onScrollOffsetChange:ge,onInitialScrollOffsetChange:me,onIsPressedChange:ce,onIsScrollingChange:le})},[se,ae,ue,de,ie,fe,me,ce,ge,le]),B=t.useCallback(e=>{n(e)},[n]),V=t.useCallback(e=>{n(e)},[n]),z=t.useCallback(e=>{n(e)},[n]),H=t.useCallback(e=>{n(e)},[n]),N=t.useCallback(e=>{n(e)},[n]),W=t.useCallback(e=>{n(e)},[n]),F=t.useCallback(e=>{n(e)},[n]),G=t.useCallback(e=>{e.preventDefault(),n(e)},[n]),J=t.useCallback(e=>{e.preventDefault(),n(e)},[n]),K=t.useCallback(e=>{e.preventDefault(),n(e)},[n]),Q=t.useCallback(e=>{if(e.touches.length===0&&e.changedTouches.length===1){const r=g();L.current=!0,te.current=r.setTimeout(()=>{L.current=!1},_e)}n(e)},[n,g]),X=t.useCallback(e=>{n(e)},[n]),he=t.useCallback(()=>{const e=l();if(e){const r=e.style.touchAction;return e.style.touchAction="none",()=>{e.style.touchAction=r}}},[l]),pe=t.useCallback(()=>(S==null||S(b),()=>{D==null||D(b)}),[D,S]),Me=()=>{const e=g(),r=l(),c=R();return ne?(r&&(v.current=w.getScrollableParent(r),v.current&&v.current.addEventListener("scroll",X,{passive:!0}),r.addEventListener("pointerdown",B,{passive:!0})),f&&(c.addEventListener("pointermove",V),c.addEventListener("pointerup",H,!0),c.addEventListener("contextmenu",G),c.addEventListener("pointercancel",z,{passive:!0}))):(e.addEventListener("touchmove",i.noop,{capture:!1,passive:!1}),r&&(r.addEventListener("mousedown",N,{passive:!0}),P||(r.addEventListener("touchstart",J,{passive:!0}),f&&(r.addEventListener("touchmove",K,{passive:!0}),r.addEventListener("touchend",Q,{passive:!0})))),f&&(c.addEventListener("mousemove",W,{passive:!0}),c.addEventListener("mouseup",F,{passive:!0}))),()=>{v.current&&v.current.removeEventListener("scroll",X),r&&(r.removeEventListener("pointerdown",B),r.removeEventListener("mousedown",N),r.removeEventListener("touchstart",J),r.removeEventListener("touchmove",K),r.removeEventListener("touchend",Q)),c.removeEventListener("pointermove",V),c.removeEventListener("pointerup",H,!0),c.removeEventListener("contextmenu",G),c.removeEventListener("pointercancel",z),c.removeEventListener("mousemove",W),c.removeEventListener("mouseup",F),e.removeEventListener("touchmove",i.noop),e.clearTimeout(te.current)}};t.useEffect(()=>{const e=g();if(E){const r=re()||w.getScrollableParent(document.elementFromPoint(C.current.x,C.current.y));e.clearInterval(M.current),M.current=e.setInterval(()=>{w.autoScroll(r,{x:p.current.x,y:p.current.y})},50)}return()=>{e.clearInterval(M.current)}},[l,re,g,E]),t.useEffect(he,[he]),t.useEffect(Me,[f,g,l,R,P,ne,G,N,W,F,z,B,V,H,Q,K,J,X]),t.useEffect(()=>(T.current=!1,()=>{T.current=!0}),[]),qe.useIsomorphicLayoutEffect(pe,[pe])}exports.useDraggable=Ue;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const Fe=require("react"),Y=require("@progress/kendo-draggable-common"),p=require("../noop.js"),Re=require("./useInheritedState.js"),We=require("../drag-n-drop/context/index.js"),Ge=require("./use-isomorphic-layout-effect.js");function Je(c){const S=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(c){for(const g in c)if(g!=="default"){const D=Object.getOwnPropertyDescriptor(c,g);Object.defineProperty(S,g,D.get?D:{enumerable:!0,get:()=>c[g]})}}return S.default=c,Object.freeze(S)}const t=Je(Fe),Ke=2e3,Qe=16;function Ze(c,S,g={}){const{onPress:D=p.noop,onRelease:ue=p.noop,onDragStart:ae=p.noop,onDrag:ie=p.noop,onDragEnd:de=p.noop}=S,{hint:d=null,mouseOnly:j=!1,autoTouchAction:A=!0,pressHoldDelay:_=0,autoScroll:s=!0,scrollContainer:f=null,context:Te=We.DragAndDropContext}=g,[m,Ie]=t.useState(!1),[L,Me]=t.useState(!1),{drop:He,setDrop:Xe,drag:Ye,setDrag:je,drops:w,drags:R,registerDrag:T,deregisterDrag:I}=t.useContext(Te),[q]=Re.useInheritedState([He,Xe]),[N,M]=Re.useInheritedState([Ye,je]),O=t.useRef({x:0,y:0}),U=t.useRef(void 0),H=t.useRef(!1),fe=t.useRef(void 0),h=t.useRef(void 0),P=t.useRef(!1),C=t.useRef(null),i=t.useRef(void 0),b=t.useRef(!1),l=t.useRef(null),u=t.useRef(null),B=t.useRef(!1),V=t.useRef({x:0,y:0}),z=t.useRef({x:0,y:0}),x=t.useRef({x:0,y:0}),F=t.useRef({x:0,y:0}),W=t.useRef({x:0,y:0}),G=t.useRef({x:0,y:0}),Ae=!!(typeof window!="undefined"&&window.PointerEvent),he=!j&&Ae,v=!A&&_>0,a=t.useCallback(()=>c.current&&c.current.element?c.current.element:c.current,[c]),_e=t.useCallback(()=>d&&d.current&&d.current.element?d.current.element:d?d.current:null,[d]),pe=t.useCallback(()=>f&&f.current&&f.current.element?f.current.element:f?f.current:null,[f]),ge=t.useCallback(()=>{if(typeof s=="object"&&s.boundaryElementRef&&s.boundaryElementRef.current){const e=s.boundaryElementRef.current;return typeof e=="object"&&"element"in e?e.element:e}return u.current},[s]),E=t.useRef(null);t.useImperativeHandle(E,()=>({get element(){return a()},get hint(){return _e()},onPress:qe,onDragStart:Ue,onDrag:Be,onDragEnd:Ve,onRelease:Ne,data:c.current}));const X=t.useCallback(()=>{const e=a();return e&&e.ownerDocument||document},[a]),y=t.useCallback(()=>{const e=X();return e&&e.defaultView||window},[X]),me=t.useCallback(()=>({get drag(){return N?N.current:null},get drop(){return q?q.current:null},get drags(){return(R!=null?R:[]).map(e=>e.current)},get drops(){return(w!=null?w:[]).map(e=>e.current)},pressed:!!m,ignoreMouse:H.current,scrollOffset:W.current,offset:V.current,pageOffset:z.current,initialScrollOffset:G.current,clientOffset:x.current,initialClientOffset:F.current,velocity:O.current,autoScroll:!!(typeof s=="object"?s.enabled!==!1:s),scrollableParent:ge(),autoScrollDirection:typeof s=="object"?s.direction:{horizontal:!0,vertical:!0},isScrolling:L}),[N,q,R,w,m,H,W,V,z,G,x,F,O,s,L,ge]),Ce=t.useCallback(e=>{Ie(e)},[]),be=t.useCallback(e=>{Me(e)},[]),ve=t.useCallback(e=>{O.current=e},[]),Ee=t.useCallback(e=>{V.current=e},[]),ye=t.useCallback(e=>{x.current=e},[]),ke=t.useCallback(e=>{z.current=e},[]),Se=t.useCallback(e=>{F.current=e},[]),De=t.useCallback(e=>{W.current=e},[]),Oe=t.useCallback(e=>{G.current=e},[]),qe=t.useCallback(e=>{D(e)},[D]),Ne=t.useCallback(e=>{ue(e)},[ue]),Ue=t.useCallback(e=>{M(E,{target:c.current,event:e}),ae(e)},[M,c,ae]),Be=t.useCallback(e=>{ie(e)},[ie]),Ve=t.useCallback(e=>{B.current||(M(null,{target:c.current,event:e}),de(e))},[de,M,c]),r=t.useCallback(e=>{E.current&&Y.dispatchDragAndDrop(me(),{event:e,payload:E.current},{onVelocityChange:ve,onOffsetChange:Ee,onClientOffsetChange:ye,onPageOffsetChange:ke,onInitialClientOffsetChange:Se,onScrollOffsetChange:De,onInitialScrollOffsetChange:Oe,onIsPressedChange:Ce,onIsScrollingChange:be})},[me,ve,Ee,ke,ye,Se,Oe,Ce,De,be]),k=t.useCallback(()=>{h.current&&(window.clearTimeout(h.current),h.current=void 0),P.current=!1,C.current=null,i.current=void 0,b.current=!1,l.current=null},[]),Pe=t.useCallback(e=>v&&e.pointerType==="touch"&&e.pointerId===i.current,[v]),J=t.useCallback((e,n)=>{u.current&&(u.current.scrollTop+=e.y-n.y,u.current.scrollLeft+=e.x-n.x)},[]),xe=t.useCallback(e=>{i.current=e.pointerId,C.current={x:e.clientX,y:e.clientY},l.current={x:e.clientX,y:e.clientY};const n=a();h.current=window.setTimeout(()=>{P.current=!0,b.current=!1;try{n&&i.current!==void 0&&n.setPointerCapture(i.current)}catch{}},_)},[a,_]),K=t.useCallback(e=>{if(!e.isPrimary){r(e);return}k(),v&&e.pointerType==="touch"?xe(e):P.current=!0,r(e)},[r,v,k,xe]),Q=t.useCallback(e=>{if(Pe(e)){if(!P.current&&C.current){if(b.current){l.current&&J(l.current,{x:e.clientX,y:e.clientY}),l.current={x:e.clientX,y:e.clientY};return}const n=Math.abs(e.clientX-C.current.x),o=Math.abs(e.clientY-C.current.y);if(Math.hypot(n,o)>Qe){b.current=!0,J(C.current,{x:e.clientX,y:e.clientY}),l.current={x:e.clientX,y:e.clientY};return}return}if(P.current){if(l.current&&Math.round(e.clientX)===Math.round(l.current.x)&&Math.round(e.clientY)===Math.round(l.current.y))return;l.current={x:e.clientX,y:e.clientY}}}r(e)},[r,Pe,J]),Z=t.useCallback(e=>{(i.current===void 0||e.pointerId===i.current)&&k(),r(e)},[r,k]),$=t.useCallback(e=>{if(i.current!==void 0&&e.pointerId!==i.current){r(e);return}const n=b.current;if(k(),n){const o=new PointerEvent("pointercancel",e);r(o);return}r(e)},[r,k]),ee=t.useCallback(e=>{r(e)},[r]),te=t.useCallback(e=>{r(e)},[r]),ne=t.useCallback(e=>{r(e)},[r]),re=t.useCallback(e=>{e.preventDefault(),r(e)},[r]),oe=t.useCallback(e=>{e.preventDefault(),r(e)},[r]),ce=t.useCallback(e=>{e.preventDefault(),r(e)},[r]),se=t.useCallback(e=>{if(e.touches.length===0&&e.changedTouches.length===1){const n=y();H.current=!0,fe.current=n.setTimeout(()=>{H.current=!1},Ke)}r(e)},[r,y]),le=t.useCallback(e=>{b.current||r(e)},[r]),Le=t.useCallback(()=>{const e=a();if(e&&(A||v)){const n=e.style.touchAction;return e.style.touchAction="none",()=>{e.style.touchAction=n}}},[a,A,v]),we=t.useCallback(()=>(T==null||T(E),()=>{I==null||I(E)}),[I,T]),ze=()=>{const e=y(),n=a(),o=X();return he?(n&&(u.current=Y.getScrollableParent(n),u.current&&u.current.addEventListener("scroll",le,{passive:!0}),n.addEventListener("pointerdown",K,{passive:!0})),m&&(o.addEventListener("pointermove",Q),o.addEventListener("pointerup",$,!0),o.addEventListener("contextmenu",re),o.addEventListener("pointercancel",Z,{passive:!0}))):(e.addEventListener("touchmove",p.noop,{capture:!1,passive:!1}),n&&(n.addEventListener("mousedown",ee,{passive:!0}),j||(n.addEventListener("touchstart",oe,{passive:!0}),m&&(n.addEventListener("touchmove",ce,{passive:!0}),n.addEventListener("touchend",se,{passive:!0})))),m&&(o.addEventListener("mousemove",te,{passive:!0}),o.addEventListener("mouseup",ne,{passive:!0}))),()=>{u.current&&u.current.removeEventListener("scroll",le),n&&(n.removeEventListener("pointerdown",K),n.removeEventListener("mousedown",ee),n.removeEventListener("touchstart",oe),n.removeEventListener("touchmove",ce),n.removeEventListener("touchend",se)),o.removeEventListener("pointermove",Q),o.removeEventListener("pointerup",$,!0),o.removeEventListener("contextmenu",re),o.removeEventListener("pointercancel",Z),o.removeEventListener("mousemove",te),o.removeEventListener("mouseup",ne),e.removeEventListener("touchmove",p.noop),e.clearTimeout(fe.current)}};t.useEffect(()=>{const e=y();if(L){const n=pe()||u.current||Y.getScrollableParent(document.elementFromPoint(x.current.x,x.current.y));e.clearInterval(U.current),U.current=e.setInterval(()=>{Y.autoScroll(n,{x:O.current.x,y:O.current.y})},50)}return()=>{e.clearInterval(U.current)}},[a,pe,y,L]),t.useEffect(Le,[Le]),t.useEffect(ze,[m,y,a,X,j,he,re,ee,te,ne,Z,K,Q,$,se,ce,oe,le]),t.useEffect(()=>(B.current=!1,()=>{B.current=!0,h.current&&(window.clearTimeout(h.current),h.current=void 0)}),[]),Ge.useIsomorphicLayoutEffect(we,[we])}exports.useDraggable=Ze;