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

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

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