@progress/kendo-react-layout 13.4.0-develop.1 → 13.4.0-develop.3

package/tilelayout/InternalTile.mjs

@@ -5,233 +5,218 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import * as d from "react";
-import a from "prop-types";
-import { getScrollbarWidth as f, canUseDOM as y, classNames as m, Draggable as x } from "@progress/kendo-react-common";
-import { ResizeHandlers as E } from "./ResizeHandlers.mjs";
-const g = 200, p = class p extends d.Component {
-  constructor() {
-    super(...arguments), this.state = {
-      rtl: !1,
-      visibleHint: !1
-    }, this.oldSize = {}, this.draggable = null, this.dragging = !1, this.resizing = !1, this.element = null, this.hintElement = null, this.ignoreDrag = !1, this.pressOffset = { x: 0, y: 0 }, this.pressXY = { x: 0, y: 0 }, this.currentTranslate = { x: 0, y: 0 }, this.preventDataOps = void 0, this.handleResize = (t, e) => {
-      if (e.end) {
-        this.handleRelease();
+import * as n from "react";
+import o from "prop-types";
+import { getScrollbarWidth as G, canUseDOM as J, classNames as Y, Draggable as Q } from "@progress/kendo-react-common";
+import { ResizeHandlers as Z } from "./ResizeHandlers.mjs";
+const O = 200, T = {
+  resizable: !0,
+  reorderable: !0
+}, N = (t) => {
+  var B, X;
+  const b = (B = t.reorderable) != null ? B : T.reorderable, H = (X = t.resizable) != null ? X : T.resizable, s = n.useRef(null), c = n.useRef(null), k = n.useRef(null), v = n.useRef({}), E = n.useRef(!1), D = n.useRef(!1), z = n.useRef(!1), $ = n.useRef({ x: 0, y: 0 }), w = n.useRef({ x: 0, y: 0 }), u = n.useRef({ x: 0, y: 0 }), P = n.useRef(void 0), x = n.useRef(t), [R, F] = n.useState(!1), [q, I] = n.useState(!1), d = n.useCallback(() => k.current ? k.current.element : void 0, []), S = n.useCallback(() => {
+    if (s.current && c.current) {
+      const e = s.current.getBoundingClientRect();
+      c.current.style.top = e.top + "px", c.current.style.left = e.left + "px", c.current.style.height = s.current.offsetHeight + "px", c.current.style.width = s.current.offsetWidth + "px";
+    }
+  }, []), A = n.useCallback(() => {
+    S();
+  }, [S]), p = n.useCallback(() => {
+    setTimeout(() => {
+      S();
+    }, 100);
+  }, [S]), U = n.useCallback(() => {
+    const e = d();
+    if (!e || !c.current)
+      return;
+    const r = e.getBoundingClientRect(), i = r.top + u.current.y, a = r.left + u.current.x;
+    c.current.style.top = `${i}px`, c.current.style.left = `${a}px`, c.current.style.display = "block";
+  }, [d]), L = n.useCallback(() => {
+    E.current = D.current = !1, u.current = { x: 0, y: 0 }, s.current && c.current && (s.current.style.zIndex = "1", c.current.classList.remove("k-layout-item-hint-resize"), I(!1));
+    const e = d();
+    e && (e.style.transform = "translate(0px, 0px)", e.style.transition = `transform ${O}ms cubic-bezier(0.2, 0, 0, 1) 0s`, e.style.marginRight = "0px", e.style.marginLeft = "0px", e.style.height = "100%", e.classList.remove("k-cursor-grabbing"), b && e.classList.add("k-cursor-move")), t.onRelease();
+  }, [t, b, d]), W = n.useCallback(
+    (e, r) => {
+      if (r.end) {
+        L();
         return;
       }
-      if (!this.element || !this.hintElement)
+      if (!s.current || !c.current)
         return;
-      const n = t.clientX, l = t.clientY;
-      this.resizing = !0;
-      const r = (e.direction !== "ns" ? n - this.pressXY.x : 0) * (this.state.rtl ? -1 : 1), s = e.direction !== "ew" ? l - this.pressXY.y : 0;
-      if (this.dragElement && (this.state.rtl ? this.dragElement.style.marginLeft = -r + "px" : this.dragElement.style.marginRight = -r + "px", this.dragElement.style.height = `calc(100% + ${s}px)`), this.hintElement.classList.add("k-layout-item-hint-resize"), this.preventDataOps)
+      const i = e.clientX, a = e.clientY;
+      D.current = !0;
+      const f = (r.direction !== "ns" ? i - w.current.x : 0) * (R ? -1 : 1), l = r.direction !== "ew" ? a - w.current.y : 0, h = d();
+      if (h && (R ? h.style.marginLeft = -f + "px" : h.style.marginRight = -f + "px", h.style.height = `calc(100% + ${l}px)`), c.current.classList.add("k-layout-item-hint-resize"), P.current)
         return;
-      let i = 0, o = 0;
-      const h = this.element.getBoundingClientRect();
-      r > h.width / this.props.defaultPosition.colSpan / 3 && (i = 1), r < -h.width / this.props.defaultPosition.colSpan / 1.25 && (i = -1), s > h.height / this.props.defaultPosition.rowSpan / 3 && (o = 1), s < -h.height / this.props.defaultPosition.rowSpan / 1.25 && (o = -1), (i !== 0 || o !== 0) && this.props.update(this.props.index, 0, 0, o, i);
-    }, this.handlePress = (t) => {
-      if (!this.dragElement)
+      let g = 0, y = 0;
+      const C = s.current.getBoundingClientRect();
+      f > C.width / t.defaultPosition.colSpan / 3 && (g = 1), f < -C.width / t.defaultPosition.colSpan / 1.25 && (g = -1), l > C.height / t.defaultPosition.rowSpan / 3 && (y = 1), l < -C.height / t.defaultPosition.rowSpan / 1.25 && (y = -1), (g !== 0 || y !== 0) && t.update(t.index, 0, 0, y, g);
+    },
+    [R, t, L, d]
+  ), M = n.useCallback(
+    (e) => {
+      var a;
+      const r = d();
+      if (!r)
         return;
-      if (this.pressXY = {
-        x: t.event.clientX,
-        y: t.event.clientY
-      }, this.ignoreDrag = !1, this.props.ignoreDrag && this.props.ignoreDrag(t.event.originalEvent)) {
-        this.ignoreDrag = !0;
+      if (w.current = {
+        x: e.event.clientX,
+        y: e.event.clientY
+      }, z.current = !1, (a = t.ignoreDrag) != null && a.call(t, e.event.originalEvent)) {
+        z.current = !0;
         return;
       }
-      this.element && (this.element.style.zIndex = "10", this.setState({ visibleHint: !0 })), this.dragElement.classList.remove("k-cursor-move"), this.dragElement.classList.add("k-cursor-grabbing");
-      const e = this.dragElement.getBoundingClientRect();
-      this.pressOffset = {
-        x: t.event.clientX - e.x,
-        y: t.event.clientY - e.y
-      }, this.props.onPress();
-    }, this.handleDrag = (t) => {
-      var i;
-      if (this.ignoreDrag)
-        return;
-      const e = this.dragElement;
-      if (t.event.originalEvent.defaultPrevented || !e)
+      s.current && (s.current.style.zIndex = "10", I(!0)), r.classList.remove("k-cursor-move"), r.classList.add("k-cursor-grabbing");
+      const i = r.getBoundingClientRect();
+      $.current = {
+        x: e.event.clientX - i.x,
+        y: e.event.clientY - i.y
+      }, t.onPress();
+    },
+    [t, d]
+  ), j = n.useCallback(
+    (e) => {
+      var h;
+      if (z.current)
         return;
-      this.dragging = !0, t.event.originalEvent.preventDefault();
-      const n = e.getBoundingClientRect();
-      if (this.currentTranslate = {
-        x: t.event.clientX - n.x - this.pressOffset.x + this.currentTranslate.x,
-        y: t.event.clientY - n.y - this.pressOffset.y + this.currentTranslate.y
-      }, e.style.transform = `translate(${this.currentTranslate.x}px, ${this.currentTranslate.y}px)`, e.style.transition = "transform 0s", this.preventDataOps)
+      const r = d();
+      if (e.event.originalEvent.defaultPrevented || !r)
         return;
-      let l = 0, r = 0;
-      this.currentTranslate.y > 0.7 * n.height / this.props.defaultPosition.rowSpan && (r = 1), this.currentTranslate.y < 0.7 * -n.height / this.props.defaultPosition.rowSpan && (r = -1), this.currentTranslate.x > 0.7 * n.width / this.props.defaultPosition.colSpan && (l = 1), this.currentTranslate.x < 0.7 * -n.width / this.props.defaultPosition.colSpan && (l = -1), this.props.update(this.props.index, r, this.state.rtl ? -l : l, 0, 0);
-      const s = (i = this.element) == null ? void 0 : i.closest(".k-tilelayout");
-      if (s && this.hintElement) {
-        const o = s.getBoundingClientRect(), h = f() || 50;
-        t.event.clientX < o.left - h || t.event.clientX > o.right - h || t.event.clientY < o.top || t.event.clientY > o.bottom ? this.hintElement.style.display = "none" : this.hintElement.style.display = "block";
-      }
-    }, this.handleRelease = () => {
-      this.dragging = this.resizing = !1, this.currentTranslate = { x: 0, y: 0 }, this.element && this.hintElement && (this.element.style.zIndex = "1", this.hintElement.classList.remove("k-layout-item-hint-resize"), this.setState({ visibleHint: !1 }));
-      const t = this.dragElement;
-      t && (t.style.transform = "translate(0px, 0px)", t.style.transition = `transform ${g}ms cubic-bezier(0.2, 0, 0, 1) 0s`, t.style.marginRight = "0px", t.style.marginLeft = "0px", t.style.height = "100%", t.classList.remove("k-cursor-grabbing"), this.reorderable && t.classList.add("k-cursor-move")), this.props.onRelease();
-    }, this.handleMouseDown = () => {
-      this.setInitialHintPosition();
-    }, this.handleMouseUp = () => {
-      setTimeout(() => {
-        this.setInitialHintPosition();
-      }, 100);
-    }, this.calcNewHintPosition = () => {
-      if (!this.dragElement || !this.hintElement)
+      E.current = !0, e.event.originalEvent.preventDefault();
+      const i = r.getBoundingClientRect();
+      if (u.current = {
+        x: e.event.clientX - i.x - $.current.x + u.current.x,
+        y: e.event.clientY - i.y - $.current.y + u.current.y
+      }, r.style.transform = `translate(${u.current.x}px, ${u.current.y}px)`, r.style.transition = "transform 0s", P.current)
         return;
-      const t = this.dragElement.getBoundingClientRect(), e = t.top + this.currentTranslate.y, n = t.left + this.currentTranslate.x;
-      this.hintElement.style.top = `${e}px`, this.hintElement.style.left = `${n}px`, this.hintElement.style.display = "block";
-    };
-  }
-  get reorderable() {
-    return this.props.reorderable !== void 0 ? this.props.reorderable : p.defaultProps.reorderable;
-  }
-  get dragElement() {
-    return this.draggable ? this.draggable.element : void 0;
-  }
-  componentDidMount() {
-    this.element && (getComputedStyle(this.element).direction === "rtl" && this.setState({
-      rtl: !0
-    }), this.hintElement && (this.hintElement.style.height = this.element.offsetHeight + "px", this.hintElement.style.width = this.element.offsetWidth + "px"));
-  }
-  render() {
-    y && clearTimeout && typeof clearTimeout == "function" && (clearTimeout(this.preventDataOps), this.preventDataOps = window.setTimeout(() => {
-      this.preventDataOps = void 0;
-    }, 200));
-    const t = this.props.defaultPosition, e = this.props.resizable !== void 0 ? this.props.resizable : p.defaultProps.resizable, n = {
-      gridColumnStart: t.col,
-      gridColumnEnd: `span ${t.colSpan}`,
-      gridRowStart: t.row,
-      gridRowEnd: `span ${t.rowSpan}`,
-      outline: "none",
-      order: t.order,
-      display: "block",
-      ...this.props.hintStyle
-    }, l = {
-      gridColumnStart: t.col,
-      gridColumnEnd: `span ${t.colSpan}`,
-      gridRowStart: t.row,
-      gridRowEnd: `span ${t.rowSpan}`,
-      order: t.order
-    }, r = /* @__PURE__ */ d.createElement(
-      "div",
-      {
-        ref: (s) => {
-          this.draggable = s ? { element: s } : null;
-        },
-        role: "listitem",
-        tabIndex: 0,
-        "aria-labelledby": typeof this.props.header == "string" ? this.props.header : `tile-${this.props.index}`,
-        "aria-keyshortcuts": "Enter",
-        className: m(
-          "k-tilelayout-item k-card",
-          { "k-cursor-move": this.reorderable },
-          this.props.className
-        ),
-        style: { height: "100%", ...l, ...this.props.style },
-        onMouseDown: this.handleMouseDown,
-        onMouseUp: this.handleMouseUp
-      },
-      this.props.children,
-      /* @__PURE__ */ d.createElement(
-        E,
-        {
-          onPress: this.handlePress,
-          onResize: this.handleResize,
-          resizable: e,
-          rtl: this.state.rtl
-        }
-      )
-    );
-    return /* @__PURE__ */ d.createElement(d.Fragment, null, this.state.visibleHint && /* @__PURE__ */ d.createElement(
-      "div",
-      {
-        ref: (s) => {
-          this.hintElement = s;
-        },
-        style: { position: "fixed", ...n },
-        className: m("k-layout-item-hint", this.props.hintClassName)
+      let a = 0, f = 0;
+      u.current.y > 0.7 * i.height / t.defaultPosition.rowSpan && (f = 1), u.current.y < 0.7 * -i.height / t.defaultPosition.rowSpan && (f = -1), u.current.x > 0.7 * i.width / t.defaultPosition.colSpan && (a = 1), u.current.x < 0.7 * -i.width / t.defaultPosition.colSpan && (a = -1), t.update(t.index, f, R ? -a : a, 0, 0);
+      const l = (h = s.current) == null ? void 0 : h.closest(".k-tilelayout");
+      if (l && c.current) {
+        const g = l.getBoundingClientRect(), y = G() || 50;
+        e.event.clientX < g.left - y || e.event.clientX > g.right - y || e.event.clientY < g.top || e.event.clientY > g.bottom ? c.current.style.display = "none" : c.current.style.display = "block";
       }
-    ), /* @__PURE__ */ d.createElement(
-      x,
-      {
-        ref: (s) => {
-          this.draggable = s, this.element = s ? s.element : null;
-        },
-        onDrag: this.props.reorderable ? this.handleDrag : void 0,
-        onRelease: this.props.reorderable ? this.handleRelease : void 0,
-        onPress: this.props.reorderable ? this.handlePress : void 0
-      },
-      r
-    ));
-  }
-  /**
-   * @hidden
-   */
-  getSnapshotBeforeUpdate(t) {
-    return this.oldSize = {}, this.dragElement && (this.oldSize = this.dragElement.getBoundingClientRect()), null;
-  }
-  /**
-   * @hidden
-   */
-  setInitialHintPosition() {
-    if (this.element && this.hintElement) {
-      const t = this.element.getBoundingClientRect();
-      this.hintElement.style.top = t.top + "px", this.hintElement.style.left = t.left + "px", this.hintElement.style.height = this.element.offsetHeight + "px", this.hintElement.style.width = this.element.offsetWidth + "px";
-    }
-  }
-  /**
-   * @hidden
-   */
-  componentDidUpdate(t) {
-    const e = this.dragElement;
+    },
+    [t, R, d]
+  );
+  n.useEffect(() => {
+    s.current && (getComputedStyle(s.current).direction === "rtl" && F(!0), c.current && (c.current.style.height = s.current.offsetHeight + "px", c.current.style.width = s.current.offsetWidth + "px"));
+  }, []), n.useLayoutEffect(() => {
+    const e = d();
     if (!e)
       return;
-    const n = e.getBoundingClientRect(), l = this.oldSize;
-    if (this.resizing) {
-      const i = n.width - l.width;
-      if (this.state.rtl) {
-        const c = parseFloat(e.style.marginLeft || "0");
-        e.style.marginLeft = c - i + "px";
+    const r = e.getBoundingClientRect(), i = v.current;
+    if (!(i != null && i.width)) {
+      v.current = r, x.current = t;
+      return;
+    }
+    if (D.current) {
+      const l = r.width - i.width;
+      if (R) {
+        const y = parseFloat(e.style.marginLeft || "0");
+        e.style.marginLeft = y - l + "px";
       } else {
-        const c = parseFloat(e.style.marginRight || "0");
-        e.style.marginRight = c + i + "px";
+        const y = parseFloat(e.style.marginRight || "0");
+        e.style.marginRight = y + l + "px";
       }
-      this.pressXY.x += this.state.rtl ? -i : i;
-      const o = n.height - l.height, h = parseFloat(e.style.height.substring(12));
-      e.style.height = `calc(100% + ${h + o}px)`, this.pressXY.y += o;
+      w.current.x += R ? -l : l;
+      const h = r.height - i.height, g = parseFloat(e.style.height.substring(12));
+      e.style.height = `calc(100% + ${g + h}px)`, w.current.y += h;
     }
-    const r = l.left - n.left, s = l.top - n.top;
-    if (!(r === 0 && s === 0)) {
-      if (this.dragging) {
-        (t.defaultPosition.order !== this.props.defaultPosition.order || t.defaultPosition.col !== this.props.defaultPosition.col) && (this.currentTranslate.x = 0, this.currentTranslate.y = 0, e.style.transform = "", this.calcNewHintPosition());
-        return;
-      }
-      Math.abs(s) < 15 && Math.abs(r) < 15 || requestAnimationFrame(() => {
-        const i = this.element;
-        i && (i.style.transform = `translate(${r}px, ${s}px)`, i.style.transition = "transform 0s", requestAnimationFrame(() => {
-          i.style.transform = "", i.style.transition = `transform ${g}ms cubic-bezier(0.2, 0, 0, 1) 0s`;
-        }));
-      });
+    const a = i.left - r.left, f = i.top - r.top;
+    if (a === 0 && f === 0) {
+      v.current = r, x.current = t;
+      return;
+    }
+    if (E.current) {
+      (x.current.defaultPosition.order !== t.defaultPosition.order || x.current.defaultPosition.col !== t.defaultPosition.col) && (u.current.x = 0, u.current.y = 0, e.style.transform = "", U()), v.current = r, x.current = t;
+      return;
+    }
+    if (Math.abs(f) < 15 && Math.abs(a) < 15) {
+      v.current = r, x.current = t;
+      return;
     }
-  }
+    requestAnimationFrame(() => {
+      const l = s.current;
+      l && (l.style.transform = `translate(${a}px, ${f}px)`, l.style.transition = "transform 0s", requestAnimationFrame(() => {
+        l.style.transform = "", l.style.transition = `transform ${O}ms cubic-bezier(0.2, 0, 0, 1) 0s`;
+      }));
+    }), v.current = r, x.current = t;
+  }), J && clearTimeout && typeof clearTimeout == "function" && (clearTimeout(P.current), P.current = window.setTimeout(() => {
+    P.current = void 0;
+  }, 200));
+  const m = t.defaultPosition, K = {
+    gridColumnStart: m.col,
+    gridColumnEnd: `span ${m.colSpan}`,
+    gridRowStart: m.row,
+    gridRowEnd: `span ${m.rowSpan}`,
+    outline: "none",
+    order: m.order,
+    display: "block",
+    ...t.hintStyle
+  }, V = {
+    gridColumnStart: m.col,
+    gridColumnEnd: `span ${m.colSpan}`,
+    gridRowStart: m.row,
+    gridRowEnd: `span ${m.rowSpan}`,
+    order: m.order
+  }, _ = /* @__PURE__ */ n.createElement(
+    "div",
+    {
+      role: "listitem",
+      tabIndex: 0,
+      "aria-labelledby": typeof t.header == "string" ? t.header : `tile-${t.index}`,
+      "aria-keyshortcuts": "Enter",
+      className: Y("k-tilelayout-item k-card", { "k-cursor-move": b }, t.className),
+      style: { height: "100%", ...V, ...t.style },
+      onMouseDown: A,
+      onMouseUp: p
+    },
+    t.children,
+    /* @__PURE__ */ n.createElement(Z, { onPress: M, onResize: W, resizable: H, rtl: R })
+  );
+  return /* @__PURE__ */ n.createElement(n.Fragment, null, q && /* @__PURE__ */ n.createElement(
+    "div",
+    {
+      ref: (e) => {
+        c.current = e;
+      },
+      style: { position: "fixed", ...K },
+      className: Y("k-layout-item-hint", t.hintClassName)
+    }
+  ), /* @__PURE__ */ n.createElement(
+    Q,
+    {
+      ref: (e) => {
+        k.current = e, s.current = e ? e.element : null;
+      },
+      onDrag: b ? j : void 0,
+      onRelease: b ? L : void 0,
+      onPress: b ? M : void 0
+    },
+    _
+  ));
 };
-p.propTypes = {
-  defaultPosition: a.object.isRequired,
-  style: a.object,
-  className: a.string,
-  hintStyle: a.object,
-  hintClassName: a.string,
-  header: a.any,
-  body: a.any,
-  item: a.any,
-  resizable: a.oneOf(["horizontal", "vertical", !0, !1]),
-  reorderable: a.bool
-}, p.displayName = "KendoTileLayoutItem", p.defaultProps = {
-  resizable: !0,
-  reorderable: !0
+N.propTypes = {
+  update: o.func.isRequired,
+  index: o.number.isRequired,
+  defaultPosition: o.object.isRequired,
+  ignoreDrag: o.func,
+  onPress: o.func.isRequired,
+  onRelease: o.func.isRequired,
+  children: o.node,
+  style: o.object,
+  className: o.string,
+  hintStyle: o.object,
+  hintClassName: o.string,
+  header: o.any,
+  body: o.any,
+  item: o.any,
+  resizable: o.oneOf(["horizontal", "vertical", !0, !1]),
+  reorderable: o.bool
 };
-let u = p;
+N.displayName = "KendoTileLayoutItem";
+N.defaultProps = T;
 export {
-  u as InternalTile
+  N as InternalTile
 };

package/tilelayout/ResizeHandlers.d.ts

@@ -5,12 +5,13 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
+import { TileResizeMode } from './interfaces/index.js';
 import * as React from 'react';
 /**
  * @hidden
  */
 export interface ResizeHandlersProps {
-    resizable: string | boolean;
+    resizable: TileResizeMode;
     onResize: (e: any, args: {
         end: boolean;
         direction: any;
@@ -21,7 +22,4 @@ export interface ResizeHandlersProps {
 /**
  * @hidden
  */
-export declare class ResizeHandlers extends React.Component<ResizeHandlersProps, {}> {
-    handleResize: (event: any, isEnd: boolean, direction: any) => void;
-    render(): React.JSX.Element | null;
-}
+export declare const ResizeHandlers: React.FC<ResizeHandlersProps>;

package/tilelayout/ResizeHandlers.js

@@ -5,4 +5,4 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react"),a=require("@progress/kendo-react-common");function o(t){const e=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const n in t)if(n!=="default"){const r=Object.getOwnPropertyDescriptor(t,n);Object.defineProperty(e,n,r.get?r:{enumerable:!0,get:()=>t[n]})}}return e.default=t,Object.freeze(e)}const s=o(l),i=t=>s.createElement(a.Draggable,{onPress:t.onPress,onDrag:e=>{t.onResize(e.event,!1,t.d)},onRelease:e=>{t.onResize(e.event,!0,t.d)}},s.createElement("div",{className:"k-resize-handle k-cursor-"+t.d+"-resize",style:{bottom:0,right:0,...t.style}}));class c extends s.Component{constructor(){super(...arguments),this.handleResize=(e,n,r)=>{e.originalEvent.preventDefault(),this.props.onResize(e,{end:n,direction:r})}}render(){const{resizable:e,onPress:n,rtl:r}=this.props;return e?s.createElement(s.Fragment,null,e!=="vertical"&&s.createElement(i,{onPress:n,onResize:this.handleResize,d:"ew",style:r?{top:0,width:9,left:0,right:""}:{top:0,width:9,right:0,left:""}}),e!=="horizontal"&&s.createElement(i,{onPress:n,onResize:this.handleResize,d:"ns",style:{left:0,height:9}}),e===!0&&s.createElement(i,{onPress:n,onResize:this.handleResize,d:r?"nesw":"nwse",style:r?{width:9,height:9,right:"",left:0}:{width:9,height:9,right:0,left:""}})):null}}exports.ResizeHandlers=c;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("react"),u=require("@progress/kendo-react-common");function g(e){const t=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const n in e)if(n!=="default"){const r=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,r.get?r:{enumerable:!0,get:()=>e[n]})}}return t.default=e,Object.freeze(t)}const l=g(d),i=e=>l.createElement(u.Draggable,{onPress:e.onPress,onDrag:t=>{e.onResize(t.event,!1,e.d)},onRelease:t=>{e.onResize(t.event,!0,e.d)}},l.createElement("div",{className:"k-resize-handle k-cursor-"+e.d+"-resize",style:{bottom:0,right:0,...e.style}})),f=({resizable:e,onResize:t,onPress:n,rtl:r})=>{const a=l.useCallback((c,o,s)=>{c.originalEvent.preventDefault(),t(c,{end:o,direction:s})},[t]);return e?l.createElement(l.Fragment,null,e!=="vertical"&&l.createElement(i,{onPress:n,onResize:a,d:"ew",style:r?{top:0,width:9,left:0,right:""}:{top:0,width:9,right:0,left:""}}),e!=="horizontal"&&l.createElement(i,{onPress:n,onResize:a,d:"ns",style:{left:0,height:9}}),e===!0&&l.createElement(i,{onResize:a,onPress:n,d:r?"nesw":"nwse",style:r?{width:9,height:9,right:"",left:0}:{width:9,height:9,right:0,left:""}})):null};exports.ResizeHandlers=f;

package/tilelayout/ResizeHandlers.mjs

@@ -5,54 +5,51 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import * as n from "react";
-import { Draggable as l } from "@progress/kendo-react-common";
-const i = (t) => /* @__PURE__ */ n.createElement(
-  l,
+import * as t from "react";
+import { Draggable as o } from "@progress/kendo-react-common";
+const r = (e) => /* @__PURE__ */ t.createElement(
+  o,
   {
-    onPress: t.onPress,
-    onDrag: (e) => {
-      t.onResize(e.event, !1, t.d);
+    onPress: e.onPress,
+    onDrag: (n) => {
+      e.onResize(n.event, !1, e.d);
     },
-    onRelease: (e) => {
-      t.onResize(e.event, !0, t.d);
+    onRelease: (n) => {
+      e.onResize(n.event, !0, e.d);
     }
   },
-  /* @__PURE__ */ n.createElement(
+  /* @__PURE__ */ t.createElement(
     "div",
     {
-      className: "k-resize-handle k-cursor-" + t.d + "-resize",
-      style: { bottom: 0, right: 0, ...t.style }
+      className: "k-resize-handle k-cursor-" + e.d + "-resize",
+      style: { bottom: 0, right: 0, ...e.style }
     }
   )
-);
-class h extends n.Component {
-  constructor() {
-    super(...arguments), this.handleResize = (e, s, r) => {
-      e.originalEvent.preventDefault(), this.props.onResize(e, { end: s, direction: r });
-    };
-  }
-  render() {
-    const { resizable: e, onPress: s, rtl: r } = this.props;
-    return e ? /* @__PURE__ */ n.createElement(n.Fragment, null, e !== "vertical" && /* @__PURE__ */ n.createElement(
-      i,
-      {
-        onPress: s,
-        onResize: this.handleResize,
-        d: "ew",
-        style: r ? { top: 0, width: 9, left: 0, right: "" } : { top: 0, width: 9, right: 0, left: "" }
-      }
-    ), e !== "horizontal" && /* @__PURE__ */ n.createElement(i, { onPress: s, onResize: this.handleResize, d: "ns", style: { left: 0, height: 9 } }), e === !0 && /* @__PURE__ */ n.createElement(
-      i,
-      {
-        onPress: s,
-        onResize: this.handleResize,
-        d: r ? "nesw" : "nwse",
-        style: r ? { width: 9, height: 9, right: "", left: 0 } : { width: 9, height: 9, right: 0, left: "" }
-      }
-    )) : null;
-  }
-}
+), g = ({ resizable: e, onResize: n, onPress: l, rtl: i }) => {
+  const a = t.useCallback(
+    (h, s, d) => {
+      h.originalEvent.preventDefault(), n(h, { end: s, direction: d });
+    },
+    [n]
+  );
+  return e ? /* @__PURE__ */ t.createElement(t.Fragment, null, e !== "vertical" && /* @__PURE__ */ t.createElement(
+    r,
+    {
+      onPress: l,
+      onResize: a,
+      d: "ew",
+      style: i ? { top: 0, width: 9, left: 0, right: "" } : { top: 0, width: 9, right: 0, left: "" }
+    }
+  ), e !== "horizontal" && /* @__PURE__ */ t.createElement(r, { onPress: l, onResize: a, d: "ns", style: { left: 0, height: 9 } }), e === !0 && /* @__PURE__ */ t.createElement(
+    r,
+    {
+      onResize: a,
+      onPress: l,
+      d: i ? "nesw" : "nwse",
+      style: i ? { width: 9, height: 9, right: "", left: 0 } : { width: 9, height: 9, right: 0, left: "" }
+    }
+  )) : null;
+};
 export {
-  h as ResizeHandlers
+  g as ResizeHandlers
 };