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