@progress/kendo-react-inputs/input/Input.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 W=require("react"),a=require("prop-types"),l=require("@progress/kendo-react-common"),X=require("@progress/kendo-react-labels");function Y(s){const o=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(s){for(const u in s)if(u!=="default"){const c=Object.getOwnPropertyDescriptor(s,u);Object.defineProperty(o,u,c.get?c:{enumerable:!0,get:()=>s[u]})}}return o.default=s,Object.freeze(o)}const r=Y(W),m=r.forwardRef((s,o)=>{const c=r.useContext(R).call(void 0,s),[,N]=r.useReducer(t=>t,!0),n=l.applyDefaultProps(c,Z),{className:k,label:p,labelClassName:x,id:E,validationMessage:h,defaultValue:S,valid:C,unstyled:V,visited:$,touched:ee,modified:te,autoFocus:w,ariaLabelledBy:D,ariaDescribedBy:q,validityStyles:I,style:P,ariaLabel:F,...U}=n,j=l.useUnstyled(),f=V||j,B=f&&f.uInput,T=l.useId(),[_,A]=r.useState({value:S}),L=E||T,e=r.useRef(null),d=r.useRef(void 0),y=r.useRef(null),G=()=>{e.current&&e.current.focus()},b=()=>d.current!==void 0?d.current:n.value!==void 0?n.value:_.value,v=()=>{const t={badInput:e.current?e.current.validity.badInput:!1,patternMismatch:e.current?e.current.validity.patternMismatch:!1,rangeOverflow:e.current?e.current.validity.rangeOverflow:!1,rangeUnderflow:e.current?e.current.validity.rangeUnderflow:!1,stepMismatch:e.current?e.current.validity.stepMismatch:!1,tooLong:e.current?e.current.validity.tooLong:!1,typeMismatch:e.current?e.current.validity.typeMismatch:!1,valueMissing:e.current?e.current.validity.valueMissing:!1};return{...t,customError:h!==void 0,valid:C!==void 0?C:e.current?!H(t):!0}};r.useImperativeHandle(y,()=>({element:e.current,props:n,get value(){return b()},name:n.name,get validity(){return v()},focus:G})),r.useImperativeHandle(o,()=>y.current);const H=t=>{let i=!1;for(const O in t)t.hasOwnProperty(O)&&(i=i||!!t[O]);return i},g=!I||v().valid,z=l.classNames(k,l.uInput.input({c:B,invalid:!g,disabled:n.disabled})),K=()=>{e.current&&e.current.setCustomValidity&&(v().valid||!I?e.current.classList.remove("k-invalid"):e.current.classList.add("k-invalid"),e.current.setCustomValidity(v().valid?"":h||""))},J=t=>{A({value:t.target.value}),d.current=t.target.value,n.onChange&&n.onChange.call(void 0,{syntheticEvent:t,nativeEvent:t.nativeEvent,value:t.target.value,target:y.current}),d.current=void 0},Q=t=>{if(t.animationName==="autoFillStart"){const i=t.target.parentNode;i&&i.classList.contains("k-empty")&&i.classList.remove("k-empty")}};r.useEffect(()=>{N()},[]),r.useEffect(()=>{K()});const M=r.createElement("input",{"aria-labelledby":D,"aria-describedby":q,"aria-disabled":n.disabled||void 0,"aria-invalid":!g||void 0,"aria-label":F||void 0,...U,style:p?void 0:P,value:b(),id:L,autoFocus:w,className:z,onChange:J,onAnimationStart:Q,ref:e});return p?r.createElement(X.FloatingLabel,{label:p,labelClassName:x,editorId:L,editorValue:String(b()),editorValid:g,editorDisabled:n.disabled,editorPlaceholder:n.placeholder,children:M,style:P,dir:n.dir,unstyled:f}):M}),R=l.createPropsContext(),Z={defaultValue:"",required:!1,validityStyles:!0,autoFocus:!1};m.displayName="KendoReactInput";m.propTypes={label:a.node,labelClassName:a.string,validationMessage:a.string,required:a.bool,validate:a.bool,id:a.string,ariaLabelledBy:a.string,ariaDescribedBy:a.string,ariaLabel:a.string,autoFocus:a.bool,value:a.oneOfType([a.string,a.number,a.array])};exports.Input=m;exports.InputPropsContext=R;