@anoki/fse-ui
Version:
FSE UI components library
8 lines (6 loc) • 3.04 kB
JavaScript
;Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const n=require("react");var m=typeof window>"u",y=m?n.useEffect:n.useLayoutEffect,S=0,h=()=>++S,b=!1;function E(){let[t,s]=n.useState(b?h:void 0);return y(()=>{t===void 0&&s(h()),b=!0},[]),t===void 0?t:`rwb-${t.toString(32)}`}function x(){return n.useMemo(()=>"useId"in n?n.useId:E,[])()}var p="__wrap_b",f="__wrap_n",_="__wrap_o",w=(t,s,e)=>{e=e||document.querySelector(`[data-br="${t}"]`);let r=e==null?void 0:e.parentElement;if(!r)return;let l=c=>e.style.maxWidth=c+"px";e.style.maxWidth="";let i=r.clientWidth,d=r.clientHeight,o=i/2-.25,a=i+.5,u;if(i){for(l(o),o=Math.max(e.scrollWidth,o);o+1<a;)u=Math.round((o+a)/2),l(u),r.clientHeight===d?a=u:o=u;l(a*s+i*(1-s))}e.__wrap_o||(typeof ResizeObserver<"u"?(e.__wrap_o=new ResizeObserver(()=>{self.__wrap_b(0,+e.dataset.brr,e)})).observe(r):process.env.NODE_ENV==="development"&&console.warn("The browser you are using does not support the ResizeObserver API. Please consider add polyfill for this API to avoid potential layout shifts or upgrade your browser. Read more: https://github.com/shuding/react-wrap-balancer#browser-support-information"))},N=w.toString(),A='(self.CSS&&CSS.supports("text-wrap","balance")?1:2)',O=(t,s,e="")=>(e&&(e=`self.${f}!=1&&${e}`),n.createElement("script",{suppressHydrationWarning:!0,dangerouslySetInnerHTML:{__html:(t?"":`self.${f}=self.${f}||${A};self.${p}=${N};`)+e},nonce:s})),I=n.createContext({preferNative:!0,hasProvider:!1}),g=n.forwardRef(({ratio:t=1,preferNative:s,nonce:e,children:r,as:l,...i},d)=>{let o=x(),a=n.useRef(),u=n.useContext(I),c=s??u.preferNative,$=l||"span";return n.useImperativeHandle(d,()=>a.current,[]),y(()=>{c&&self[f]===1||a.current&&(self[p]=w)(0,t,a.current)},[r,c,t]),y(()=>{if(!(c&&self[f]===1))return()=>{if(!a.current)return;let v=a.current[_];v&&(v.disconnect(),delete a.current[_])}},[c]),process.env.NODE_ENV==="development"&&r&&!Array.isArray(r)&&typeof r=="object"&&"type"in r&&typeof r.type=="string"&&r.type!=="span"&&console.warn(`<Balancer> should not wrap <${r.type}> inside. Instead, it should directly wrap text or inline nodes.
Try changing this:
<Balancer><${r.type}>content</${r.type}></Balancer>
To:
<${r.type}><Balancer>content</Balancer></${r.type}>`),n.createElement(n.Fragment,null,n.createElement($,{...i,"data-br":o,"data-brr":t,ref:a,style:{display:"inline-block",verticalAlign:"top",textDecoration:"inherit",textWrap:c?"balance":"initial"},suppressHydrationWarning:!0},r),O(u.hasProvider,e,`self.${p}("${o}",${t})`))});if(!m&&process.env.NODE_ENV!=="production"){let t=document.querySelector("[data-next-hide-fouc]");if(t){let s=r=>{for(let l of r)for(let i of Array.from(l.removedNodes)){if(i!==t)continue;e.disconnect();let d=document.querySelectorAll("[data-br]");for(let o of Array.from(d))self[p](0,+o.dataset.brr,o)}},e=new MutationObserver(s);e.observe(document.head,{childList:!0})}}var R=g;exports.Balancer=g;exports.default=R;
//# sourceMappingURL=index.cjs256.js.map