@progress/kendo-react-inputs
Version:
React Inputs offer a customizable interface for users to enter and pick different information. KendoReact Input package
175 lines (174 loc) • 4.75 kB
JavaScript
/**
* @license
*-------------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the package root for more information
*-------------------------------------------------------------------------------------------
*/
import * as t from "react";
import e from "prop-types";
import { createPropsContext as ue, usePropsContext as de, useCustomComponent as E, useId as ce, useDir as fe, useIsomorphicLayoutEffect as me, dispatchEvent as y, classNames as F, getTabIndex as pe, kendoThemeMaps as M } from "@progress/kendo-react-common";
const be = ue(), A = t.forwardRef((S, w) => {
const s = de(be, S), {
size: c = d.size,
rounded: f = d.rounded,
fillMode: k = d.fillMode,
autoFocus: N = d.autoFocus,
prefix: H = null,
suffix: R = null,
ariaDescribedBy: $,
ariaLabelledBy: q,
autoSize: C,
className: D,
defaultValue: L,
disabled: r,
readOnly: j,
required: n,
rows: K,
id: G,
name: J,
placeholder: Q,
style: U,
tabIndex: W,
value: m,
valid: z,
validationMessage: I,
validityStyles: O,
onChange: p,
onFocus: b,
onBlur: g,
// Removed to support direct use in Form Field component
visited: ge,
touched: xe,
modified: ve,
resizable: x,
inputAttributes: X,
...Y
} = s, a = t.useRef(null), P = t.useCallback(() => {
a.current && a.current.focus();
}, []), [T, V] = t.useState(L), [Z, _] = E(H), [ee, te] = E(R), l = m !== void 0, i = l ? m : T, u = t.useCallback(() => ({
element: a,
focus: P,
get value() {
return i;
},
get name() {
return a.current && a.current.name;
}
}), [P, i]);
t.useImperativeHandle(w, u);
const [ae, B] = t.useState("auto"), re = ce(), oe = fe(a, s.dir), v = z !== void 0 ? z : n ? !!i : !0;
t.useEffect(() => {
a.current && a.current.setCustomValidity && a.current.setCustomValidity(v ? "" : I || "");
}, [v, I]), me(() => {
a.current && B(`${a.current.scrollHeight}px`);
}, [i]);
const se = t.useCallback(
(o) => {
const h = o.target.value;
B("auto"), !l && !r && V(h), p && !r && y(
p,
o,
{
...u(),
value: h
},
{ value: h }
);
},
[V, p, r, l]
), ne = t.useCallback(
(o) => {
b && !r && y(b, o, u(), void 0);
},
[b, r]
), le = t.useCallback(
(o) => {
g && !r && y(g, o, u(), void 0);
},
[g, r]
), ie = {
id: G || re,
role: "textbox",
name: J,
className: F("k-input-inner", "!k-overflow-auto", { "k-resize": !C && x !== "none" }),
ref: a,
disabled: r,
rows: K,
placeholder: Q,
readOnly: j,
required: n,
tabIndex: pe(W, r),
autoFocus: N,
style: C ? { resize: "none", overflow: "hidden", height: ae } : x ? { resize: x } : {},
"aria-labelledby": q,
"aria-describedby": $,
"aria-multiline": !0,
"aria-disabled": r || void 0,
"aria-required": n,
value: l ? m : T,
...Object.assign({}, Y, X),
onChange: se,
onFocus: ne,
onBlur: le
};
return /* @__PURE__ */ t.createElement(
"span",
{
className: F(
"k-input",
"k-textarea",
{
[`k-input-${M.sizeMap[c] || c}`]: c,
[`k-input-${k}`]: k,
[`k-rounded-${M.roundedMap[f] || f}`]: f,
"k-invalid": !(v || O !== void 0 || O === !0),
"k-required": n,
"k-disabled": r
},
D
),
style: U,
dir: oe
},
s.prefix && /* @__PURE__ */ t.createElement(Z, { ..._ }),
/* @__PURE__ */ t.createElement("textarea", { ...ie }),
s.suffix && /* @__PURE__ */ t.createElement(ee, { ...te })
);
});
A.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 d = {
size: "medium",
rounded: "medium",
fillMode: "solid",
autoFocus: !1
};
A.displayName = "KendoTextArea";
export {
A as TextArea,
be as TextAreaPropsContext
};