@progress/kendo-react-layout/gridlayout/GridLayout.js

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

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2025 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 O=require("react"),t=require("prop-types"),d=require("@progress/kendo-react-common");function T(e){const l=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(e){for(const i in e)if(i!=="default"){const c=Object.getOwnPropertyDescriptor(e,i);Object.defineProperty(l,i,c.get?c:{enumerable:!0,get:()=>e[i]})}}return l.default=e,Object.freeze(l)}const n=T(O),m=n.forwardRef((e,l)=>{const i=n.useRef(null),c=n.useCallback(()=>({element:i.current}),[]);n.useImperativeHandle(l,c);const{className:u,style:y,id:f,children:h,gap:s=g.gap}=e,b=d.useId(),o=n.useMemo(()=>e.align&&e.align.horizontal?e.align.horizontal:g.hAlign,[e.align]),r=n.useMemo(()=>e.align&&e.align.vertical?e.align.vertical:g.vAlign,[e.align]),p=n.useMemo(()=>d.classNames("k-grid-layout",{"k-justify-items-start":o==="start","k-justify-items-center":o==="center","k-justify-items-end":o==="end","k-justify-items-stretch":o==="stretch","k-align-items-start":r==="top","k-align-items-center":r==="middle","k-align-items-end":r==="bottom","k-align-items-stretch":r==="stretch"},u),[o,r,u]),v=s?`${typeof s.rows=="number"?s.rows+"px":s.rows} ${typeof s.cols=="number"?s.cols+"px":s.cols}`:void 0,j=e.rows&&e.rows.map(a=>`${typeof a.height=="number"?a.height+"px":a.height}`).join(" "),k=e.cols&&e.cols.map(a=>`${typeof a.width=="number"?a.width+"px":a.width}`).join(" "),w={gap:v,gridTemplateColumns:k,gridTemplateRows:j,...y};return n.createElement("div",{ref:i,className:p,style:w,id:f||b},h)}),g={hAlign:"stretch",vAlign:"stretch",gap:void 0};m.propTypes={className:t.string,style:t.object,children:t.any,id:t.string,gap:t.shape({rows:t.oneOfType([t.string,t.number]),columns:t.oneOfType([t.string,t.number])}),align:t.shape({vertical:t.oneOf(["top","middle","bottom","stretch"]),horizontal:t.oneOf(["start","center","end","stretch"])})};m.displayName="KendoReactGridLayout";exports.GridLayout=m;