@progress/kendo-react-inputs/textarea/TextArea.js

React Inputs offer a customizable interface for users to enter and pick different information. KendoReact Input package

/**
 * @license
 *-------------------------------------------------------------------------------------------
 * Copyright © 2025 Progress Software Corporation. All rights reserved.
 * Licensed under commercial license. See LICENSE.md in the package root for more information
 *-------------------------------------------------------------------------------------------
 */
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const me=require("react"),e=require("prop-types"),a=require("@progress/kendo-react-common");function pe(l){const c=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(l){for(const s in l)if(s!=="default"){const u=Object.getOwnPropertyDescriptor(l,s);Object.defineProperty(c,s,u.get?u:{enumerable:!0,get:()=>l[s]})}}return c.default=l,Object.freeze(c)}const t=pe(me),q=a.createPropsContext(),S=t.forwardRef((l,c)=>{const s=a.usePropsContext(q,l),{size:u=f.size,rounded:x=f.rounded,fillMode:T=f.fillMode,autoFocus:R=f.autoFocus,flow:v=f.flow,prefix:D=null,suffix:H=null,ariaDescribedBy:$,ariaLabelledBy:L,autoSize:m,className:_,defaultValue:K,disabled:r,readOnly:G,required:p,rows:J,id:Q,name:U,placeholder:W,style:X,tabIndex:Y,value:y,valid:P,validationMessage:w,validityStyles:M,onChange:h,onFocus:k,onBlur:C,visited:be,touched:ge,modified:xe,resizable:d,inputAttributes:Z,textareaStyle:E,...ee}=s,o=t.useRef(null),A=t.useCallback(()=>{o.current&&o.current.focus()},[]),F=t.useCallback(()=>{o.current&&o.current.blur()},[]),[I,V]=t.useState(K),[te,B]=t.useState(!1),[ae,oe]=a.useCustomComponent(D),[re,ne]=a.useCustomComponent(H),b=y!==void 0,g=b?y:I,i=t.useCallback(()=>({element:o,focus:A,blur:F,get value(){return g},get name(){return o.current&&o.current.name}}),[F,A,g]);t.useImperativeHandle(c,i);const[N,j]=t.useState("auto"),se=a.useId(),le=a.useDir(o,s.dir),z=P!==void 0?P:p?!!g:!0;t.useEffect(()=>{o.current&&o.current.setCustomValidity&&o.current.setCustomValidity(z?"":w||"")},[z,w]),a.useIsomorphicLayoutEffect(()=>{o.current&&j(`${o.current.scrollHeight}px`)},[g]);const ue=t.useCallback(n=>{const O=n.target.value;j("auto"),!b&&!r&&V(O),h&&!r&&a.dispatchEvent(h,n,{...i(),value:O},{value:O})},[V,h,r,b]),ie=t.useCallback(n=>{B(!0),k&&!r&&a.dispatchEvent(k,n,i(),void 0)},[k,r,i]),ce=t.useCallback(n=>{B(!1),C&&!r&&a.dispatchEvent(C,n,i(),void 0)},[C,r,i]),de=t.useMemo(()=>{let n={};return m?n={resize:"none",overflow:"hidden",height:N}:d&&(n={resize:d}),{...n,...E}},[m,d,N,E]),fe={id:Q||se,role:"textbox",name:U,className:a.classNames("k-input-inner","!k-overflow-auto",{"k-resize":!m&&d!=="none","k-resize-none":m||d==="none","!k-flex-none":v==="vertical"}),ref:o,disabled:r,rows:J,placeholder:W,readOnly:G,required:p,tabIndex:a.getTabIndex(Y,r),autoFocus:R,style:de,"aria-labelledby":L,"aria-describedby":$,"aria-multiline":!0,"aria-disabled":r||void 0,"aria-required":p,value:b?y:I,...Object.assign({},ee,Z),onChange:ue,onFocus:ie,onBlur:ce};return t.createElement("span",{className:a.classNames("k-input","k-textarea",{[`k-input-${a.kendoThemeMaps.sizeMap[u]||u}`]:u,[`k-input-${T}`]:T,[`k-rounded-${a.kendoThemeMaps.roundedMap[x]||x}`]:x,"k-invalid":!(z||M!==void 0||M===!0),"k-required":p,"k-disabled":r,"k-focus":te,"!k-flex-col":v==="vertical","!k-flex-row":v==="horizontal"},_),style:X,dir:le},s.prefix&&t.createElement(ae,{...oe}),t.createElement("textarea",{...fe}),s.suffix&&t.createElement(re,{...ne}))});S.propTypes={ariaDescribedBy:e.string,ariaLabelledBy:e.string,autoSize:e.bool,className:e.string,defaultValue:e.string,dir:e.string,disabled:e.bool,readOnly:e.bool,rows:e.number,id:e.string,name:e.string,placeholder:e.string,style:e.object,tabIndex:e.number,value:e.oneOfType([e.string,e.arrayOf(e.string),e.number]),onChange:e.func,onFocus:e.func,onBlur:e.func,size:e.oneOf([null,"small","medium","large"]),rounded:e.oneOf([null,"small","medium","large","full"]),fillMode:e.oneOf([null,"solid","flat","outline"]),resizable:e.oneOf(["none","both","horizontal","vertical"]),autoFocus:e.bool,flow:e.oneOf(["vertical","horizontal"])};const f={size:"medium",rounded:"medium",fillMode:"solid",autoFocus:!1,flow:"horizontal"};S.displayName="KendoTextArea";exports.TextArea=S;exports.TextAreaPropsContext=q;