@progress/kendo-react-layout 14.5.0-develop.14 → 14.5.0-develop.16

package/tilelayout/InternalTile.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 G=require("react"),o=require("prop-types"),C=require("@progress/kendo-react-common"),J=require("./ResizeHandlers.js");function Q(t){const m=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const v in t)if(v!=="default"){const c=Object.getOwnPropertyDescriptor(t,v);Object.defineProperty(m,v,c.get?c:{enumerable:!0,get:()=>t[v]})}}return m.default=t,Object.freeze(m)}const n=Q(G),Y=200,M={resizable:!0,reorderable:!0},D=t=>{var B,X;const m=(B=t.reorderable)!=null?B:M.reorderable,v=(X=t.resizable)!=null?X:M.resizable,c=n.useRef(null),s=n.useRef(null),z=n.useRef(null),w=n.useRef({}),T=n.useRef(!1),N=n.useRef(!1),$=n.useRef(!1),L=n.useRef({x:0,y:0}),P=n.useRef({x:0,y:0}),u=n.useRef({x:0,y:0}),S=n.useRef(void 0),x=n.useRef(t),[b,j]=n.useState(!1),[H,I]=n.useState(!1),d=n.useCallback(()=>z.current?z.current.element:void 0,[]),E=n.useCallback(()=>{if(c.current&&s.current){const e=c.current.getBoundingClientRect();s.current.style.top=e.top+"px",s.current.style.left=e.left+"px",s.current.style.height=c.current.offsetHeight+"px",s.current.style.width=c.current.offsetWidth+"px"}},[]),p=n.useCallback(()=>{E()},[E]),F=n.useCallback(()=>{setTimeout(()=>{E()},100)},[E]),A=n.useCallback(()=>{const e=d();if(!e||!s.current)return;const r=e.getBoundingClientRect(),i=r.top+u.current.y,a=r.left+u.current.x;s.current.style.top=`${i}px`,s.current.style.left=`${a}px`,s.current.style.display="block"},[d]),O=n.useCallback(()=>{T.current=N.current=!1,u.current={x:0,y:0},c.current&&s.current&&(c.current.style.zIndex="1",s.current.classList.remove("k-layout-item-hint-resize"),I(!1));const e=d();e&&(e.style.transform="translate(0px, 0px)",e.style.transition=`transform ${Y}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"),m&&e.classList.add("k-cursor-move")),t.onRelease()},[t,m,d]),U=n.useCallback((e,r)=>{if(r.end){O();return}if(!c.current||!s.current)return;const i=e.clientX,a=e.clientY;N.current=!0;const f=(r.direction!=="ns"?i-P.current.x:0)*(b?-1:1),l=r.direction!=="ew"?a-P.current.y:0,R=d();if(R&&(b?R.style.marginLeft=-f+"px":R.style.marginRight=-f+"px",R.style.height=`calc(100% + ${l}px)`),s.current.classList.add("k-layout-item-hint-resize"),S.current)return;let g=0,y=0;const k=c.current.getBoundingClientRect();f>k.width/t.defaultPosition.colSpan/3&&(g=1),f<-k.width/t.defaultPosition.colSpan/1.25&&(g=-1),l>k.height/t.defaultPosition.rowSpan/3&&(y=1),l<-k.height/t.defaultPosition.rowSpan/1.25&&(y=-1),(g!==0||y!==0)&&t.update(t.index,0,0,y,g)},[b,t,O,d]),q=n.useCallback(e=>{var a;const r=d();if(!r)return;if(P.current={x:e.event.clientX,y:e.event.clientY},$.current=!1,(a=t.ignoreDrag)!=null&&a.call(t,e.event.originalEvent)){$.current=!0;return}c.current&&(c.current.style.zIndex="10",I(!0)),r.classList.remove("k-cursor-move"),r.classList.add("k-cursor-grabbing");const i=r.getBoundingClientRect();L.current={x:e.event.clientX-i.x,y:e.event.clientY-i.y},t.onPress()},[t,d]),W=n.useCallback(e=>{var R;if($.current)return;const r=d();if(e.event.originalEvent.defaultPrevented||!r)return;T.current=!0,e.event.originalEvent.preventDefault();const i=r.getBoundingClientRect();if(u.current={x:e.event.clientX-i.x-L.current.x+u.current.x,y:e.event.clientY-i.y-L.current.y+u.current.y},r.style.transform=`translate(${u.current.x}px, ${u.current.y}px)`,r.style.transition="transform 0s",S.current)return;let a=0,f=0;u.current.y>.7*i.height/t.defaultPosition.rowSpan&&(f=1),u.current.y<.7*-i.height/t.defaultPosition.rowSpan&&(f=-1),u.current.x>.7*i.width/t.defaultPosition.colSpan&&(a=1),u.current.x<.7*-i.width/t.defaultPosition.colSpan&&(a=-1),t.update(t.index,f,b?-a:a,0,0);const l=(R=c.current)==null?void 0:R.closest(".k-tilelayout");if(l&&s.current){const g=l.getBoundingClientRect(),y=C.getScrollbarWidth()||50;e.event.clientX<g.left-y||e.event.clientX>g.right-y||e.event.clientY<g.top||e.event.clientY>g.bottom?s.current.style.display="none":s.current.style.display="block"}},[t,b,d]);n.useEffect(()=>{c.current&&(getComputedStyle(c.current).direction==="rtl"&&j(!0),s.current&&(s.current.style.height=c.current.offsetHeight+"px",s.current.style.width=c.current.offsetWidth+"px"))},[]),n.useLayoutEffect(()=>{const e=d();if(!e)return;const r=e.getBoundingClientRect(),i=w.current;if(!(i!=null&&i.width)){w.current=r,x.current=t;return}if(N.current){const l=r.width-i.width;if(b){const y=parseFloat(e.style.marginLeft||"0");e.style.marginLeft=y-l+"px"}else{const y=parseFloat(e.style.marginRight||"0");e.style.marginRight=y+l+"px"}P.current.x+=b?-l:l;const R=r.height-i.height,g=parseFloat(e.style.height.substring(12));e.style.height=`calc(100% + ${g+R}px)`,P.current.y+=R}const a=i.left-r.left,f=i.top-r.top;if(a===0&&f===0){w.current=r,x.current=t;return}if(T.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="",A()),w.current=r,x.current=t;return}if(Math.abs(f)<15&&Math.abs(a)<15){w.current=r,x.current=t;return}requestAnimationFrame(()=>{const l=c.current;l&&(l.style.transform=`translate(${a}px, ${f}px)`,l.style.transition="transform 0s",requestAnimationFrame(()=>{l.style.transform="",l.style.transition=`transform ${Y}ms cubic-bezier(0.2, 0, 0, 1) 0s`}))}),w.current=r,x.current=t}),C.canUseDOM&&clearTimeout&&typeof clearTimeout=="function"&&(clearTimeout(S.current),S.current=window.setTimeout(()=>{S.current=void 0},200));const h=t.defaultPosition,_={gridColumnStart:h.col,gridColumnEnd:`span ${h.colSpan}`,gridRowStart:h.row,gridRowEnd:`span ${h.rowSpan}`,outline:"none",order:h.order,display:"block",...t.hintStyle},K={gridColumnStart:h.col,gridColumnEnd:`span ${h.colSpan}`,gridRowStart:h.row,gridRowEnd:`span ${h.rowSpan}`,order:h.order},V=n.createElement("div",{role:"listitem",tabIndex:0,"aria-labelledby":typeof t.header=="string"?t.header:`tile-${t.index}`,"aria-keyshortcuts":"Enter",className:C.classNames("k-tilelayout-item k-card",{"k-cursor-move":m},t.className),style:{height:"100%",...K,...t.style},onMouseDown:p,onMouseUp:F},t.children,n.createElement(J.ResizeHandlers,{onPress:q,onResize:U,resizable:v,rtl:b}));return n.createElement(n.Fragment,null,H&&n.createElement("div",{ref:e=>{s.current=e},style:{position:"fixed",..._},className:C.classNames("k-layout-item-hint",t.hintClassName)}),n.createElement(C.Draggable,{ref:e=>{z.current=e,c.current=e?e.element:null},onDrag:m?W:void 0,onRelease:m?O:void 0,onPress:m?q:void 0},V))};D.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};D.displayName="KendoTileLayoutItem";D.defaultProps=M;exports.InternalTile=D;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const J=require("react"),a=require("prop-types"),k=require("@progress/kendo-react-common"),Q=require("./ResizeHandlers.js");function Z(t){const R=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const v in t)if(v!=="default"){const c=Object.getOwnPropertyDescriptor(t,v);Object.defineProperty(R,v,c.get?c:{enumerable:!0,get:()=>t[v]})}}return R.default=t,Object.freeze(R)}const n=Z(J),j=200,O={resizable:!0,reorderable:!0},D=t=>{var q,X,Y;const R=(q=t.reorderable)!=null?q:O.reorderable,v=(X=t.resizable)!=null?X:O.resizable,c=n.useRef(null),s=n.useRef(null),w=n.useRef(null),z=n.useRef(!1),T=n.useRef(!1),N=n.useRef(!1),$=n.useRef({x:0,y:0}),P=n.useRef({x:0,y:0}),u=n.useRef({x:0,y:0}),S=n.useRef(void 0),x=n.useRef(t),[b,p]=n.useState(!1),[H,M]=n.useState(!1),d=n.useCallback(()=>w.current?w.current.element:void 0,[]),E=n.useCallback(()=>{if(c.current&&s.current){const e=c.current.getBoundingClientRect();s.current.style.top=e.top+"px",s.current.style.left=e.left+"px",s.current.style.height=c.current.offsetHeight+"px",s.current.style.width=c.current.offsetWidth+"px"}},[]),F=n.useCallback(()=>{E()},[E]),A=n.useCallback(()=>{setTimeout(()=>{E()},100)},[E]),U=n.useCallback(()=>{const e=d();if(!e||!s.current)return;const r=e.getBoundingClientRect(),i=r.top+u.current.y,o=r.left+u.current.x;s.current.style.top=`${i}px`,s.current.style.left=`${o}px`,s.current.style.display="block"},[d]),L=n.useCallback(()=>{z.current=T.current=!1,u.current={x:0,y:0},c.current&&s.current&&(c.current.style.zIndex="1",s.current.classList.remove("k-layout-item-hint-resize"),M(!1));const e=d();e&&(e.style.transform="translate(0px, 0px)",e.style.transition=`transform ${j}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"),R&&e.classList.add("k-cursor-move")),t.onRelease()},[t,R,d]),W=n.useCallback((e,r)=>{if(r.end){L();return}if(!c.current||!s.current)return;const i=e.clientX,o=e.clientY;T.current=!0;const f=(r.direction!=="ns"?i-P.current.x:0)*(b?-1:1),l=r.direction!=="ew"?o-P.current.y:0,h=d();if(h&&(b?h.style.marginLeft=-f+"px":h.style.marginRight=-f+"px",h.style.height=`calc(100% + ${l}px)`),s.current.classList.add("k-layout-item-hint-resize"),S.current)return;let g=0,y=0;const C=c.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)},[b,t,L,d]),I=n.useCallback(e=>{var o;const r=d();if(!r)return;if(P.current={x:e.event.clientX,y:e.event.clientY},N.current=!1,(o=t.ignoreDrag)!=null&&o.call(t,e.event.originalEvent)){N.current=!0;return}c.current&&(c.current.style.zIndex="10",M(!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]),_=n.useCallback(e=>{var h;if(N.current)return;const r=d();if(e.event.originalEvent.defaultPrevented||!r)return;z.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",S.current)return;let o=0,f=0;u.current.y>.7*i.height/t.defaultPosition.rowSpan&&(f=1),u.current.y<.7*-i.height/t.defaultPosition.rowSpan&&(f=-1),u.current.x>.7*i.width/t.defaultPosition.colSpan&&(o=1),u.current.x<.7*-i.width/t.defaultPosition.colSpan&&(o=-1),t.update(t.index,f,b?-o:o,0,0);const l=(h=c.current)==null?void 0:h.closest(".k-tilelayout");if(l&&s.current){const g=l.getBoundingClientRect(),y=k.getScrollbarWidth()||50;e.event.clientX<g.left-y||e.event.clientX>g.right-y||e.event.clientY<g.top||e.event.clientY>g.bottom?s.current.style.display="none":s.current.style.display="block"}},[t,b,d]);n.useEffect(()=>{c.current&&(getComputedStyle(c.current).direction==="rtl"&&p(!0),s.current&&(s.current.style.height=c.current.offsetHeight+"px",s.current.style.width=c.current.offsetWidth+"px"))},[]);const B=n.useRef(null);(Y=w.current)!=null&&Y.element&&(B.current=w.current.element.getBoundingClientRect()),n.useLayoutEffect(()=>{const e=d();if(!e)return;const r=e.getBoundingClientRect(),i=B.current;if(!(i!=null&&i.width)){x.current=t;return}if(T.current){const l=r.width-i.width;if(b){const y=parseFloat(e.style.marginLeft||"0");e.style.marginLeft=y-l+"px"}else{const y=parseFloat(e.style.marginRight||"0");e.style.marginRight=y+l+"px"}P.current.x+=b?-l:l;const h=r.height-i.height,g=parseFloat(e.style.height.substring(12));e.style.height=`calc(100% + ${g+h}px)`,P.current.y+=h}const o=i.left-r.left,f=i.top-r.top;if(o===0&&f===0){x.current=t;return}if(z.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()),x.current=t;return}if(Math.abs(f)<15&&Math.abs(o)<15){x.current=t;return}requestAnimationFrame(()=>{const l=c.current;l&&(l.style.transform=`translate(${o}px, ${f}px)`,l.style.transition="transform 0s",requestAnimationFrame(()=>{l.style.transform="",l.style.transition=`transform ${j}ms cubic-bezier(0.2, 0, 0, 1) 0s`}))}),x.current=t}),k.canUseDOM&&clearTimeout&&typeof clearTimeout=="function"&&(clearTimeout(S.current),S.current=window.setTimeout(()=>{S.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},G=n.createElement("div",{role:"listitem",tabIndex:0,"aria-labelledby":typeof t.header=="string"?t.header:`tile-${t.index}`,"aria-keyshortcuts":"Enter","aria-dropeffect":"execute","aria-grabbed":!1,className:k.classNames("k-tilelayout-item k-card",t.className),style:{height:"100%",...V,...t.style},onMouseDown:F,onMouseUp:A},t.children,n.createElement(Q.ResizeHandlers,{onPress:I,onResize:W,resizable:v,rtl:b}));return n.createElement(n.Fragment,null,H&&n.createElement("div",{ref:e=>{s.current=e},style:{position:"fixed",...K},className:k.classNames("k-layout-item-hint",t.hintClassName)}),n.createElement(k.Draggable,{ref:e=>{w.current=e,c.current=e?e.element:null},onDrag:R?_:void 0,onRelease:R?L:void 0,onPress:R?I:void 0},G))};D.propTypes={update:a.func.isRequired,index:a.number.isRequired,defaultPosition:a.object.isRequired,ignoreDrag:a.func,onPress:a.func.isRequired,onRelease:a.func.isRequired,children:a.node,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};D.displayName="KendoTileLayoutItem";D.defaultProps=O;exports.InternalTile=D;

package/tilelayout/InternalTile.mjs

@@ -6,217 +6,221 @@
  *-------------------------------------------------------------------------------------------
  */
 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 = {
+import a from "prop-types";
+import { getScrollbarWidth as J, canUseDOM as Q, classNames as O, Draggable as Z } from "@progress/kendo-react-common";
+import { ResizeHandlers as ee } from "./ResizeHandlers.mjs";
+const H = 200, L = {
   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";
+}, T = (t) => {
+  var M, X, Y;
+  const b = (M = t.reorderable) != null ? M : L.reorderable, p = (X = t.resizable) != null ? X : L.resizable, c = n.useRef(null), s = n.useRef(null), v = n.useRef(null), k = n.useRef(!1), E = n.useRef(!1), D = n.useRef(!1), z = n.useRef({ x: 0, y: 0 }), w = n.useRef({ x: 0, y: 0 }), u = n.useRef({ x: 0, y: 0 }), C = n.useRef(void 0), x = n.useRef(t), [R, F] = n.useState(!1), [q, N] = n.useState(!1), d = n.useCallback(() => v.current ? v.current.element : void 0, []), S = n.useCallback(() => {
+    if (c.current && s.current) {
+      const e = c.current.getBoundingClientRect();
+      s.current.style.top = e.top + "px", s.current.style.left = e.left + "px", s.current.style.height = c.current.offsetHeight + "px", s.current.style.width = c.current.offsetWidth + "px";
     }
   }, []), A = n.useCallback(() => {
     S();
-  }, [S]), p = n.useCallback(() => {
+  }, [S]), U = n.useCallback(() => {
     setTimeout(() => {
       S();
     }, 100);
-  }, [S]), U = n.useCallback(() => {
+  }, [S]), W = n.useCallback(() => {
     const e = d();
-    if (!e || !c.current)
+    if (!e || !s.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 r = e.getBoundingClientRect(), i = r.top + u.current.y, o = r.left + u.current.x;
+    s.current.style.top = `${i}px`, s.current.style.left = `${o}px`, s.current.style.display = "block";
+  }, [d]), $ = n.useCallback(() => {
+    k.current = E.current = !1, u.current = { x: 0, y: 0 }, c.current && s.current && (c.current.style.zIndex = "1", s.current.classList.remove("k-layout-item-hint-resize"), N(!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 && (e.style.transform = "translate(0px, 0px)", e.style.transition = `transform ${H}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]), j = n.useCallback(
     (e, r) => {
       if (r.end) {
-        L();
+        $();
         return;
       }
-      if (!s.current || !c.current)
+      if (!c.current || !s.current)
         return;
-      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)
+      const i = e.clientX, o = e.clientY;
+      E.current = !0;
+      const f = (r.direction !== "ns" ? i - w.current.x : 0) * (R ? -1 : 1), l = r.direction !== "ew" ? o - 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)`), s.current.classList.add("k-layout-item-hint-resize"), C.current)
         return;
-      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);
+      let g = 0, m = 0;
+      const P = c.current.getBoundingClientRect();
+      f > P.width / t.defaultPosition.colSpan / 3 && (g = 1), f < -P.width / t.defaultPosition.colSpan / 1.25 && (g = -1), l > P.height / t.defaultPosition.rowSpan / 3 && (m = 1), l < -P.height / t.defaultPosition.rowSpan / 1.25 && (m = -1), (g !== 0 || m !== 0) && t.update(t.index, 0, 0, m, g);
     },
-    [R, t, L, d]
-  ), M = n.useCallback(
+    [R, t, $, d]
+  ), B = n.useCallback(
     (e) => {
-      var a;
+      var o;
       const r = d();
       if (!r)
         return;
       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;
+      }, D.current = !1, (o = t.ignoreDrag) != null && o.call(t, e.event.originalEvent)) {
+        D.current = !0;
         return;
       }
-      s.current && (s.current.style.zIndex = "10", I(!0)), r.classList.remove("k-cursor-move"), r.classList.add("k-cursor-grabbing");
+      c.current && (c.current.style.zIndex = "10", N(!0)), r.classList.remove("k-cursor-move"), r.classList.add("k-cursor-grabbing");
       const i = r.getBoundingClientRect();
-      $.current = {
+      z.current = {
         x: e.event.clientX - i.x,
         y: e.event.clientY - i.y
       }, t.onPress();
     },
     [t, d]
-  ), j = n.useCallback(
+  ), K = n.useCallback(
     (e) => {
       var h;
-      if (z.current)
+      if (D.current)
         return;
       const r = d();
       if (e.event.originalEvent.defaultPrevented || !r)
         return;
-      E.current = !0, e.event.originalEvent.preventDefault();
+      k.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)
+        x: e.event.clientX - i.x - z.current.x + u.current.x,
+        y: e.event.clientY - i.y - z.current.y + u.current.y
+      }, r.style.transform = `translate(${u.current.x}px, ${u.current.y}px)`, r.style.transition = "transform 0s", C.current)
         return;
-      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";
+      let o = 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 && (o = 1), u.current.x < 0.7 * -i.width / t.defaultPosition.colSpan && (o = -1), t.update(t.index, f, R ? -o : o, 0, 0);
+      const l = (h = c.current) == null ? void 0 : h.closest(".k-tilelayout");
+      if (l && s.current) {
+        const g = l.getBoundingClientRect(), m = J() || 50;
+        e.event.clientX < g.left - m || e.event.clientX > g.right - m || e.event.clientY < g.top || e.event.clientY > g.bottom ? s.current.style.display = "none" : s.current.style.display = "block";
       }
     },
     [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(() => {
+    c.current && (getComputedStyle(c.current).direction === "rtl" && F(!0), s.current && (s.current.style.height = c.current.offsetHeight + "px", s.current.style.width = c.current.offsetWidth + "px"));
+  }, []);
+  const I = n.useRef(null);
+  (Y = v.current) != null && Y.element && (I.current = v.current.element.getBoundingClientRect()), n.useLayoutEffect(() => {
     const e = d();
     if (!e)
       return;
-    const r = e.getBoundingClientRect(), i = v.current;
+    const r = e.getBoundingClientRect(), i = I.current;
     if (!(i != null && i.width)) {
-      v.current = r, x.current = t;
+      x.current = t;
       return;
     }
-    if (D.current) {
+    if (E.current) {
       const l = r.width - i.width;
       if (R) {
-        const y = parseFloat(e.style.marginLeft || "0");
-        e.style.marginLeft = y - l + "px";
+        const m = parseFloat(e.style.marginLeft || "0");
+        e.style.marginLeft = m - l + "px";
       } else {
-        const y = parseFloat(e.style.marginRight || "0");
-        e.style.marginRight = y + l + "px";
+        const m = parseFloat(e.style.marginRight || "0");
+        e.style.marginRight = m + l + "px";
       }
       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 a = i.left - r.left, f = i.top - r.top;
-    if (a === 0 && f === 0) {
-      v.current = r, x.current = t;
+    const o = i.left - r.left, f = i.top - r.top;
+    if (o === 0 && f === 0) {
+      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;
+    if (k.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 = "", W()), x.current = t;
       return;
     }
-    if (Math.abs(f) < 15 && Math.abs(a) < 15) {
-      v.current = r, x.current = t;
+    if (Math.abs(f) < 15 && Math.abs(o) < 15) {
+      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`;
+      const l = c.current;
+      l && (l.style.transform = `translate(${o}px, ${f}px)`, l.style.transition = "transform 0s", requestAnimationFrame(() => {
+        l.style.transform = "", l.style.transition = `transform ${H}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;
+    }), x.current = t;
+  }), Q && clearTimeout && typeof clearTimeout == "function" && (clearTimeout(C.current), C.current = window.setTimeout(() => {
+    C.current = void 0;
   }, 200));
-  const m = t.defaultPosition, K = {
-    gridColumnStart: m.col,
-    gridColumnEnd: `span ${m.colSpan}`,
-    gridRowStart: m.row,
-    gridRowEnd: `span ${m.rowSpan}`,
+  const y = t.defaultPosition, V = {
+    gridColumnStart: y.col,
+    gridColumnEnd: `span ${y.colSpan}`,
+    gridRowStart: y.row,
+    gridRowEnd: `span ${y.rowSpan}`,
     outline: "none",
-    order: m.order,
+    order: y.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(
+  }, _ = {
+    gridColumnStart: y.col,
+    gridColumnEnd: `span ${y.colSpan}`,
+    gridRowStart: y.row,
+    gridRowEnd: `span ${y.rowSpan}`,
+    order: y.order
+  }, G = /* @__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 },
+      "aria-dropeffect": "execute",
+      "aria-grabbed": !1,
+      className: O("k-tilelayout-item k-card", t.className),
+      style: { height: "100%", ..._, ...t.style },
       onMouseDown: A,
-      onMouseUp: p
+      onMouseUp: U
     },
     t.children,
-    /* @__PURE__ */ n.createElement(Z, { onPress: M, onResize: W, resizable: H, rtl: R })
+    /* @__PURE__ */ n.createElement(ee, { onPress: B, onResize: j, resizable: p, rtl: R })
   );
   return /* @__PURE__ */ n.createElement(n.Fragment, null, q && /* @__PURE__ */ n.createElement(
     "div",
     {
       ref: (e) => {
-        c.current = e;
+        s.current = e;
       },
-      style: { position: "fixed", ...K },
-      className: Y("k-layout-item-hint", t.hintClassName)
+      style: { position: "fixed", ...V },
+      className: O("k-layout-item-hint", t.hintClassName)
     }
   ), /* @__PURE__ */ n.createElement(
-    Q,
+    Z,
     {
       ref: (e) => {
-        k.current = e, s.current = e ? e.element : null;
+        v.current = e, c.current = e ? e.element : null;
       },
-      onDrag: b ? j : void 0,
-      onRelease: b ? L : void 0,
-      onPress: b ? M : void 0
+      onDrag: b ? K : void 0,
+      onRelease: b ? $ : void 0,
+      onPress: b ? B : void 0
     },
-    _
+    G
   ));
 };
-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
+T.propTypes = {
+  update: a.func.isRequired,
+  index: a.number.isRequired,
+  defaultPosition: a.object.isRequired,
+  ignoreDrag: a.func,
+  onPress: a.func.isRequired,
+  onRelease: a.func.isRequired,
+  children: a.node,
+  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
 };
-N.displayName = "KendoTileLayoutItem";
-N.defaultProps = T;
+T.displayName = "KendoTileLayoutItem";
+T.defaultProps = L;
 export {
-  N as InternalTile
+  T as InternalTile
 };

package/tilelayout/TileLayout.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 r=require("react"),t=require("prop-types"),O=require("@progress/kendo-react-common"),Q=require("./InternalTile.js");function X(c){const d=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(c){for(const m in c)if(m!=="default"){const l=Object.getOwnPropertyDescriptor(c,m);Object.defineProperty(d,m,l.get?l:{enumerable:!0,get:()=>c[m]})}}return d.default=c,Object.freeze(d)}const o=X(r),Y={column:"k-grid-flow-col",row:"k-grid-flow-row","column dense":"k-grid-flow-col-dense","row dense":"k-grid-flow-row-dense",unset:"k-grid-flow-unset"},y={columns:3,columnWidth:"1fr",rowHeight:"1fr",autoFlow:"column",items:[]},$=o.forwardRef((c,d)=>{const{className:m,columns:l=y.columns,columnWidth:g=y.columnWidth,gap:i,rowHeight:h=y.rowHeight,style:j,autoFlow:q=y.autoFlow,items:u=y.items,positions:w,onReposition:P,dataItemKey:C,id:N,dir:z,ignoreDrag:A}=c,K=r.useCallback(()=>{k.current&&k.current.focus()},[]),b=r.useRef(null),k=r.useRef(null);o.useImperativeHandle(b,()=>({element:k.current,focus:K})),o.useImperativeHandle(d,()=>b.current);const p=w!==void 0,R=r.useCallback(e=>e.map((n,a)=>({order:a,rowSpan:1,colSpan:1,...n.defaultPosition})),[]),U=r.useMemo(()=>{if(w)return w.map((e,n)=>({order:n,rowSpan:1,colSpan:1,...e}))},[w]),[V,D]=r.useState(()=>R(u)),[B,M]=r.useState(!1),W=r.useRef(u.length);r.useEffect(()=>{!p&&u.length!==W.current&&(D(R(u)),W.current=u.length)},[u,p,R]);const T=p?U:V,G=r.useCallback((e,n,a,S=0,I=0)=>{if(n===0&&a===0&&!I&&!S)return;let f=!1;const v=T.map(F=>({...F})),s=v[e],H=v.find(F=>F.order===s.order+n);H&&H!==s&&(s.order+=n,H.order+=-n,f=!0);const L=s.col+a;a!==0&&L>=1&&L+s.colSpan<=l+1&&(s.col=L,f=!0);const x=s.colSpan+I;I&&x>=1&&x+s.col<=l+1&&(s.colSpan=x,f=!0);const _=s.rowSpan+S;S&&_>=1&&(s.rowSpan=_,f=!0),f&&(p||D(v),P&&O.dispatchEvent(P,{},b.current,{value:v}))},[T,l,p,P,b]),E=r.useMemo(()=>i?`${typeof i.rows=="number"?i.rows+"px":i.rows} ${typeof i.columns=="number"?i.columns+"px":i.columns}`:16,[i]),J=r.useMemo(()=>({gridTemplateColumns:`repeat(${l}, minmax(0px, ${typeof g=="number"?g+"px":g}))`,gridAutoRows:`minmax(0px, ${typeof h=="number"?h+"px":h})`,gap:E,padding:E,...j}),[l,g,h,E,j]);return o.createElement("div",{ref:k,dir:z,className:O.classNames("k-tilelayout k-pos-relative",Y[q],m),style:J,id:N,role:"list"},u.map((e,n)=>{let a;return typeof e.header=="string"?a=e.header:a=`tilelayout-${N?`${N}-`:""}${n}`,o.createElement(o.Fragment,{key:C?O.getter(C)(e):n},o.createElement(Q.InternalTile,{update:G,defaultPosition:T[n],index:n,resizable:e.resizable,reorderable:e.reorderable,style:e.style,header:e.header,className:e.className,hintClassName:e.hintClassName,hintStyle:e.hintStyle,ignoreDrag:A,onPress:()=>M(!0),onRelease:()=>M(!1)},e.item?e.item:o.createElement(o.Fragment,null,o.createElement("div",{className:"k-tilelayout-item-header k-card-header"},o.isValidElement(e.header)?e.header:o.createElement("div",{id:a,className:"k-card-title"},e.header)),o.createElement("div",{className:"k-tilelayout-item-body k-card-body"},e.body))))}),!B&&o.createElement("div",{className:"k-layout-item-hint",style:{display:"none",zIndex:"1",height:"auto"}}))});$.displayName="KendoTileLayout";$.propTypes={id:t.string,style:t.object,className:t.string,dir:t.string,gap:t.object,columns:t.number,columnWidth:t.oneOfType([t.number,t.string]),rowHeight:t.oneOfType([t.number,t.string]),dataItemKey:t.string,items:t.array,positions:t.array,autoFlow:t.oneOf(["column","row","column dense","row dense","unset"]),onReposition:t.func,ignoreDrag:t.func};exports.TileLayout=$;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react"),t=require("prop-types"),P=require("@progress/kendo-react-common"),Q=require("./InternalTile.js");function X(c){const d=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(c){for(const m in c)if(m!=="default"){const l=Object.getOwnPropertyDescriptor(c,m);Object.defineProperty(d,m,l.get?l:{enumerable:!0,get:()=>c[m]})}}return d.default=c,Object.freeze(d)}const o=X(n),Y={column:"k-grid-flow-col",row:"k-grid-flow-row","column dense":"k-grid-flow-col-dense","row dense":"k-grid-flow-row-dense",unset:void 0},y={columns:3,columnWidth:"1fr",rowHeight:"1fr",autoFlow:"column",items:[]},$=o.forwardRef((c,d)=>{const{className:m,columns:l=y.columns,columnWidth:g=y.columnWidth,gap:i,rowHeight:h=y.rowHeight,style:j,autoFlow:q=y.autoFlow,items:u=y.items,positions:b,onReposition:N,dataItemKey:C,id:R,dir:z,ignoreDrag:A}=c,K=n.useCallback(()=>{v.current&&v.current.focus()},[]),w=n.useRef(null),v=n.useRef(null);o.useImperativeHandle(w,()=>({element:v.current,focus:K})),o.useImperativeHandle(d,()=>w.current);const p=b!==void 0,T=n.useCallback(e=>e.map((r,a)=>({order:a,rowSpan:1,colSpan:1,...r.defaultPosition})),[]),U=n.useMemo(()=>{if(b)return b.map((e,r)=>({order:r,rowSpan:1,colSpan:1,...e}))},[b]),[V,D]=n.useState(()=>T(u)),[B,M]=n.useState(!1),W=n.useRef(u.length);n.useEffect(()=>{!p&&u.length!==W.current&&(D(T(u)),W.current=u.length)},[u,p,T]);const E=p?U:V,G=n.useCallback((e,r,a,S=0,H=0)=>{if(r===0&&a===0&&!H&&!S)return;let f=!1;const k=E.map(O=>({...O})),s=k[e],L=k.find(O=>O.order===s.order+r);L&&L!==s&&(s.order+=r,L.order+=-r,f=!0);const x=s.col+a;a!==0&&x>=1&&x+s.colSpan<=l+1&&(s.col=x,f=!0);const F=s.colSpan+H;H&&F>=1&&F+s.col<=l+1&&(s.colSpan=F,f=!0);const _=s.rowSpan+S;S&&_>=1&&(s.rowSpan=_,f=!0),f&&(p||D(k),N&&P.dispatchEvent(N,{},w.current,{value:k}))},[E,l,p,N,w]),I=n.useMemo(()=>i?`${typeof i.rows=="number"?i.rows+"px":i.rows} ${typeof i.columns=="number"?i.columns+"px":i.columns}`:16,[i]),J=n.useMemo(()=>({gridTemplateColumns:`repeat(${l}, minmax(0px, ${typeof g=="number"?g+"px":g}))`,gridAutoRows:`minmax(0px, ${typeof h=="number"?h+"px":h})`,gap:I,padding:I,...j}),[l,g,h,I,j]);return o.createElement("div",{ref:v,dir:z,className:P.classNames("k-tilelayout",Y[q],m),style:J,id:R,role:"list"},u.map((e,r)=>{let a;return typeof e.header=="string"?a=e.header:a=`tilelayout-${R?`${R}-`:""}${r}`,o.createElement(o.Fragment,{key:C?P.getter(C)(e):r},o.createElement(Q.InternalTile,{update:G,defaultPosition:E[r],index:r,resizable:e.resizable,reorderable:e.reorderable,style:e.style,header:e.header,className:e.className,hintClassName:e.hintClassName,hintStyle:e.hintStyle,ignoreDrag:A,onPress:()=>M(!0),onRelease:()=>M(!1)},e.item?e.item:o.createElement(o.Fragment,null,o.createElement("div",{className:P.classNames("k-tilelayout-item-header k-card-header",{"k-cursor-move":e.reorderable!==!1})},o.isValidElement(e.header)?e.header:o.createElement("div",{id:a,className:"k-card-title"},e.header)),o.createElement("div",{className:"k-tilelayout-item-body k-card-body"},e.body))))}),!B&&o.createElement("div",{className:"k-layout-item-hint",style:{display:"none",zIndex:"1",height:"auto"}}))});$.displayName="KendoTileLayout";$.propTypes={id:t.string,style:t.object,className:t.string,dir:t.string,gap:t.object,columns:t.number,columnWidth:t.oneOfType([t.number,t.string]),rowHeight:t.oneOfType([t.number,t.string]),dataItemKey:t.string,items:t.array,positions:t.array,autoFlow:t.oneOf(["column","row","column dense","row dense","unset"]),onReposition:t.func,ignoreDrag:t.func};exports.TileLayout=$;

package/tilelayout/TileLayout.mjs

@@ -5,76 +5,76 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import * as o from "react";
-import { useCallback as R, useRef as T, useMemo as F, useState as z, useEffect as Y } from "react";
-import t from "prop-types";
-import { dispatchEvent as Z, classNames as ee, getter as te } from "@progress/kendo-react-common";
-import { InternalTile as oe } from "./InternalTile.mjs";
+import * as t from "react";
+import { useCallback as R, useRef as T, useMemo as F, useState as z, useEffect as Z } from "react";
+import o from "prop-types";
+import { dispatchEvent as ee, classNames as K, getter as oe } from "@progress/kendo-react-common";
+import { InternalTile as te } from "./InternalTile.mjs";
 const re = {
   column: "k-grid-flow-col",
   row: "k-grid-flow-row",
   "column dense": "k-grid-flow-col-dense",
   "row dense": "k-grid-flow-row-dense",
-  unset: "k-grid-flow-unset"
-}, m = {
+  unset: void 0
+}, u = {
   columns: 3,
   columnWidth: "1fr",
   rowHeight: "1fr",
   autoFlow: "column",
   items: []
-}, K = o.forwardRef((U, j) => {
+}, U = t.forwardRef((j, O) => {
   const {
-    className: O,
-    columns: i = m.columns,
-    columnWidth: d = m.columnWidth,
+    className: V,
+    columns: i = u.columns,
+    columnWidth: d = u.columnWidth,
     gap: a,
-    rowHeight: p = m.rowHeight,
+    rowHeight: p = u.rowHeight,
     style: L,
-    autoFlow: V = m.autoFlow,
-    items: l = m.items,
+    autoFlow: _ = u.autoFlow,
+    items: l = u.items,
     positions: f,
     onReposition: b,
     dataItemKey: $,
     id: v,
-    dir: _,
-    ignoreDrag: M
-  } = U, q = R(() => {
+    dir: M,
+    ignoreDrag: q
+  } = j, B = R(() => {
     g.current && g.current.focus();
   }, []), y = T(null), g = T(null);
-  o.useImperativeHandle(
+  t.useImperativeHandle(
     y,
     () => ({
       element: g.current,
-      focus: q
+      focus: B
     })
-  ), o.useImperativeHandle(j, () => y.current);
-  const c = f !== void 0, k = R((e) => e.map((r, s) => ({ order: s, rowSpan: 1, colSpan: 1, ...r.defaultPosition })), []), B = F(() => {
+  ), t.useImperativeHandle(O, () => y.current);
+  const c = f !== void 0, k = R((e) => e.map((r, s) => ({ order: s, rowSpan: 1, colSpan: 1, ...r.defaultPosition })), []), G = F(() => {
     if (f)
       return f.map(
         (e, r) => ({ order: r, rowSpan: 1, colSpan: 1, ...e })
       );
-  }, [f]), [G, W] = z(
+  }, [f]), [J, W] = z(
     () => k(l)
-  ), [J, A] = z(!1), C = T(l.length);
-  Y(() => {
+  ), [Q, A] = z(!1), C = T(l.length);
+  Z(() => {
     !c && l.length !== C.current && (W(k(l)), C.current = l.length);
   }, [l, c, k]);
-  const S = c ? B : G, Q = R(
+  const S = c ? G : J, X = R(
     (e, r, s, h = 0, P = 0) => {
       if (r === 0 && s === 0 && !P && !h)
         return;
-      let u = !1;
+      let m = !1;
       const w = S.map((I) => ({ ...I })), n = w[e], E = w.find((I) => I.order === n.order + r);
-      E && E !== n && (n.order += r, E.order += -r, u = !0);
+      E && E !== n && (n.order += r, E.order += -r, m = !0);
       const x = n.col + s;
-      s !== 0 && x >= 1 && x + n.colSpan <= i + 1 && (n.col = x, u = !0);
+      s !== 0 && x >= 1 && x + n.colSpan <= i + 1 && (n.col = x, m = !0);
       const H = n.colSpan + P;
-      P && H >= 1 && H + n.col <= i + 1 && (n.colSpan = H, u = !0);
+      P && H >= 1 && H + n.col <= i + 1 && (n.colSpan = H, m = !0);
       const D = n.rowSpan + h;
-      h && D >= 1 && (n.rowSpan = D, u = !0), u && (c || W(w), b && Z(b, {}, y.current, { value: w }));
+      h && D >= 1 && (n.rowSpan = D, m = !0), m && (c || W(w), b && ee(b, {}, y.current, { value: w }));
     },
     [S, i, c, b, y]
-  ), N = F(() => a ? `${typeof a.rows == "number" ? a.rows + "px" : a.rows} ${typeof a.columns == "number" ? a.columns + "px" : a.columns}` : 16, [a]), X = F(
+  ), N = F(() => a ? `${typeof a.rows == "number" ? a.rows + "px" : a.rows} ${typeof a.columns == "number" ? a.columns + "px" : a.columns}` : 16, [a]), Y = F(
     () => ({
       gridTemplateColumns: `repeat(${i}, minmax(0px, ${typeof d == "number" ? d + "px" : d}))`,
       gridAutoRows: `minmax(0px, ${typeof p == "number" ? p + "px" : p})`,
@@ -84,22 +84,22 @@ const re = {
     }),
     [i, d, p, N, L]
   );
-  return /* @__PURE__ */ o.createElement(
+  return /* @__PURE__ */ t.createElement(
     "div",
     {
       ref: g,
-      dir: _,
-      className: ee("k-tilelayout k-pos-relative", re[V], O),
-      style: X,
+      dir: M,
+      className: K("k-tilelayout", re[_], V),
+      style: Y,
       id: v,
       role: "list"
     },
     l.map((e, r) => {
       let s;
-      return typeof e.header == "string" ? s = e.header : s = `tilelayout-${v ? `${v}-` : ""}${r}`, /* @__PURE__ */ o.createElement(o.Fragment, { key: $ ? te($)(e) : r }, /* @__PURE__ */ o.createElement(
-        oe,
+      return typeof e.header == "string" ? s = e.header : s = `tilelayout-${v ? `${v}-` : ""}${r}`, /* @__PURE__ */ t.createElement(t.Fragment, { key: $ ? oe($)(e) : r }, /* @__PURE__ */ t.createElement(
+        te,
         {
-          update: Q,
+          update: X,
           defaultPosition: S[r],
           index: r,
           resizable: e.resizable,
@@ -109,33 +109,33 @@ const re = {
           className: e.className,
           hintClassName: e.hintClassName,
           hintStyle: e.hintStyle,
-          ignoreDrag: M,
+          ignoreDrag: q,
           onPress: () => A(!0),
           onRelease: () => A(!1)
         },
-        e.item ? e.item : /* @__PURE__ */ o.createElement(o.Fragment, null, /* @__PURE__ */ o.createElement("div", { className: "k-tilelayout-item-header k-card-header" }, o.isValidElement(e.header) ? e.header : /* @__PURE__ */ o.createElement("div", { id: s, className: "k-card-title" }, e.header)), /* @__PURE__ */ o.createElement("div", { className: "k-tilelayout-item-body k-card-body" }, e.body))
+        e.item ? e.item : /* @__PURE__ */ t.createElement(t.Fragment, null, /* @__PURE__ */ t.createElement("div", { className: K("k-tilelayout-item-header k-card-header", { "k-cursor-move": e.reorderable !== !1 }) }, t.isValidElement(e.header) ? e.header : /* @__PURE__ */ t.createElement("div", { id: s, className: "k-card-title" }, e.header)), /* @__PURE__ */ t.createElement("div", { className: "k-tilelayout-item-body k-card-body" }, e.body))
       ));
     }),
-    !J && /* @__PURE__ */ o.createElement("div", { className: "k-layout-item-hint", style: { display: "none", zIndex: "1", height: "auto" } })
+    !Q && /* @__PURE__ */ t.createElement("div", { className: "k-layout-item-hint", style: { display: "none", zIndex: "1", height: "auto" } })
   );
 });
-K.displayName = "KendoTileLayout";
-K.propTypes = {
-  id: t.string,
-  style: t.object,
-  className: t.string,
-  dir: t.string,
-  gap: t.object,
-  columns: t.number,
-  columnWidth: t.oneOfType([t.number, t.string]),
-  rowHeight: t.oneOfType([t.number, t.string]),
-  dataItemKey: t.string,
-  items: t.array,
-  positions: t.array,
-  autoFlow: t.oneOf(["column", "row", "column dense", "row dense", "unset"]),
-  onReposition: t.func,
-  ignoreDrag: t.func
+U.displayName = "KendoTileLayout";
+U.propTypes = {
+  id: o.string,
+  style: o.object,
+  className: o.string,
+  dir: o.string,
+  gap: o.object,
+  columns: o.number,
+  columnWidth: o.oneOfType([o.number, o.string]),
+  rowHeight: o.oneOfType([o.number, o.string]),
+  dataItemKey: o.string,
+  items: o.array,
+  positions: o.array,
+  autoFlow: o.oneOf(["column", "row", "column dense", "row dense", "unset"]),
+  onReposition: o.func,
+  ignoreDrag: o.func
 };
 export {
-  K as TileLayout
+  U as TileLayout
 };

package/timeline/TimelineCard.d.ts

@@ -13,11 +13,13 @@ import * as React from 'react';
 interface TimelineCardProps {
     tabindex?: number;
     id?: string;
+    panelId?: string;
     eventData: TimelineEventProps;
     alternated?: boolean;
     horizontal?: boolean;
     collapsible?: boolean;
     navigatable?: boolean;
+    ariaLabel?: string;
     calloutStyle?: React.CSSProperties;
     transitionDuration?: number;
     onChange?: (event: EventDataProps) => void;