@progress/kendo-react-layout/tilelayout/TileLayout.js

React Layout components enable you to create a perceptive and intuitive layout of web projects. KendoReact Layout package

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2026 Progress Software Corporation. All rights reserved.
 * 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"),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=$;