@progress/kendo-react-layout 13.4.0-develop.2 → 13.4.0-develop.4

package/tilelayout/TileLayout.d.ts

@@ -5,7 +5,6 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import { default as PropTypes } from 'prop-types';
 import { TileLayoutGap, TileLayoutItem, TilePosition, TileLayoutRepositionEvent, TileStrictPosition, TileLayoutAutoFlow } from './interfaces/index.js';
 import * as React from 'react';
 /**
@@ -117,16 +116,6 @@ export interface TileLayoutProps {
      * ```
      */
     positions?: TilePosition[];
-    /**
-     * Fires when the user repositions the tile by either dragging or resizing
-     * ([see example](https://www.telerik.com/kendo-react-ui/components/layout/tilelayout/tiles#toc-controlling-the-position)).
-     *
-     * @example
-     * ```jsx
-     * <TileLayout onReposition={(e) => console.log(e.value)} />
-     * ```
-     */
-    onReposition?: (event: TileLayoutRepositionEvent) => void;
     /**
      * Controls how the auto-placement algorithm works, specifying exactly how auto-placed items get flowed into the TileLayout.
      * For further reference, check [grid-auto-flow CSS](https://developer.mozilla.org/en-US/docs/Web/CSS/grid-auto-flow) article.
@@ -141,6 +130,16 @@ export interface TileLayoutProps {
      * ```
      */
     autoFlow?: TileLayoutAutoFlow;
+    /**
+     * Fires when the user repositions the tile by either dragging or resizing
+     * ([see example](https://www.telerik.com/kendo-react-ui/components/layout/tilelayout/tiles#toc-controlling-the-position)).
+     *
+     * @example
+     * ```jsx
+     * <TileLayout onReposition={(e) => console.log(e.value)} />
+     * ```
+     */
+    onReposition?: (event: TileLayoutRepositionEvent) => void;
     /**
      * Use this callback to prevent or allow dragging of the tiles based on specific DOM events.
      * Setting `ignoreDrag={(e) => { return !(e.target.classList.contains("k-card-title")); }}` makes only the headers draggable.
@@ -151,7 +150,7 @@ export interface TileLayoutProps {
      * <TileLayout ignoreDrag={(e) => e.target.nodeName === 'INPUT'} />
      * ```
      */
-    ignoreDrag?: (event: any) => boolean;
+    ignoreDrag?: (element: HTMLElement) => boolean;
 }
 /**
  * @hidden
@@ -161,68 +160,24 @@ export interface TileLayoutState {
     activeHint?: boolean;
 }
 /**
- * Represents the [KendoReact TileLayout component](https://www.telerik.com/kendo-react-ui/components/layout/tilelayout).
+ * Represents the public API of the TileLayout component.
  */
-export declare class TileLayout extends React.Component<TileLayoutProps, TileLayoutState> {
-    /**
-     * @hidden
-     */
-    static propTypes: {
-        id: PropTypes.Requireable<string>;
-        style: PropTypes.Requireable<object>;
-        className: PropTypes.Requireable<string>;
-        dir: PropTypes.Requireable<string>;
-        gap: PropTypes.Requireable<object>;
-        columns: PropTypes.Requireable<number>;
-        columnWidth: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
-        rowHeight: PropTypes.Requireable<NonNullable<string | number | null | undefined>>;
-        dataItemKey: PropTypes.Requireable<string>;
-        items: PropTypes.Requireable<any[]>;
-        positions: PropTypes.Requireable<any[]>;
-        autoFlow: PropTypes.Requireable<string>;
-        onReposition: PropTypes.Requireable<(...args: any[]) => any>;
-        ignoreDrag: PropTypes.Requireable<(...args: any[]) => any>;
-    };
-    /**
-     * @hidden
-     */
-    static displayName: string;
-    /**
-     * @hidden
-     */
-    _element: HTMLDivElement | null;
-    /**
-     * @hidden
-     */
-    state: {
-        positions: ({
-            order: number;
-            rowSpan: number;
-            colSpan: number;
-        } & TilePosition)[];
-        activeHint: boolean;
-    };
+export interface TileLayoutHandle {
     /**
      * Gets the HTML element of the TileLayout component.
      */
-    get element(): HTMLDivElement | null;
+    element: HTMLDivElement | null;
     /**
-     * @hidden
+     * Focuses the TileLayout component.
      */
     focus: () => void;
-    /**
-     * @hidden
-     */
-    static getDerivedStateFromProps(props: TileLayoutProps, state: TileLayoutState): {
-        positions: ({
-            order: number;
-            rowSpan: number;
-            colSpan: number;
-        } & TilePosition)[];
-    } | null;
-    /**
-     * @hidden
-     */
-    update: (index: number, dOrder: number, dCol: number, dRowSpan?: number, dColSpan?: number) => void;
-    render(): React.JSX.Element;
 }
+/**
+ * Represents the [KendoReact TileLayout component](https://www.telerik.com/kendo-react-ui/components/layout/tilelayout).
+ *
+ * @example
+ * ```jsx
+ * <TileLayout />
+ * ```
+ */
+export declare const TileLayout: React.ForwardRefExoticComponent<TileLayoutProps & React.RefAttributes<TileLayoutHandle>>;

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 w=require("react"),t=require("prop-types"),y=require("@progress/kendo-react-common"),S=require("./InternalTile.js");function k(d){const o=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(d){for(const s in d)if(s!=="default"){const n=Object.getOwnPropertyDescriptor(d,s);Object.defineProperty(o,s,n.get?n:{enumerable:!0,get:()=>d[s]})}}return o.default=d,Object.freeze(o)}const a=k(w),v={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"},g=class g extends a.Component{constructor(){super(...arguments),this._element=null,this.state={positions:(this.props.items||[]).map((o,s)=>Object.assign({order:s,rowSpan:1,colSpan:1},o.defaultPosition)),activeHint:!1},this.focus=()=>{this._element&&this._element.focus()},this.update=(o,s,n,r=0,c=0)=>{if(s===0&&n===0&&!c&&!r)return;let p=!1;const m=this.state.positions.map(f=>Object.assign({},f)),i=m[o],u=m.find(f=>f.order===i.order+s);u&&u!==i&&(i.order+=s,u.order+=-s,p=!0);const h=i.col+n;n!==0&&h>=1&&h+i.colSpan<=(this.props.columns||3)+1&&(i.col=h,p=!0);const e=i.colSpan+c;c&&e>=1&&e+i.col<=(this.props.columns||3)+1&&(i.colSpan=e,p=!0);const l=i.rowSpan+r;r&&l>=1&&(i.rowSpan=l,p=!0),p&&(this.setState({positions:m}),y.dispatchEvent(this.props.onReposition,{},this,{value:m}))}}get element(){return this._element}static getDerivedStateFromProps(o,s){return o.positions?{positions:o.positions.map((n,r)=>Object.assign({order:r,rowSpan:1,colSpan:1},n))}:o.items&&(!s.positions||o.items.length!==s.positions.length)?{positions:o.items.map((n,r)=>Object.assign({order:r,rowSpan:1,colSpan:1},n.defaultPosition))}:null}render(){const{className:o,columns:s=3,columnWidth:n="1fr",gap:r,rowHeight:c="1fr",style:p,autoFlow:m="column",items:i=[]}=this.props,u=r?`${typeof r.rows=="number"?r.rows+"px":r.rows} ${typeof r.columns=="number"?r.columns+"px":r.columns}`:16,h={gridTemplateColumns:`repeat(${s}, minmax(0px, ${typeof n=="number"?n+"px":n}))`,gridAutoRows:`minmax(0px, ${typeof c=="number"?c+"px":c})`,gap:u,padding:u,...p};return a.createElement("div",{ref:e=>{this._element=e},dir:this.props.dir,className:y.classNames("k-tilelayout k-pos-relative",v[m],o),style:h,id:this.props.id,role:"list"},i.map((e,l)=>a.createElement(a.Fragment,{key:this.props.dataItemKey?y.getter(this.props.dataItemKey)(e):l},a.createElement(S.InternalTile,{update:this.update,defaultPosition:this.state.positions[l],index:l,resizable:e.resizable,reorderable:e.reorderable,style:e.style,header:e.header,className:e.className,hintClassName:e.hintClassName,hintStyle:e.hintStyle,ignoreDrag:this.props.ignoreDrag,onPress:()=>this.setState({activeHint:!0}),onRelease:()=>this.setState({activeHint:!1})},e.item?e.item:a.createElement(a.Fragment,null,a.createElement("div",{className:"k-tilelayout-item-header k-card-header"},a.isValidElement(e.header)?e.header:a.createElement("div",{id:typeof e.header=="string"?e.header:this.props.id?`tilelayout-${this.props.id}-${l}`:`tilelayout-${l}`,className:"k-card-title"},e.header)),a.createElement("div",{className:"k-tilelayout-item-body k-card-body"},e.body))))),!this.state.activeHint&&a.createElement("div",{className:"k-layout-item-hint",style:{display:"none",zIndex:"1",height:"auto"}}))}};g.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},g.displayName="KendoTileLayout";let b=g;exports.TileLayout=b;
+"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=$;

package/tilelayout/TileLayout.mjs

@@ -5,92 +5,103 @@
  * Licensed under commercial license. See LICENSE.md in the package root for more information
  *-------------------------------------------------------------------------------------------
  */
-import * as r from "react";
+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 y, classNames as w, getter as b } from "@progress/kendo-react-common";
-import { InternalTile as S } from "./InternalTile.mjs";
-const k = {
+import { dispatchEvent as Z, classNames as ee, getter as te } from "@progress/kendo-react-common";
+import { InternalTile as oe } 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"
-}, h = class h extends r.Component {
-  constructor() {
-    super(...arguments), this._element = null, this.state = {
-      positions: (this.props.items || []).map(
-        (i, n) => Object.assign({ order: n, rowSpan: 1, colSpan: 1 }, i.defaultPosition)
-      ),
-      activeHint: !1
-    }, this.focus = () => {
-      this._element && this._element.focus();
-    }, this.update = (i, n, a, s = 0, p = 0) => {
-      if (n === 0 && a === 0 && !p && !s)
+}, m = {
+  columns: 3,
+  columnWidth: "1fr",
+  rowHeight: "1fr",
+  autoFlow: "column",
+  items: []
+}, K = o.forwardRef((U, j) => {
+  const {
+    className: O,
+    columns: i = m.columns,
+    columnWidth: d = m.columnWidth,
+    gap: a,
+    rowHeight: p = m.rowHeight,
+    style: L,
+    autoFlow: V = m.autoFlow,
+    items: l = m.items,
+    positions: f,
+    onReposition: b,
+    dataItemKey: $,
+    id: v,
+    dir: _,
+    ignoreDrag: M
+  } = U, q = R(() => {
+    g.current && g.current.focus();
+  }, []), y = T(null), g = T(null);
+  o.useImperativeHandle(
+    y,
+    () => ({
+      element: g.current,
+      focus: q
+    })
+  ), 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(() => {
+    if (f)
+      return f.map(
+        (e, r) => ({ order: r, rowSpan: 1, colSpan: 1, ...e })
+      );
+  }, [f]), [G, W] = z(
+    () => k(l)
+  ), [J, A] = z(!1), C = T(l.length);
+  Y(() => {
+    !c && l.length !== C.current && (W(k(l)), C.current = l.length);
+  }, [l, c, k]);
+  const S = c ? B : G, Q = R(
+    (e, r, s, h = 0, P = 0) => {
+      if (r === 0 && s === 0 && !P && !h)
         return;
-      let m = !1;
-      const c = this.state.positions.map((f) => Object.assign({}, f)), o = c[i], u = c.find((f) => f.order === o.order + n);
-      u && u !== o && (o.order += n, u.order += -n, m = !0);
-      const d = o.col + a;
-      a !== 0 && d >= 1 && d + o.colSpan <= (this.props.columns || 3) + 1 && (o.col = d, m = !0);
-      const e = o.colSpan + p;
-      p && e >= 1 && e + o.col <= (this.props.columns || 3) + 1 && (o.colSpan = e, m = !0);
-      const l = o.rowSpan + s;
-      s && l >= 1 && (o.rowSpan = l, m = !0), m && (this.setState({ positions: c }), y(this.props.onReposition, {}, this, { value: c }));
-    };
-  }
-  /**
-   * Gets the HTML element of the TileLayout component.
-   */
-  get element() {
-    return this._element;
-  }
-  /**
-   * @hidden
-   */
-  static getDerivedStateFromProps(i, n) {
-    return i.positions ? {
-      positions: i.positions.map((a, s) => Object.assign({ order: s, rowSpan: 1, colSpan: 1 }, a))
-    } : i.items && (!n.positions || i.items.length !== n.positions.length) ? {
-      positions: i.items.map(
-        (a, s) => Object.assign({ order: s, rowSpan: 1, colSpan: 1 }, a.defaultPosition)
-      )
-    } : null;
-  }
-  render() {
-    const {
-      className: i,
-      columns: n = 3,
-      columnWidth: a = "1fr",
-      gap: s,
-      rowHeight: p = "1fr",
-      style: m,
-      autoFlow: c = "column",
-      items: o = []
-    } = this.props, u = s ? `${typeof s.rows == "number" ? s.rows + "px" : s.rows} ${typeof s.columns == "number" ? s.columns + "px" : s.columns}` : 16, d = {
-      gridTemplateColumns: `repeat(${n}, minmax(0px, ${typeof a == "number" ? a + "px" : a}))`,
+      let u = !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);
+      const x = n.col + s;
+      s !== 0 && x >= 1 && x + n.colSpan <= i + 1 && (n.col = x, u = !0);
+      const H = n.colSpan + P;
+      P && H >= 1 && H + n.col <= i + 1 && (n.colSpan = H, u = !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 }));
+    },
+    [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(
+    () => ({
+      gridTemplateColumns: `repeat(${i}, minmax(0px, ${typeof d == "number" ? d + "px" : d}))`,
       gridAutoRows: `minmax(0px, ${typeof p == "number" ? p + "px" : p})`,
-      gap: u,
-      padding: u,
-      ...m
-    };
-    return /* @__PURE__ */ r.createElement(
-      "div",
-      {
-        ref: (e) => {
-          this._element = e;
-        },
-        dir: this.props.dir,
-        className: w("k-tilelayout k-pos-relative", k[c], i),
-        style: d,
-        id: this.props.id,
-        role: "list"
-      },
-      o.map((e, l) => /* @__PURE__ */ r.createElement(r.Fragment, { key: this.props.dataItemKey ? b(this.props.dataItemKey)(e) : l }, /* @__PURE__ */ r.createElement(
-        S,
+      gap: N,
+      padding: N,
+      ...L
+    }),
+    [i, d, p, N, L]
+  );
+  return /* @__PURE__ */ o.createElement(
+    "div",
+    {
+      ref: g,
+      dir: _,
+      className: ee("k-tilelayout k-pos-relative", re[V], O),
+      style: X,
+      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,
         {
-          update: this.update,
-          defaultPosition: this.state.positions[l],
-          index: l,
+          update: Q,
+          defaultPosition: S[r],
+          index: r,
           resizable: e.resizable,
           reorderable: e.reorderable,
           style: e.style,
@@ -98,24 +109,18 @@ const k = {
           className: e.className,
           hintClassName: e.hintClassName,
           hintStyle: e.hintStyle,
-          ignoreDrag: this.props.ignoreDrag,
-          onPress: () => this.setState({ activeHint: !0 }),
-          onRelease: () => this.setState({ activeHint: !1 })
+          ignoreDrag: M,
+          onPress: () => A(!0),
+          onRelease: () => A(!1)
         },
-        e.item ? e.item : /* @__PURE__ */ r.createElement(r.Fragment, null, /* @__PURE__ */ r.createElement("div", { className: "k-tilelayout-item-header k-card-header" }, r.isValidElement(e.header) ? e.header : /* @__PURE__ */ r.createElement(
-          "div",
-          {
-            id: typeof e.header == "string" ? e.header : this.props.id ? `tilelayout-${this.props.id}-${l}` : `tilelayout-${l}`,
-            className: "k-card-title"
-          },
-          e.header
-        )), /* @__PURE__ */ r.createElement("div", { className: "k-tilelayout-item-body k-card-body" }, e.body))
-      ))),
-      !this.state.activeHint && /* @__PURE__ */ r.createElement("div", { className: "k-layout-item-hint", style: { display: "none", zIndex: "1", height: "auto" } })
-    );
-  }
-};
-h.propTypes = {
+        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))
+      ));
+    }),
+    !J && /* @__PURE__ */ o.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,
@@ -130,8 +135,7 @@ h.propTypes = {
   autoFlow: t.oneOf(["column", "row", "column dense", "row dense", "unset"]),
   onReposition: t.func,
   ignoreDrag: t.func
-}, h.displayName = "KendoTileLayout";
-let g = h;
+};
 export {
-  g as TileLayout
+  K as TileLayout
 };

package/tilelayout/interfaces/index.d.ts

@@ -6,7 +6,7 @@
  *-------------------------------------------------------------------------------------------
  */
 import { BaseEvent } from '@progress/kendo-react-common';
-import { TileLayout } from '../TileLayout.js';
+import { TileLayoutHandle } from '../TileLayout.js';
 /**
  * The interface for describing items that can be passed to the `items` prop of the TileLayout component.
  */
@@ -151,7 +151,7 @@ export type TileLayoutAutoFlow = 'column' | 'row' | 'column dense' | 'row dense'
 /**
  * The arguments for the `onReposition` TileLayout event.
  */
-export interface TileLayoutRepositionEvent extends BaseEvent<TileLayout> {
+export interface TileLayoutRepositionEvent extends BaseEvent<TileLayoutHandle> {
     /**
      * The new positions of the TileLayout tiles.
      */