carbon-react/esm/components/textarea/textarea.component.js

A library of reusable React components for easily building user interfaces.

import{jsxs as e,jsx as i,Fragment as n}from"react/jsx-runtime";import t,{useContext as r,useState as o,useRef as l,useCallback as a,useEffect as d}from"react";import s from"../../__internal__/utils/helpers/tags/tags.js";import p from"../../__internal__/input/input.component.js";import u from"../../__internal__/input/input-presentation.component.js";import c from"../../__internal__/form-field/form-field.component.js";import b from"../../hooks/useCharacterCount/useCharacterCount.js";import{InputBehaviour as m}from"../../__internal__/input-behaviour/input-behaviour.component.js";import f from"../../__internal__/input-icon-toggle/input-icon-toggle.component.js";import h from"../../__internal__/utils/helpers/guid/index.js";import g,{DEFAULT_MIN_HEIGHT as v}from"./textarea.style.js";import{TooltipProvider as y}from"../../__internal__/tooltip-provider/index.js";import _ from"../../hooks/__internal__/useInputAccessibility/useInputAccessibility.js";import O from"../carbon-provider/__internal__/new-validation.context.js";import j from"../textbox/textbox.style.js";import w from"../../__internal__/validation-message/validation-message.component.js";import{Box as x}from"../box/box.component.js";import I from"../../__internal__/utils/logger/index.js";import{HintText as P}from"../../__internal__/hint-text/hint-text.component.js";import"../../style/utils/filter-styled-system-padding-props.js";import H from"../../style/utils/filter-styled-system-margin-props.js";function L(e,i,n){return i in e?Object.defineProperty(e,i,{value:n,enumerable:!0,configurable:!0,writable:!0}):e[i]=n,e}function B(e){for(var i=1;i<arguments.length;i++){var n=null!=arguments[i]?arguments[i]:{},t=Object.keys(n);"function"==typeof Object.getOwnPropertySymbols&&(t=t.concat(Object.getOwnPropertySymbols(n).filter((function(e){return Object.getOwnPropertyDescriptor(n,e).enumerable})))),t.forEach((function(i){L(e,i,n[i])}))}return e}let T=!1,A=!1;const R=t.forwardRef(((t,L)=>{var{"aria-labelledby":R,"aria-describedby":S,autoFocus:W,inputHint:k,fieldHelp:E,label:C,children:q,characterLimit:F,onChange:D,onFocus:M,onBlur:z,disabled:V=!1,labelInline:N,labelAlign:$,labelHelp:G,labelSpacing:J,inputIcon:K,id:Q,error:U,warning:X,info:Y,name:Z,readOnly:ee=!1,placeholder:ie,expandable:ne=!1,rows:te,validationOnLabel:re=!1,adaptiveLabelBreakpoint:oe,inputWidth:le,maxWidth:ae,labelWidth:de=30,tooltipPosition:se,value:pe,"data-element":ue,"data-role":ce,helpAriaLabel:be,borderRadius:me,hideBorders:fe=!1,required:he,isOptional:ge,minHeight:ve=v,validationMessagePositionTop:ye=!0}=t,_e=function(e,i){if(null==e)return{};var n,t,r=function(e,i){if(null==e)return{};var n,t,r={},o=Object.keys(e);for(t=0;t<o.length;t++)n=o[t],i.indexOf(n)>=0||(r[n]=e[n]);return r}(e,i);if(Object.getOwnPropertySymbols){var o=Object.getOwnPropertySymbols(e);for(t=0;t<o.length;t++)n=o[t],i.indexOf(n)>=0||Object.prototype.propertyIsEnumerable.call(e,n)&&(r[n]=e[n])}return r}(t,["aria-labelledby","aria-describedby","autoFocus","inputHint","fieldHelp","label","children","characterLimit","onChange","onFocus","onBlur","disabled","labelInline","labelAlign","labelHelp","labelSpacing","inputIcon","id","error","warning","info","name","readOnly","placeholder","expandable","rows","validationOnLabel","adaptiveLabelBreakpoint","inputWidth","maxWidth","labelWidth","tooltipPosition","value","data-element","data-role","helpAriaLabel","borderRadius","hideBorders","required","isOptional","minHeight","validationMessagePositionTop"]);!T&&ge&&(T=!0,I.deprecate("`isOptional` is deprecated in TextArea and support will soon be removed. If the value of this component is not required, use the `required` prop and set it to false instead."));const{validationRedesignOptIn:Oe}=r(O),je=!Oe&&N,[we,xe]=o(v),Ie=e=>Oe?void 0:e,{current:Pe}=l(Q||h()),He=l(null),Le=a((e=>{He.current=e,L&&("current"in L?L.current=e:L(e))}),[L]),[Be,Te]=o("off");Array.isArray(me)&&me.length>4&&!A&&(I.warn("The `borderRadius` prop in `Textarea` component only supports up to 4 values."),A=!0);const Ae=a((()=>{const e=He.current;if((null==e?void 0:e.scrollHeight)&&(null==e?void 0:e.scrollHeight)>we){let i=e;for(;i&&!(null==i?void 0:i.scrollTop);)i=(null==i?void 0:i.parentElement)||null;const n=null==i?void 0:i.scrollTop;e.style.height="auto",e.style.height=`${Math.max(e.scrollHeight,we)}px`,i&&n&&(i.scrollTop=n)}}),[we]),{labelId:Re,validationId:Se,fieldHelpId:We,ariaDescribedBy:ke}=_({id:Pe,validationRedesignOptIn:Oe,error:U,warning:X,info:Y,label:C,fieldHelp:E}),[Ee,Ce]=b(pe,F,Be);d((()=>{var e;xe(te?(null==He||null===(e=He.current)||void 0===e?void 0:e.scrollHeight)||0:ve>v?ve:v)}),[ve,te]),d((()=>{ne&&Ae()})),d((()=>{var e,i;return ne&&(window.addEventListener("resize",Ae),xe((null==He||null===(e=He.current)||void 0===e?void 0:e.clientHeight)||0),null===(i=document.fonts)||void 0===i||i.addEventListener("loadingdone",Ae)),()=>{var e;ne&&(window.removeEventListener("resize",Ae),null===(e=document.fonts)||void 0===e||e.removeEventListener("loadingdone",Ae))}}),[Ae,ne]);const qe=!!(K||Se&&!re),Fe=l(h()),De=k?Fe.current:void 0,Me=[...Oe&&ye?[ke,De]:[De,ke],Ce,S].filter(Boolean).join(" "),ze=e(u,{disabled:V,readOnly:ee,inputWidth:"number"==typeof le?le:100-de,maxWidth:ae,error:U,warning:X,info:Y,borderRadius:me,hideBorders:fe,children:[i(p,B({"aria-invalid":!!U,"aria-labelledby":R,"aria-describedby":Me,autoFocus:W,name:Z,value:pe,ref:Le,onChange:D,onFocus:e=>{F&&Te("polite"),null==M||M(e)},onBlur:e=>{F&&Te("off"),null==z||z(e)},disabled:V,readOnly:ee,placeholder:V?"":ie,rows:te,id:Pe,as:"textarea",validationIconId:Oe?void 0:Se,inputBorderRadius:me,required:he},_e)),q,i(f,{disabled:V,readOnly:ee,inputIcon:K,error:U,warning:X,info:Y,validationIconId:Oe?void 0:Se,useValidationIcon:!(Oe||re)})]}),Ve=H(_e);return i(y,{tooltipPosition:se,helpAriaLabel:be,children:i(m,{children:i(g,(Ne=B({labelInline:je,hasIcon:qe,minHeight:we},Ve,s("textarea",{"data-element":ue,"data-role":ce})),$e={children:e(c,{fieldHelp:Ie(E),fieldHelpId:We,error:U,warning:X,info:Y,label:C,labelId:Re,disabled:V,id:Pe,labelInline:Ie(je),labelAlign:$,labelWidth:Ie(de),labelHelp:Ie(G),labelSpacing:J,isRequired:he,useValidationIcon:Ie(re),adaptiveLabelBreakpoint:oe,validationRedesignOptIn:Oe,my:0,children:[(k||G&&Oe)&&i(P,{align:$,id:De,"data-element":"input-hint",children:k||G}),Oe?e(x,{position:"relative",children:[ye&&e(n,{children:[i(w,{error:U,validationId:Se,warning:X,validationMessagePositionTop:ye}),(U||X)&&i(j,{warning:!(U||!X)})]}),ze,!ye&&e(n,{children:[i(w,{error:U,validationId:Se,warning:X,validationMessagePositionTop:ye}),(U||X)&&i(j,{warning:!(U||!X)})]})]}):ze,Ee]})},$e=null!=$e?$e:{},Object.getOwnPropertyDescriptors?Object.defineProperties(Ne,Object.getOwnPropertyDescriptors($e)):function(e){var i=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);i.push.apply(i,n)}return i}(Object($e)).forEach((function(e){Object.defineProperty(Ne,e,Object.getOwnPropertyDescriptor($e,e))})),Ne))})});var Ne,$e}));R.displayName="Textarea";export{R as OriginalTextarea,R as Textarea,R as default};