@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 le=require("react"),e=require("prop-types"),a=require("@progress/kendo-react-common");function ie(s){const u=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(s){for(const o in s)if(o!=="default"){const l=Object.getOwnPropertyDescriptor(s,o);Object.defineProperty(u,o,l.get?l:{enumerable:!0,get:()=>s[o]})}}return u.default=s,Object.freeze(u)}const t=ie(le),B=a.createPropsContext(),O=t.forwardRef((s,u)=>{const o=a.usePropsContext(B,s),{size:l=p.size,rounded:b=p.rounded,fillMode:z=p.fillMode,autoFocus:F=p.autoFocus,prefix:N=null,suffix:j=null,ariaDescribedBy:w,ariaLabelledBy:q,autoSize:T,className:R,defaultValue:D,disabled:n,readOnly:H,required:c,rows:$,id:L,name:_,placeholder:K,style:G,tabIndex:J,value:g,valid:P,validationMessage:M,validityStyles:S,onChange:x,onFocus:v,onBlur:y,visited:ue,touched:ce,modified:de,resizable:h,inputAttributes:Q,...U}=o,r=t.useRef(null),E=t.useCallback(()=>{r.current&&r.current.focus()},[]),[A,I]=t.useState(D),[W,X]=a.useCustomComponent(N),[Y,Z]=a.useCustomComponent(j),d=g!==void 0,f=d?g:A,m=t.useCallback(()=>({element:r,focus:E,get value(){return f},get name(){return r.current&&r.current.name}}),[E,f]);t.useImperativeHandle(u,m);const[ee,V]=t.useState("auto"),te=a.useId(),ae=a.useDir(r,o.dir),C=P!==void 0?P:c?!!f:!0;t.useEffect(()=>{r.current&&r.current.setCustomValidity&&r.current.setCustomValidity(C?"":M||"")},[C,M]),a.useIsomorphicLayoutEffect(()=>{r.current&&V(`${r.current.scrollHeight}px`)},[f]);const re=t.useCallback(i=>{const k=i.target.value;V("auto"),!d&&!n&&I(k),x&&!n&&a.dispatchEvent(x,i,{...m(),value:k},{value:k})},[I,x,n,d]),ne=t.useCallback(i=>{v&&!n&&a.dispatchEvent(v,i,m(),void 0)},[v,n]),oe=t.useCallback(i=>{y&&!n&&a.dispatchEvent(y,i,m(),void 0)},[y,n]),se={id:L||te,role:"textbox",name:_,className:a.classNames("k-input-inner","!k-overflow-auto",{"k-resize":!T&&h!=="none"}),ref:r,disabled:n,rows:$,placeholder:K,readOnly:H,required:c,tabIndex:a.getTabIndex(J,n),autoFocus:F,style:T?{resize:"none",overflow:"hidden",height:ee}:h?{resize:h}:{},"aria-labelledby":q,"aria-describedby":w,"aria-multiline":!0,"aria-disabled":n||void 0,"aria-required":c,value:d?g:A,...Object.assign({},U,Q),onChange:re,onFocus:ne,onBlur:oe};return t.createElement("span",{className:a.classNames("k-input","k-textarea",{[`k-input-${a.kendoThemeMaps.sizeMap[l]||l}`]:l,[`k-input-${z}`]:z,[`k-rounded-${a.kendoThemeMaps.roundedMap[b]||b}`]:b,"k-invalid":!(C||S!==void 0||S===!0),"k-required":c,"k-disabled":n},R),style:G,dir:ae},o.prefix&&t.createElement(W,{...X}),t.createElement("textarea",{...se}),o.suffix&&t.createElement(Y,{...Z}))});O.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};const p={size:"medium",rounded:"medium",fillMode:"solid",autoFocus:!1};O.displayName="KendoTextArea";exports.TextArea=O;exports.TextAreaPropsContext=B;