@progress/kendo-react-layout 14.5.0-develop.9 → 15.0.0-develop.2

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;

package/timeline/TimelineCard.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 N=require("react"),k=require("prop-types"),y=require("../card/Card.js"),A=require("../card/CardHeader.js"),D=require("../card/CardTitle.js"),I=require("../card/CardSubtitle.js"),O=require("../card/CardBody.js"),T=require("../card/CardImage.js"),h=require("../card/CardActions.js"),v=require("@progress/kendo-react-common"),q=require("@progress/kendo-react-animation"),R=require("@progress/kendo-svg-icons"),S=require("@progress/kendo-react-buttons");function x(e){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const l in e)if(l!=="default"){const c=Object.getOwnPropertyDescriptor(e,l);Object.defineProperty(i,l,c.get?c:{enumerable:!0,get:()=>e[l]})}}return i.default=e,Object.freeze(i)}const t=x(N),E=e=>{const{title:l,subtitle:c,actions:r,images:o,description:C}=e.eventData,[d,b]=t.useState(e.eventData.opened||!1),[s,u]=t.useState(e.eventData.opened||!!e.collapsible),f=a=>{if(b(!d),e.onChange){const n={syntheticEvent:a,nativeEvent:a.nativeEvent,eventData:e.eventData};e.onChange.call(void 0,n)}},g=a=>{if(e.onActionClick){const n={syntheticEvent:a,nativeEvent:a.nativeEvent,eventData:e.eventData};e.onActionClick.call(void 0,n)}},m=()=>t.createElement(t.Fragment,null,t.createElement(O.CardBody,null,t.createElement("div",{className:"k-card-description"},t.createElement("p",null,C),o&&o.map((a,n)=>t.createElement(T.CardImage,{key:n,src:a.src})))),r&&t.createElement(h.CardActions,null,r.map((a,n)=>t.createElement("a",{key:n,href:a.url,className:"k-button k-button-md k-rounded-md k-button-flat k-button-flat-primary",onClick:g},a.text))));return t.createElement("div",{"data-testid":"k-timeline-card",className:v.classNames("k-timeline-card",{"k-collapsed":e.collapsible&&s})},t.createElement(y.Card,{"aria-live":"polite","aria-describedby":e.id,"aria-atomic":"true",tabIndex:e.tabindex,role:e.horizontal?"tabpanel":"button","aria-expanded":e.collapsible&&s,className:"k-card-with-callout",onClick:a=>f(a)},t.createElement("span",{style:e.calloutStyle,className:v.classNames("k-timeline-card-callout","k-card-callout",{"k-callout-n":e.horizontal},{"k-callout-e":e.alternated&&!e.horizontal},{"k-callout-w":!e.alternated&&!e.horizontal})}),t.createElement("div",{className:"k-card-inner"},t.createElement(A.CardHeader,null,t.createElement(D.CardTitle,null,t.createElement("span",{className:"k-event-title"},l),e.collapsible&&t.createElement(S.Button,{className:"k-event-collapse",fillMode:"flat",size:"xs",svgIcon:R.chevronRightIcon})),c&&t.createElement(I.CardSubtitle,null,c)),e.collapsible?t.createElement(q.Reveal,{transitionEnterDuration:e.transitionDuration||400,transitionExitDuration:e.transitionDuration||400,onBeforeEnter:()=>u(!1),onAfterExited:()=>u(!0)},d?m():null):m())))};E.propTypes={onChange:k.func,onActionClick:k.func};exports.TimelineCard=E;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const N=require("react"),v=require("prop-types"),y=require("../card/Card.js"),A=require("../card/CardHeader.js"),D=require("../card/CardTitle.js"),I=require("../card/CardSubtitle.js"),h=require("../card/CardBody.js"),O=require("../card/CardImage.js"),T=require("../card/CardActions.js"),k=require("@progress/kendo-react-common"),q=require("@progress/kendo-react-animation"),R=require("@progress/kendo-svg-icons"),S=require("@progress/kendo-react-buttons");function x(e){const i=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const l in e)if(l!=="default"){const c=Object.getOwnPropertyDescriptor(e,l);Object.defineProperty(i,l,c.get?c:{enumerable:!0,get:()=>e[l]})}}return i.default=e,Object.freeze(i)}const t=x(N),E=e=>{const{title:l,subtitle:c,actions:r,images:o,description:b}=e.eventData,[d,C]=t.useState(e.eventData.opened||!1),[s,u]=t.useState(e.eventData.opened||!!e.collapsible),f=a=>{if(C(!d),e.onChange){const n={syntheticEvent:a,nativeEvent:a.nativeEvent,eventData:e.eventData};e.onChange.call(void 0,n)}},g=a=>{if(e.onActionClick){const n={syntheticEvent:a,nativeEvent:a.nativeEvent,eventData:e.eventData};e.onActionClick.call(void 0,n)}},m=()=>t.createElement(t.Fragment,null,t.createElement(h.CardBody,null,t.createElement("div",{className:"k-card-description"},t.createElement("p",null,b),o&&o.map((a,n)=>t.createElement(O.CardImage,{key:n,src:a.src})))),r&&t.createElement(T.CardActions,null,r.map((a,n)=>t.createElement("a",{key:n,href:a.url,className:"k-button k-button-md k-rounded-md k-button-flat k-button-flat-primary",onClick:g},a.text))));return t.createElement("div",{"data-testid":"k-timeline-card",className:k.classNames("k-timeline-card",{"k-collapsed":e.collapsible&&s})},t.createElement(y.Card,{id:e.panelId,"aria-label":e.ariaLabel,"aria-live":e.horizontal?void 0:"polite","aria-describedby":e.id,tabIndex:e.tabindex,role:e.horizontal?"tabpanel":"button","aria-expanded":e.collapsible?s:void 0,className:"k-card-with-callout",onClick:a=>f(a)},t.createElement("span",{style:e.calloutStyle,className:k.classNames("k-timeline-card-callout","k-card-callout",{"k-callout-n":e.horizontal},{"k-callout-e":e.alternated&&!e.horizontal},{"k-callout-w":!e.alternated&&!e.horizontal})}),t.createElement("div",{className:"k-card-inner"},t.createElement(A.CardHeader,null,t.createElement(D.CardTitle,null,t.createElement("span",{className:"k-event-title"},l),e.collapsible&&t.createElement(S.Button,{className:"k-event-collapse",fillMode:"flat",size:"xs",svgIcon:R.chevronRightIcon})),c&&t.createElement(I.CardSubtitle,null,c)),e.collapsible?t.createElement(q.Reveal,{transitionEnterDuration:e.transitionDuration||400,transitionExitDuration:e.transitionDuration||400,onBeforeEnter:()=>u(!1),onAfterExited:()=>u(!0)},d?m():null):m())))};E.propTypes={onChange:v.func,onActionClick:v.func};exports.TimelineCard=E;