monday-ui-react-core/dist/esm/src/components/Flex/Flex.js

Official monday.com UI resources for application development in React.js

import{defineProperty as e}from"../../../_virtual/_rollupPluginBabelHelpers.js";import i,{forwardRef as a,useRef as t,useMemo as r}from"react";import s from"classnames";import o from"../../hooks/useMergeRef.js";import l from"../Clickable/Clickable.js";import{FlexJustify as n,FlexAlign as c,FlexGap as p,FlexDirection as d}from"./FlexConstants.js";import{withStaticProps as m}from"../../types/withStaticProps.js";import{getStyle as f}from"../../helpers/typesciptCssModulesHelper.js";import u from"./Flex.module.scss.js";var b=a((function(a,n){var c=a.className,p=a.id,d=a.elementType,m=void 0===d?"div":d,j=a.direction,y=void 0===j?b.directions.ROW:j,g=a.wrap,v=void 0!==g&&g,C=a.children,x=a.justify,k=void 0===x?b.justify.START:x,N=a.align,O=void 0===N?b.align.CENTER:N,T=a.gap,h=void 0===T?b.gaps.NONE:T,E=a.onClick,R=a.style,w=a.ariaLabelledby,L=a.ariaLabel,P=a.tabIndex,F=a["data-testid"],H=t(null),I=o(n,H),M=r((function(){return Object.assign(Object.assign({},R),{gap:"".concat(h,"px")})}),[R,h]),S=r((function(){return E?{elementType:m,ariaLabelledby:w}:{"aria-labelledby":w}}),[E,m,w]);return i.createElement(E?l:m,Object.assign({id:p,"data-testid":F},S,{ref:I,className:s(u.container,f(u,"direction".concat(y)),f(u,"justify".concat(k)),f(u,"align".concat(O)),c,e({},u.wrap,v)),tabIndex:P,onClick:E,style:M,"aria-label":L}),C)})),j=m(b,{justify:n,align:c,gaps:p,directions:d});export{j as default};
//# sourceMappingURL=Flex.js.map