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

package/hooks/useDraggable.mjs

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-react-common",
-  "version": "16.1.0-develop.9",
+  "version": "16.2.0-develop.1",
   "description": "React Common package delivers common utilities that can be used with the KendoReact UI components. KendoReact Common Utilities package",
   "author": "Progress",
   "license": "SEE LICENSE IN LICENSE.md",