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

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

import{defineProperty as e}from"../../../_virtual/_rollupPluginBabelHelpers.js";import{getTestId as t,ComponentDefaultTestId as i}from"../../tests/testIds.js";import o from"classnames";import r,{forwardRef as s,useRef as l,useMemo as a}from"react";import n from"../Tooltip/Tooltip.js";import p from"../../hooks/useIsOverflowing/useIsOverflowing.js";import m from"../../hooks/ssr/useIsomorphicLayoutEffect.js";import f from"../../hooks/useMergeRef.js";import c from"./TextWithHighlight.module.scss.js";var u=function(e,t,i){return i?r.createElement(arguments.length>3&&void 0!==arguments[3]?arguments[3]:"em",{className:o(c.highlightText,arguments.length>4?arguments[4]:void 0),key:t},e):r.createElement("span",{key:t},e)},g=s((function(s,g){var h=s.className,d=s.id,v=s.text,T=void 0===v?"":v,E=s.highlightTerm,j=s.limit,x=s.useEllipsis,H=void 0===x||x,I=s.linesToClamp,w=void 0===I?3:I,y=s.ignoreCase,k=void 0===y||y,N=s.allowTermSplit,P=void 0===N||N,W=s.nonEllipsisTooltip,_=s.tooltipPosition,C=s.wrappingTextTag,G=void 0===C?"em":C,L=s.wrappingElementClassName,O=s["data-testid"],R=l(null),$=f(g,R),b=a((function(){if(!T||!E||0===j)return T;var e=E.replace(/[.*+?^${}()|[\]\\]/g,"\\$&");P&&(e=e.split(" ").join("|"));for(var t=RegExp("(".concat(e,")"),k?"i":""),i=T.split(t),o=[],r=0,s=0,l=0;i.length>l;l++)if(i[l]){var a=l%2==1;o.push(u(i[l],s++,a&&(!j||0>j||j>r),G,L)),a&&r++}return o}),[T,E,j,k,P,G,L]),B=p({ref:H&&R});m((function(){R.current&&R.current.style.setProperty("--heading-clamp-lines",""+w)}),[R,w,B]);var M=r.createElement("div",{ref:$,className:o(c.textWithHighlightWrapper,h,e({},c.withEllipsis,H)),id:d,"data-testid":O||t(i.TEXT_WITH_HIGHLIGHT,d)},b);return B||W?r.createElement(n,{content:B?T:W,position:_},M):M}));export{g as default};
//# sourceMappingURL=TextWithHighlight.js.map