@start-base/react-form-elements/TextArea/index.mjs

Simplify form elements and form management. Selection of user friendly inputs and wide customization abilities to match your design and functionality.

import e,{forwardRef as l,useRef as r,useState as a,useEffect as t,useMemo as n,useCallback as o}from"react";import u from"clsx";var s=Object.defineProperty,i=Object.getOwnPropertySymbols,d=Object.prototype.hasOwnProperty,c=Object.prototype.propertyIsEnumerable,m=(e,l,r)=>l in e?s(e,l,{enumerable:!0,configurable:!0,writable:!0,value:r}):e[l]=r,b=(e,l)=>{for(var r in l||(l={}))d.call(l,r)&&m(e,r,l[r]);if(i)for(var r of i(l))c.call(l,r)&&m(e,r,l[r]);return e},p="SUI-TextArea-module-inputContainer-j6GDh",h="SUI-TextArea-module-label-CoCQG",v="SUI-TextArea-module-focusedContainer-1KbhK",x="SUI-TextArea-module-innerContainer-SmzlR",f="SUI-TextArea-module-innerWrapper-t0xFX",S="SUI-TextArea-module-input-OEgHJ",y="SUI-TextArea-module-withLabel-8jLka",A="SUI-TextArea-module-errorLabel-EqHep",g="SUI-TextArea-module-disabled-N09tP",C="SUI-TextArea-module-inputError-khDK0",I="SUI-TextArea-module-disabledLabel-oY2zO",N="SUI-TextArea-module-disableShrink-Jb7WA",T="SUI-TextArea-module-disableShrinkInput-pVE3n",U="SUI-TextArea-module-labelPlaceholder-xOQdB",E=l(((l,s)=>{var m=l,{name:E,onChange:O,error:k=null,value:j="",placeholder:w=null,label:F=null,disabled:P=!1,inputClassName:B=null,labelClassName:G=null,errorClassName:L=null,onFocus:q=()=>({}),onBlur:H=()=>({}),autoGrow:K=!1,disableShrink:z=!1}=m,D=((e,l)=>{var r={};for(var a in e)d.call(e,a)&&l.indexOf(a)<0&&(r[a]=e[a]);if(null!=e&&i)for(var a of i(e))l.indexOf(a)<0&&c.call(e,a)&&(r[a]=e[a]);return r})(m,["name","onChange","error","value","placeholder","label","disabled","inputClassName","labelClassName","errorClassName","onFocus","onBlur","autoGrow","disableShrink"]);const J=r((null==s?void 0:s.current)||null),[Q,W]=a(!1);t((()=>{K&&J.current&&(J.current.style.height="auto",J.current.style.height=J.current.scrollHeight+"px")}),[K,j]);const R=n((()=>{let e=null;return k&&"string"==typeof k?e=k:k&&"object"==typeof k&&(null==k?void 0:k.message)&&(e=k.message),e}),[k]),V=o((e=>{O({target:{name:e.target.name,value:e.target.value}})}),[O]),X=o((()=>{var e;W(!0),null==(e=J.current)||e.focus()}),[J]),Y=n((()=>e.createElement("textarea",b({ref:J,disabled:P,className:u(S,b({[y]:!!F,[g]:P,[T]:z,[C]:"boolean"==typeof k&&k},B?{[B]:!0}:{})),value:j,onChange:V,placeholder:w||void 0,name:E,onFocus:e=>{q(e),W(!0)},onBlur:e=>{H(e),W(!1)}},D))),[P,F,z,k,B,j,V,w,E,D,q,H]),$=n((()=>e.createElement("label",{htmlFor:E,className:u(h,b({[N]:z,[I]:P,[U]:F&&w&&!z},G?{[G]:!0}:{})),onClick:()=>{var e;try{const l=document.querySelectorAll(`[name="${E}"]`);if(!l.length)return;let r=l[0];"hidden"===(null==r?void 0:r.type)&&(r=null==(e=null==r?void 0:r.parentNode)?void 0:e.querySelector("textarea")),null==r||r.focus()}catch(e){throw e}}},F)),[E,z,F,P,G,w]);return e.createElement("div",{className:u(p,{[v]:!w&&(Q||!!j)&&!z})},e.createElement("div",{className:x},F&&$,e.createElement("div",{onClick:X,className:f},Y)),R?e.createElement("div",{className:u(A,b({},L?{[L]:!0}:{}))},R):null)}));E.displayName="TextArea";var O=E;export{O as default};