@progress/kendo-react-common 16.2.0-develop.15 → 16.2.0-develop.17

package/hooks/useDraggable.mjs

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@progress/kendo-react-common",
-  "version": "16.2.0-develop.15",
+  "version": "16.2.0-develop.17",
   "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",